@vendure/admin-ui 2.1.0-next.2 → 2.1.0-next.3

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, isDevMode, Inject, HostListener, ChangeDetectionStrategy, Input, ViewChild, Directive, Optional, ContentChild, EventEmitter, Output, Pipe, APP_INITIALIZER, HostBinding, Injector, NgModule, ChangeDetectorRef, ViewContainerRef, ViewChildren, forwardRef, TemplateRef, SkipSelf, inject, ContentChildren, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Injectable, Component, isDevMode, Inject, HostListener, ChangeDetectionStrategy, Input, ViewChild, Directive, Optional, ContentChild, EventEmitter, Output, Pipe, HostBinding, Injector, APP_INITIALIZER, NgModule, ChangeDetectorRef, ViewContainerRef, ViewChildren, forwardRef, TemplateRef, SkipSelf, inject, ContentChildren, ElementRef, CUSTOM_ELEMENTS_SCHEMA, InjectionToken } from '@angular/core';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule, PlatformLocation } from '@angular/common';
 import { concatMap, bufferCount, map, filter, distinctUntilChanged, skip, takeUntil, tap, take, finalize, switchMap, mapTo, startWith, mergeMap, catchError, shareReplay, throttleTime, scan, debounceTime, delay, bufferWhen, delayWhen } from 'rxjs/operators';
@@ -35,12 +35,12 @@ import { NgSelectComponent, SELECTION_MODEL_FACTORY, NgSelectModule } from '@ng-
 import { DEFAULT_CHANNEL_CODE, DEFAULT_AUTH_TOKEN_HEADER_KEY } from '@vendure/common/lib/shared-constants';
 import { flatten } from 'lodash';
 import * as i10 from '@angular/cdk/bidi';
+import { CodeJar } from 'codejar';
 import { setContext } from '@apollo/client/link/context';
 import { ApolloLink as ApolloLink$1 } from '@apollo/client/link/core';
 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 { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import dayjs from 'dayjs';
@@ -7033,6 +7033,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
             args: [{ selector: 'vdr-alerts', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-dropdown>\r\n    <button class=\"alerts-button\" vdrDropdownTrigger>\r\n        <vdr-status-badge *ngIf=\"hasAlerts$ | async\" [type]=\"'warning'\"></vdr-status-badge>\r\n        <div class=\"user-circle\">\r\n            <clr-icon shape=\"bell\" size=\"16\"></clr-icon>\r\n        </div>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <ng-container *ngIf=\"activeAlerts$ | async as activeAlerts\">\r\n            <ng-container *ngIf=\"activeAlerts.length; else noAlerts\">\r\n                <button *ngFor=\"let alert of activeAlerts\" vdrDropdownItem (click)=\"alert.runAction()\" [disabled]=\"alert.hasRun\">\r\n                    <clr-icon shape=\"check is-success\" *ngIf=\"alert.hasRun\"></clr-icon>\r\n                    {{ alert.label.text | translate : alert.label.translationVars }}\r\n                </button>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #noAlerts>\r\n            <div class=\"no-alerts\">\r\n                <clr-icon shape=\"check\" class=\"mr-1\" /><span>{{ 'common.no-alerts' | translate }}</span>\r\n            </div></ng-template\r\n        >\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".alerts-button{position:relative;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;padding:calc(var(--space-unit) * 1.5)}.alerts-button:hover{color:var(--color-text-200)}vdr-status-badge{position:absolute;top:9px;right:9px}.no-alerts{display:flex;align-items:center;justify-content:center;height:100%;width:100%;color:var(--color-text-300);font-size:var(--font-size-sm);padding:0 calc(var(--space-unit) * 1.5)}\n"] }]
         }], ctorParameters: function () { return [{ type: AlertsService }]; } });
 
+// Auto-generated by the set-version.js script.
+const ADMIN_UI_VERSION = '2.1.0-next.3';
+
 /* eslint-disable @angular-eslint/directive-selector */
 class FormFieldControlDirective {
     constructor(elementRef, formControlName) {
@@ -7134,17 +7137,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
  * A helper component used to embed a component instance into the {@link ModalDialogComponent}
  */
 class DialogComponentOutletComponent {
-    constructor(viewContainerRef, componentFactoryResolver) {
+    constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
-        this.componentFactoryResolver = componentFactoryResolver;
         this.create = new EventEmitter();
     }
     ngOnInit() {
-        const factory = this.componentFactoryResolver.resolveComponentFactory(this.component);
-        const componentRef = this.viewContainerRef.createComponent(factory);
+        const componentRef = this.viewContainerRef.createComponent(this.component);
         this.create.emit(componentRef.instance);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DialogComponentOutletComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DialogComponentOutletComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DialogComponentOutletComponent, selector: "vdr-dialog-component-outlet", inputs: { component: "component" }, outputs: { create: "create" }, ngImport: i0, template: ``, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DialogComponentOutletComponent, decorators: [{
@@ -7153,7 +7154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
                     selector: 'vdr-dialog-component-outlet',
                     template: ``,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { component: [{
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { component: [{
                 type: Input
             }], create: [{
                 type: Output
@@ -8123,8 +8124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
  * @docsWeight 0
  */
 class ModalService {
-    constructor(componentFactoryResolver, overlayHostService) {
-        this.componentFactoryResolver = componentFactoryResolver;
+    constructor(overlayHostService) {
         this.overlayHostService = overlayHostService;
     }
     /**
@@ -8169,9 +8169,8 @@ class ModalService {
      * ```
      */
     fromComponent(component, options) {
-        const modalFactory = this.componentFactoryResolver.resolveComponentFactory(ModalDialogComponent);
         return from(this.overlayHostService.getHostView()).pipe(mergeMap(hostView => {
-            const modalComponentRef = hostView.createComponent(modalFactory);
+            const modalComponentRef = hostView.createComponent(ModalDialogComponent);
             const modalInstance = modalComponentRef.instance;
             modalInstance.childComponentType = component;
             modalInstance.options = options;
@@ -8194,7 +8193,7 @@ class ModalService {
             size: config.size,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ModalService, deps: [{ token: i0.ComponentFactoryResolver }, { token: OverlayHostService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ModalService, deps: [{ token: OverlayHostService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ModalService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ModalService, decorators: [{
@@ -8202,7 +8201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: OverlayHostService }]; } });
+        }], ctorParameters: function () { return [{ type: OverlayHostService }]; } });
 
 class BreadcrumbService {
     constructor(router, route, dataService) {
@@ -8469,117 +8468,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
                 type: Output
             }] } });
 
-/**
- * @description
- * Add a section to the main nav menu. Providing the `before` argument will
- * move the section before any existing section with the specified id. If
- * omitted (or if the id is not found) the section will be appended to the
- * existing set of sections.
- * This should be used in the NgModule `providers` array of your ui extension module.
- *
- * @example
- * ```TypeScript
- * \@NgModule({
- *   imports: [SharedModule],
- *   providers: [
- *     addNavMenuSection({
- *       id: 'reports',
- *       label: 'Reports',
- *       items: [{
- *           // ...
- *       }],
- *     },
- *     'settings'),
- *   ],
- * })
- * export class MyUiExtensionModule {}
- * ```
- * @docsCategory nav-menu
- */
-function addNavMenuSection(config, before) {
-    return {
-        provide: APP_INITIALIZER,
-        multi: true,
-        useFactory: (navBuilderService) => () => {
-            navBuilderService.addNavMenuSection(config, before);
-        },
-        deps: [NavBuilderService],
-    };
-}
-/**
- * @description
- * Add a menu item to an existing section specified by `sectionId`. The id of the section
- * can be found by inspecting the DOM and finding the `data-section-id` attribute.
- * Providing the `before` argument will move the item before any existing item with the specified id.
- * If omitted (or if the name is not found) the item will be appended to the
- * end of the section.
- *
- * This should be used in the NgModule `providers` array of your ui extension module.
- *
- * @example
- * ```TypeScript
- * \@NgModule({
- *   imports: [SharedModule],
- *   providers: [
- *     addNavMenuItem({
- *       id: 'reviews',
- *       label: 'Product Reviews',
- *       routerLink: ['/extensions/reviews'],
- *       icon: 'star',
- *     },
- *     'marketing'),
- *   ],
- * })
- * export class MyUiExtensionModule {}
- * ``
- *
- * @docsCategory nav-menu
- */
-function addNavMenuItem(config, sectionId, before) {
-    return {
-        provide: APP_INITIALIZER,
-        multi: true,
-        useFactory: (navBuilderService) => () => {
-            navBuilderService.addNavMenuItem(config, sectionId, before);
-        },
-        deps: [NavBuilderService],
-    };
-}
-/**
- * @description
- * Adds a button to the ActionBar at the top right of each list or detail view. The locationId can
- * be determined by inspecting the DOM and finding the <vdr-action-bar> element and its
- * `data-location-id` attribute.
- *
- * This should be used in the NgModule `providers` array of your ui extension module.
- *
- * @example
- * ```TypeScript
- * \@NgModule({
- *   imports: [SharedModule],
- *   providers: [
- *     addActionBarItem({
- *      id: 'print-invoice'
- *      label: 'Print Invoice',
- *      locationId: 'order-detail',
- *      routerLink: ['/extensions/invoicing'],
- *     }),
- *   ],
- * })
- * export class MyUiExtensionModule {}
- * ```
- * @docsCategory action-bar
- */
-function addActionBarItem(config) {
-    return {
-        provide: APP_INITIALIZER,
-        multi: true,
-        useFactory: (navBuilderService) => () => {
-            navBuilderService.addActionBarItem(config);
-        },
-        deps: [NavBuilderService],
-    };
-}
 /**
  * This service is used to define the contents of configurable menus in the application.
  */
@@ -9136,19 +9024,43 @@ class UiExtensionPointComponent {
         this.display = 'inline-block';
         this.isDevMode = isDevMode();
     }
+    getCodeTemplate(api) {
+        return codeTemplates[api](this.locationId, this.metadata).trim();
+    }
     ngOnInit() {
         this.display$ = this.dataService.client
             .uiState()
-            .mapStream(({ uiState }) => uiState.displayUiExtensionPoints);
+            .mapStream(({ uiState }) => uiState.displayUiExtensionPoints)
+            .pipe(tap(display => {
+            if (display) {
+                setTimeout(() => {
+                    const highlight = (editor) => {
+                        const code = editor.textContent ?? '';
+                        editor.innerHTML = highlightTsCode(this.getCodeTemplate(this.api));
+                    };
+                    this.editorElementRef.nativeElement.contentEditable = 'false';
+                    this.jar = CodeJar(this.editorElementRef.nativeElement, highlight);
+                    this.jar.updateCode(this.getCodeTemplate(this.api));
+                });
+            }
+        }));
+    }
+    ngAfterViewInit() {
+        // this.dropdownComponent.onOpenChange(isOpen => {
+        //     if (isOpen) {
+        //     }
+        // });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: UiExtensionPointComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: { locationId: "locationId", topPx: "topPx", leftPx: "leftPx", display: "display", api: "api" }, host: { properties: { "style.display": "this.display" } }, ngImport: i0, template: "<div [class.highlight]=\"isDevMode && (display$ | async)\" class=\"wrapper\" [style.display]=\"display\">\r\n    <vdr-dropdown *ngIf=\"isDevMode && (display$ | async)\">\r\n        <button class=\"btn btn-icon btn-link extension-point-info-trigger\"\r\n                [style.top.px]=\"topPx ?? 0\"\r\n                [style.left.px]=\"leftPx ?? 0\"\r\n                vdrDropdownTrigger>\r\n            <clr-icon shape=\"plugin\" class=\"\" size=\"16\"></clr-icon>\r\n        </button>\r\n        <vdr-dropdown-menu>\r\n            <div class=\"extension-info\">\r\n                <pre *ngIf=\"api === 'actionBar'\">\r\naddActionBarItem({{ '{' }}\r\n  id: 'my-button',\r\n  label: 'My Action',\r\n  locationId: '{{ locationId }}',\r\n{{ '}' }})</pre>\r\n                <pre *ngIf=\"api === 'navMenu'\">\r\naddNavMenuItem({{ '{' }}\r\n  id: 'my-menu-item',\r\n  label: 'My Menu Item',\r\n  routerLink: ['/extensions/my-plugin'],\r\n  {{ '}' }},\r\n  '{{ locationId }}'\r\n)</pre>\r\n                <pre *ngIf=\"api === 'detailComponent'\">\r\nregisterCustomDetailComponent({{ '{' }}\r\n  locationId: '{{ locationId }}',\r\n  component: MyCustomComponent,\r\n{{ '}' }})</pre>\r\n            </div>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n    <ng-content></ng-content>\r\n</div>\r\n", styles: [":host{position:relative}.wrapper{height:100%}.extension-point-info-trigger{position:absolute;margin:0;padding:0;z-index:100}.extension-point-info-trigger clr-icon{color:var(--color-success-500)}.extension-info{padding:12px}pre{padding:6px;font-family:Source Code Pro,Lucida Console,Monaco,monospace;background-color:var(--color-grey-200)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: { locationId: "locationId", metadata: "metadata", topPx: "topPx", leftPx: "leftPx", display: "display", api: "api" }, host: { properties: { "style.display": "this.display" } }, viewQueries: [{ propertyName: "editorElementRef", first: true, predicate: ["editor"], descendants: true }, { propertyName: "dropdownComponent", first: true, predicate: ["dropdownComponent"], descendants: true }], ngImport: i0, template: "<div [class.highlight]=\"isDevMode && (display$ | async)\" class=\"wrapper\" [style.display]=\"display\">\r\n    <vdr-dropdown *ngIf=\"isDevMode && (display$ | async)\" #dropdownComponent>\r\n        <button class=\"extension-point-info-trigger\"\r\n                [style.top.px]=\"topPx ?? 0\"\r\n                [style.left.px]=\"leftPx ?? 0\"\r\n                vdrDropdownTrigger>\r\n            <clr-icon shape=\"plugin\" class=\"\" size=\"12\"></clr-icon>\r\n        </button>\r\n        <vdr-dropdown-menu>\r\n            <div #editor contenteditable=\"false\" class=\"highlighted\"></div>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n    <ng-content></ng-content>\r\n</div>\r\n", styles: [":host{position:relative}.wrapper{height:100%}button.extension-point-info-trigger{position:absolute;background-color:var(--color-accent-500);border-radius:50%;width:22px;height:22px;border:0;margin:0;padding:0;z-index:100;display:flex;align-items:center;justify-content:center;opacity:.8}button.extension-point-info-trigger:hover{opacity:1}button.extension-point-info-trigger clr-icon{color:#fff}.extension-info{padding:12px}pre{padding:6px;font-family:Source Code Pro,Lucida Console,Monaco,monospace;background-color:var(--color-grey-200)}::ng-deep .highlighted{margin:calc(var(--space-unit) * 2);padding:calc(var(--space-unit) * 2);border:1px solid var(--color-grey-300);border-radius:var(--border-radius);background-color:var(--color-component-bg-200);font-family:Source Code Pro,Lucida Console,Monaco,monospace;color:var(--color-json-editor-text)}::ng-deep .highlighted .ts-string{color:var(--color-accent-600)}::ng-deep .highlighted .ts-comment{color:var(--color-grey-500)}::ng-deep .highlighted .ts-keyword{color:var(--color-json-editor-key)}::ng-deep .highlighted .ts-default{color:var(--color-json-editor-text)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: UiExtensionPointComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-ui-extension-point', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class.highlight]=\"isDevMode && (display$ | async)\" class=\"wrapper\" [style.display]=\"display\">\r\n    <vdr-dropdown *ngIf=\"isDevMode && (display$ | async)\">\r\n        <button class=\"btn btn-icon btn-link extension-point-info-trigger\"\r\n                [style.top.px]=\"topPx ?? 0\"\r\n                [style.left.px]=\"leftPx ?? 0\"\r\n                vdrDropdownTrigger>\r\n            <clr-icon shape=\"plugin\" class=\"\" size=\"16\"></clr-icon>\r\n        </button>\r\n        <vdr-dropdown-menu>\r\n            <div class=\"extension-info\">\r\n                <pre *ngIf=\"api === 'actionBar'\">\r\naddActionBarItem({{ '{' }}\r\n  id: 'my-button',\r\n  label: 'My Action',\r\n  locationId: '{{ locationId }}',\r\n{{ '}' }})</pre>\r\n                <pre *ngIf=\"api === 'navMenu'\">\r\naddNavMenuItem({{ '{' }}\r\n  id: 'my-menu-item',\r\n  label: 'My Menu Item',\r\n  routerLink: ['/extensions/my-plugin'],\r\n  {{ '}' }},\r\n  '{{ locationId }}'\r\n)</pre>\r\n                <pre *ngIf=\"api === 'detailComponent'\">\r\nregisterCustomDetailComponent({{ '{' }}\r\n  locationId: '{{ locationId }}',\r\n  component: MyCustomComponent,\r\n{{ '}' }})</pre>\r\n            </div>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n    <ng-content></ng-content>\r\n</div>\r\n", styles: [":host{position:relative}.wrapper{height:100%}.extension-point-info-trigger{position:absolute;margin:0;padding:0;z-index:100}.extension-point-info-trigger clr-icon{color:var(--color-success-500)}.extension-info{padding:12px}pre{padding:6px;font-family:Source Code Pro,Lucida Console,Monaco,monospace;background-color:var(--color-grey-200)}\n"] }]
+            args: [{ selector: 'vdr-ui-extension-point', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class.highlight]=\"isDevMode && (display$ | async)\" class=\"wrapper\" [style.display]=\"display\">\r\n    <vdr-dropdown *ngIf=\"isDevMode && (display$ | async)\" #dropdownComponent>\r\n        <button class=\"extension-point-info-trigger\"\r\n                [style.top.px]=\"topPx ?? 0\"\r\n                [style.left.px]=\"leftPx ?? 0\"\r\n                vdrDropdownTrigger>\r\n            <clr-icon shape=\"plugin\" class=\"\" size=\"12\"></clr-icon>\r\n        </button>\r\n        <vdr-dropdown-menu>\r\n            <div #editor contenteditable=\"false\" class=\"highlighted\"></div>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n    <ng-content></ng-content>\r\n</div>\r\n", styles: [":host{position:relative}.wrapper{height:100%}button.extension-point-info-trigger{position:absolute;background-color:var(--color-accent-500);border-radius:50%;width:22px;height:22px;border:0;margin:0;padding:0;z-index:100;display:flex;align-items:center;justify-content:center;opacity:.8}button.extension-point-info-trigger:hover{opacity:1}button.extension-point-info-trigger clr-icon{color:#fff}.extension-info{padding:12px}pre{padding:6px;font-family:Source Code Pro,Lucida Console,Monaco,monospace;background-color:var(--color-grey-200)}::ng-deep .highlighted{margin:calc(var(--space-unit) * 2);padding:calc(var(--space-unit) * 2);border:1px solid var(--color-grey-300);border-radius:var(--border-radius);background-color:var(--color-component-bg-200);font-family:Source Code Pro,Lucida Console,Monaco,monospace;color:var(--color-json-editor-text)}::ng-deep .highlighted .ts-string{color:var(--color-accent-600)}::ng-deep .highlighted .ts-comment{color:var(--color-grey-500)}::ng-deep .highlighted .ts-keyword{color:var(--color-json-editor-key)}::ng-deep .highlighted .ts-default{color:var(--color-json-editor-text)}\n"] }]
         }], ctorParameters: function () { return [{ type: DataService }]; }, propDecorators: { locationId: [{
                 type: Input
+            }], metadata: [{
+                type: Input
             }], topPx: [{
                 type: Input
             }], leftPx: [{
@@ -9160,7 +9072,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
                 type: Input
             }], api: [{
                 type: Input
-            }] } });
+            }], editorElementRef: [{
+                type: ViewChild,
+                args: ['editor']
+            }], dropdownComponent: [{
+                type: ViewChild,
+                args: ['dropdownComponent']
+            }] } });
+function highlightTsCode(tsCode) {
+    tsCode = tsCode.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    return tsCode.replace(/\b(abstract|any|as|boolean|break|case|catch|class|const|continue|default|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|is|keyof|let|module|namespace|never|new|null|number|object|of|private|protected|public|readonly|require|return|set|static|string|super|switch|symbol|this|throw|true|try|type|typeof|undefined|var|void|while|with|yield)\b|\/\/.*|\/\*[\s\S]*?\*\/|"(?:\\[\s\S]|[^\\"])*"|'[^']*'/g, (match, ...args) => {
+        if (/^"/.test(match) || /^'/.test(match)) {
+            return '<span class="ts-string">' + match + '</span>';
+        }
+        else if (/\/\/.*|\/\*[\s\S]*?\*\//.test(match)) {
+            return '<span class="ts-comment">' + match + '</span>';
+        }
+        else if (/\b(abstract|any|as|boolean|break|case|catch|class|const|continue|default|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|is|keyof|let|module|namespace|never|new|null|number|object|of|private|protected|public|readonly|require|return|set|static|string|super|switch|symbol|this|throw|true|try|type|typeof|undefined|var|void|while|with|yield)\b/.test(match)) {
+            return '<span class="ts-keyword">' + match + '</span>';
+        }
+        else {
+            return '<span class="ts-default">' + match + '</span>';
+        }
+    });
+}
+const codeTemplates = {
+    actionBar: locationId => `
+import { addActionBarItem } from '@vendure/admin-ui/core';
+
+export default [
+  addActionBarItem({
+    id: 'my-button',
+    label: 'My Action',
+    locationId: '${locationId}',
+  });
+]`,
+    navMenu: locationId => `
+import { addNavMenuSection } from '@vendure/admin-ui/core';
+
+export default [
+  addNavMenuSection({
+      id: 'my-menu-item',
+      label: 'My Menu Item',
+      routerLink: ['/extensions/my-plugin'],
+    }
+    '${locationId}'
+  );
+]`,
+    detailComponent: locationId => `
+import { registerCustomDetailComponent } from '@vendure/admin-ui/core';
+
+export default [
+  registerCustomDetailComponent({
+    locationId: '${locationId}',
+    component: MyCustomComponent,
+  });
+]`,
+    dataTable: (locationId, metadata) => `
+import { registerDataTableComponent } from '@vendure/admin-ui/core';
+
+export default [
+  registerDataTableComponent({
+    tableId: '${locationId}',
+    columnId: '${metadata}',
+    component: MyCustomComponent,
+  });
+]`,
+};
 
 class MainNavComponent extends BaseNavComponent {
     constructor() {
@@ -9203,11 +9181,11 @@ class MainNavComponent extends BaseNavComponent {
         this.itemClick.emit(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: MainNavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", 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-inline-end: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-inline-end: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-inline-end: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$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.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.2.2", 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]=\"0\"\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-inline-end: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-inline-end: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-inline-end: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$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.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", "metadata", "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.2.2", 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-inline-end: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-inline-end: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-inline-end: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"] }]
+            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]=\"0\"\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-inline-end: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-inline-end: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-inline-end: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: [{
@@ -9376,11 +9354,11 @@ class ChannelSwitcherComponent {
         this.channelService.setActiveChannel(channelId).subscribe(() => this.filterControl.patchValue(''));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ChannelSwitcherComponent, deps: [{ token: DataService }, { token: ChannelService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ChannelSwitcherComponent, selector: "vdr-channel-switcher", ngImport: i0, template: "<ng-container>\r\n    <vdr-dropdown>\r\n        <button class=\"active-channel m-auto\" vdrDropdownTrigger>\r\n            <vdr-channel-badge [channelCode]=\"activeChannelCode$ | async\"></vdr-channel-badge>\r\n            <span class=\"channel-label\">{{\r\n                activeChannelCode$ | async | channelCodeToLabel | translate\r\n            }}</span>\r\n            <span class=\"trigger\"><clr-icon shape=\"ellipsis-vertical\"></clr-icon></span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <input\r\n                *ngIf=\"((channelCount$ | async) || 0) >= displayFilterThreshold\"\r\n                [formControl]=\"filterControl\"\r\n                type=\"text\"\r\n                class=\"ml2 mr2\"\r\n                [placeholder]=\"'common.filter' | translate\"\r\n            />\r\n            <button\r\n                *ngFor=\"let channel of channels$ | async\"\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"setActiveChannel(channel.id)\"\r\n            >\r\n                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                {{ channel.code | channelCodeToLabel | translate }}\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [":host{display:block;align-items:center;height:2.5rem}.active-channel{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);color:var(--color-left-nav-text);background-color:var(--color-channel-switcher-bg);border:none;cursor:pointer;width:100%;border-radius:var(--border-radius-lg);padding:var(--space-unit) calc(var(--space-unit) * 2);transition:background-color .1s,color .1s}.active-channel:hover{background-color:var(--color-channel-switcher-hover-bg);color:var(--color-left-nav-text-hover)}.active-channel clr-icon{color:var(--color-left-nav-text)}.channel-label{margin:0 3px;overflow:hidden;flex:1;white-space:nowrap;text-overflow:ellipsis}\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$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ChannelLabelPipe, name: "channelCodeToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ChannelSwitcherComponent, selector: "vdr-channel-switcher", ngImport: i0, template: "<ng-container>\r\n    <vdr-dropdown>\r\n        <button class=\"active-channel m-auto\" vdrDropdownTrigger>\r\n            <vdr-channel-badge [channelCode]=\"activeChannelCode$ | async\"></vdr-channel-badge>\r\n            <span class=\"channel-label\">{{\r\n                activeChannelCode$ | async | channelCodeToLabel | translate\r\n            }}</span>\r\n            <span class=\"trigger\"><clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon></span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <input\r\n                *ngIf=\"((channelCount$ | async) || 0) >= displayFilterThreshold\"\r\n                [formControl]=\"filterControl\"\r\n                type=\"text\"\r\n                class=\"ml2 mr2\"\r\n                [placeholder]=\"'common.filter' | translate\"\r\n            />\r\n            <button\r\n                *ngFor=\"let channel of channels$ | async\"\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"setActiveChannel(channel.id)\"\r\n            >\r\n                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                {{ channel.code | channelCodeToLabel | translate }}\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [":host{display:block;align-items:center;height:2.5rem}.active-channel{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);color:var(--color-left-nav-text);background-color:var(--color-channel-switcher-bg);border:none;cursor:pointer;width:100%;border-radius:var(--border-radius-lg);padding:var(--space-unit) calc(var(--space-unit) * 2);transition:background-color .1s,color .1s}.active-channel:hover{background-color:var(--color-channel-switcher-hover-bg);color:var(--color-left-nav-text-hover)}.active-channel clr-icon{color:var(--color-left-nav-text)}.channel-label{margin:0 3px;overflow:hidden;flex:1;white-space:nowrap;text-overflow:ellipsis}\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$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ChannelLabelPipe, name: "channelCodeToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ChannelSwitcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-channel-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\r\n    <vdr-dropdown>\r\n        <button class=\"active-channel m-auto\" vdrDropdownTrigger>\r\n            <vdr-channel-badge [channelCode]=\"activeChannelCode$ | async\"></vdr-channel-badge>\r\n            <span class=\"channel-label\">{{\r\n                activeChannelCode$ | async | channelCodeToLabel | translate\r\n            }}</span>\r\n            <span class=\"trigger\"><clr-icon shape=\"ellipsis-vertical\"></clr-icon></span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <input\r\n                *ngIf=\"((channelCount$ | async) || 0) >= displayFilterThreshold\"\r\n                [formControl]=\"filterControl\"\r\n                type=\"text\"\r\n                class=\"ml2 mr2\"\r\n                [placeholder]=\"'common.filter' | translate\"\r\n            />\r\n            <button\r\n                *ngFor=\"let channel of channels$ | async\"\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"setActiveChannel(channel.id)\"\r\n            >\r\n                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                {{ channel.code | channelCodeToLabel | translate }}\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [":host{display:block;align-items:center;height:2.5rem}.active-channel{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);color:var(--color-left-nav-text);background-color:var(--color-channel-switcher-bg);border:none;cursor:pointer;width:100%;border-radius:var(--border-radius-lg);padding:var(--space-unit) calc(var(--space-unit) * 2);transition:background-color .1s,color .1s}.active-channel:hover{background-color:var(--color-channel-switcher-hover-bg);color:var(--color-left-nav-text-hover)}.active-channel clr-icon{color:var(--color-left-nav-text)}.channel-label{margin:0 3px;overflow:hidden;flex:1;white-space:nowrap;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: 'vdr-channel-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\r\n    <vdr-dropdown>\r\n        <button class=\"active-channel m-auto\" vdrDropdownTrigger>\r\n            <vdr-channel-badge [channelCode]=\"activeChannelCode$ | async\"></vdr-channel-badge>\r\n            <span class=\"channel-label\">{{\r\n                activeChannelCode$ | async | channelCodeToLabel | translate\r\n            }}</span>\r\n            <span class=\"trigger\"><clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon></span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <input\r\n                *ngIf=\"((channelCount$ | async) || 0) >= displayFilterThreshold\"\r\n                [formControl]=\"filterControl\"\r\n                type=\"text\"\r\n                class=\"ml2 mr2\"\r\n                [placeholder]=\"'common.filter' | translate\"\r\n            />\r\n            <button\r\n                *ngFor=\"let channel of channels$ | async\"\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"setActiveChannel(channel.id)\"\r\n            >\r\n                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                {{ channel.code | channelCodeToLabel | translate }}\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [":host{display:block;align-items:center;height:2.5rem}.active-channel{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);color:var(--color-left-nav-text);background-color:var(--color-channel-switcher-bg);border:none;cursor:pointer;width:100%;border-radius:var(--border-radius-lg);padding:var(--space-unit) calc(var(--space-unit) * 2);transition:background-color .1s,color .1s}.active-channel:hover{background-color:var(--color-channel-switcher-hover-bg);color:var(--color-left-nav-text-hover)}.active-channel clr-icon{color:var(--color-left-nav-text)}.channel-label{margin:0 3px;overflow:hidden;flex:1;white-space:nowrap;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: function () { return [{ type: DataService }, { type: ChannelService }]; } });
 
 class AppShellComponent {
@@ -9392,8 +9370,10 @@ class AppShellComponent {
         this.modalService = modalService;
         this.localStorageService = localStorageService;
         this.breadcrumbService = breadcrumbService;
+        this.version = ADMIN_UI_VERSION;
         this.availableLanguages = [];
         this.hideVendureBranding = getAppConfig().hideVendureBranding;
+        this.devMode = isDevMode();
     }
     ngOnInit() {
         this.userName$ = this.dataService.client
@@ -9446,11 +9426,11 @@ class AppShellComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AppShellComponent, deps: [{ token: AuthService }, { token: DataService }, { token: i1$1.Router }, { token: I18nService }, { token: ModalService }, { token: LocalStorageService }, { token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AppShellComponent, selector: "vdr-app-shell", ngImport: i0, template: "<div class=\"app-container\" [dir]=\"direction$ | async\">\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-top.webp\" 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            <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-inline-end: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-inline-start: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-inline-end: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-inline-start:var(--surface-margin-left)}}.header-actions{align-items:center}.content-area{position:relative;margin-inline-end:auto;flex:1;display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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.2.2", type: AppShellComponent, selector: "vdr-app-shell", ngImport: i0, template: "<div class=\"app-container\" [dir]=\"direction$ | async\">\r\n    <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"\r\n                ><img src=\"assets/logo-top.webp\" class=\"logo\" style=\"max-width: 100px\"\r\n            /></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\">\r\n            <div *ngIf=\"devMode\" class=\"flex center mb-2\">\r\n                <vdr-dropdown>\r\n                    <button class=\"icon-button dev-mode-button\" vdrDropdownTrigger title=\"DEV MODE\">\r\n                        <clr-icon shape=\"code\" size=\"24\"></clr-icon> DEV MODE\r\n                    </button>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"px-2 py-1\">\r\n                            <div>Version: {{ version }}</div>\r\n                            <div>View UI extension points: <kbd>CTRL + U</kbd></div>\r\n                        </div>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </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\r\n                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                            fill=\"none\"\r\n                            viewBox=\"0 0 24 24\"\r\n                            stroke-width=\"1.5\"\r\n                            stroke=\"currentColor\"\r\n                            class=\"bars\"\r\n                        >\r\n                            <path\r\n                                stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\"\r\n                                d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\"\r\n                            />\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            <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-inline-end: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-inline-start: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-inline-end: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-inline-start:var(--surface-margin-left)}}.header-actions{align-items:center}.content-area{position:relative;margin-inline-end:auto;flex:1;display:block;width:100%}.dev-mode-button{opacity:.7;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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: 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.2.2", ngImport: i0, type: AppShellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-app-shell', template: "<div class=\"app-container\" [dir]=\"direction$ | async\">\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-top.webp\" 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            <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-inline-end: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-inline-start: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-inline-end: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-inline-start:var(--surface-margin-left)}}.header-actions{align-items:center}.content-area{position:relative;margin-inline-end:auto;flex:1;display:block;width:100%}\n"] }]
+            args: [{ selector: 'vdr-app-shell', template: "<div class=\"app-container\" [dir]=\"direction$ | async\">\r\n    <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"\r\n                ><img src=\"assets/logo-top.webp\" class=\"logo\" style=\"max-width: 100px\"\r\n            /></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\">\r\n            <div *ngIf=\"devMode\" class=\"flex center mb-2\">\r\n                <vdr-dropdown>\r\n                    <button class=\"icon-button dev-mode-button\" vdrDropdownTrigger title=\"DEV MODE\">\r\n                        <clr-icon shape=\"code\" size=\"24\"></clr-icon> DEV MODE\r\n                    </button>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"px-2 py-1\">\r\n                            <div>Version: {{ version }}</div>\r\n                            <div>View UI extension points: <kbd>CTRL + U</kbd></div>\r\n                        </div>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </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\r\n                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                            fill=\"none\"\r\n                            viewBox=\"0 0 24 24\"\r\n                            stroke-width=\"1.5\"\r\n                            stroke=\"currentColor\"\r\n                            class=\"bars\"\r\n                        >\r\n                            <path\r\n                                stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\"\r\n                                d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\"\r\n                            />\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            <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-inline-end: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-inline-start: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-inline-end: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-inline-start:var(--surface-margin-left)}}.header-actions{align-items:center}.content-area{position:relative;margin-inline-end:auto;flex:1;display:block;width:100%}.dev-mode-button{opacity:.7;font-size:12px}\n"] }]
         }], ctorParameters: function () { return [{ type: AuthService }, { type: DataService }, { type: i1$1.Router }, { type: I18nService }, { type: ModalService }, { type: LocalStorageService }, { type: BreadcrumbService }]; } });
 
 class NotificationComponent {
@@ -9530,7 +9510,7 @@ class SettingsNavComponent extends BaseNavComponent {
         this.settingsMenuConfig$ = this.navBuilderService.menuConfig$.pipe(map(sections => sections.filter(s => s.displayMode === 'settings')));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SettingsNavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: SettingsNavComponent, selector: "vdr-settings-nav", usesInheritance: true, ngImport: i0, template: "<nav>\r\n    <section class=\"settings-nav-content\">\r\n        <ng-container *ngFor=\"let section of settingsMenuConfig$ | async\">\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                <vdr-dropdown>\r\n                    <button class=\"setting-link\" vdrDropdownTrigger>\r\n                        <div>\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                            <clr-icon\r\n                                *ngIf=\"section.icon\"\r\n                                [attr.shape]=\"section.icon || 'block'\"\r\n                                size=\"20\"\r\n                            ></clr-icon>\r\n                            <label class=\"md:hidden\" [for]=\"section.id\">{{ section.label | translate }}</label>\r\n                        </div>\r\n                        <clr-icon class=\"md:hidden\" shape=\"caret right\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"top-right\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <div *ngIf=\"shouldDisplayLink(item)\" class=\"menu-link\">\r\n                                <a\r\n                                    vdrDropdownItem\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    routerLinkActive=\"active\"\r\n                                    (click)=\"item.onClick && item.onClick($event)\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon [attr.shape]=\"item.icon || 'block'\" size=\"20\"></clr-icon>\r\n                                    <div class=\"\">{{ item.label | translate }}</div>\r\n                                </a>\r\n                            </div>\r\n                        </ng-container>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </vdr-ui-extension-point>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n", styles: [".setting-link{width:100%;border:none;display:flex;justify-content:space-between;font-size:var(--font-size-xs);align-items:center;cursor:pointer;background-color:transparent;padding:var(--space-unit);color:var(--color-left-nav-text)}.setting-link:hover{color:var(--color-left-nav-text-hover)}.setting-link clr-icon{margin-inline-end:6px}.menu-link{position:relative}.menu-link vdr-status-badge{left:20px;top:3px}\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$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { 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: 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: SettingsNavComponent, selector: "vdr-settings-nav", usesInheritance: true, ngImport: i0, template: "<nav>\r\n    <section class=\"settings-nav-content\">\r\n        <ng-container *ngFor=\"let section of settingsMenuConfig$ | async\">\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                <vdr-dropdown>\r\n                    <button class=\"setting-link\" vdrDropdownTrigger>\r\n                        <div>\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                            <clr-icon\r\n                                *ngIf=\"section.icon\"\r\n                                [attr.shape]=\"section.icon || 'block'\"\r\n                                size=\"20\"\r\n                            ></clr-icon>\r\n                            <label class=\"md:hidden\" [for]=\"section.id\">{{ section.label | translate }}</label>\r\n                        </div>\r\n                        <clr-icon class=\"md:hidden\" shape=\"caret right\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"top-right\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <div *ngIf=\"shouldDisplayLink(item)\" class=\"menu-link\">\r\n                                <a\r\n                                    vdrDropdownItem\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    routerLinkActive=\"active\"\r\n                                    (click)=\"item.onClick && item.onClick($event)\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon [attr.shape]=\"item.icon || 'block'\" size=\"20\"></clr-icon>\r\n                                    <div class=\"\">{{ item.label | translate }}</div>\r\n                                </a>\r\n                            </div>\r\n                        </ng-container>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </vdr-ui-extension-point>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n", styles: [".setting-link{width:100%;border:none;display:flex;justify-content:space-between;font-size:var(--font-size-xs);align-items:center;cursor:pointer;background-color:transparent;padding:var(--space-unit);color:var(--color-left-nav-text)}.setting-link:hover{color:var(--color-left-nav-text-hover)}.setting-link clr-icon{margin-inline-end:6px}.menu-link{position:relative}.menu-link vdr-status-badge{left:20px;top:3px}\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$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { 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: StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }, { kind: "component", type: UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { 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.2.2", ngImport: i0, type: SettingsNavComponent, decorators: [{
             type: Component,
@@ -10585,11 +10565,11 @@ class ComponentRegistryService {
     constructor() {
         this.inputComponentMap = new Map();
     }
-    registerInputComponent(id, component) {
+    registerInputComponent(id, component, providers) {
         if (this.inputComponentMap.has(id)) {
             throw new Error(`Cannot register an InputComponent with the id "${id}", as one with that id already exists`);
         }
-        this.inputComponentMap.set(id, component);
+        this.inputComponentMap.set(id, { type: component, providers: providers || [] });
     }
     getInputComponent(id) {
         return this.inputComponentMap.get(id);
@@ -10604,6 +10584,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
                 }]
         }] });
 
+/**
+ * @description
+ * Registers a custom FormInputComponent which can be used to control the argument inputs
+ * of a {@link ConfigurableOperationDef} (e.g. CollectionFilter, ShippingMethod etc) or for
+ * a custom field.
+ *
+ * @example
+ * ```TypeScript
+ * \@NgModule({
+ *   imports: [SharedModule],
+ *   declarations: [MyCustomFieldControl],
+ *   providers: [
+ *       registerFormInputComponent('my-custom-input', MyCustomFieldControl),
+ *   ],
+ * })
+ * export class MyUiExtensionModule {}
+ * ```
+ *
+ * This input component can then be used in a custom field:
+ *
+ * @example
+ * ```TypeScript
+ * const config = {
+ *   // ...
+ *   customFields: {
+ *     ProductVariant: [
+ *       {
+ *         name: 'rrp',
+ *         type: 'int',
+ *         ui: { component: 'my-custom-input' },
+ *       },
+ *     ]
+ *   }
+ * }
+ * ```
+ *
+ * or with an argument of a {@link ConfigurableOperationDef}:
+ *
+ * @example
+ * ```TypeScript
+ * args: {
+ *   rrp: { type: 'int', ui: { component: 'my-custom-input' } },
+ * }
+ * ```
+ *
+ * @docsCategory custom-input-components
+ */
+function registerFormInputComponent(id, component) {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (registry) => () => {
+            registry.registerInputComponent(id, component);
+        },
+        deps: [ComponentRegistryService],
+    };
+}
+
 /**
  * Allows declarative binding to the "disabled" property of a reactive form
  * control.
@@ -11000,38 +11038,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
  * A host component which delegates to an instance or list of FormInputComponent components.
  */
 class DynamicFormInputComponent {
-    constructor(componentRegistryService, componentFactoryResolver, changeDetectorRef, injector) {
+    constructor(componentRegistryService, changeDetectorRef, injector) {
         this.componentRegistryService = componentRegistryService;
-        this.componentFactoryResolver = componentFactoryResolver;
         this.changeDetectorRef = changeDetectorRef;
         this.injector = injector;
         this.renderAsList = false;
         this.listItems = [];
         this.listId = 1;
         this.listFormArray = new FormArray([]);
+        this.componentProviders = [];
         this.renderList$ = new Subject();
         this.destroy$ = new Subject();
     }
     ngOnInit() {
         const componentId = this.getInputComponentConfig(this.def).component;
-        const componentType = this.componentRegistryService.getInputComponent(componentId);
-        if (componentType) {
-            this.componentType = componentType;
+        const component = this.componentRegistryService.getInputComponent(componentId);
+        if (component) {
+            this.componentType = component.type;
+            this.componentProviders = component.providers;
         }
         else {
             // eslint-disable-next-line no-console
             console.error(`No form input component registered with the id "${componentId}". Using the default input instead.`);
             const defaultComponentType = this.componentRegistryService.getInputComponent(this.getInputComponentConfig({ ...this.def, ui: undefined }).component);
             if (defaultComponentType) {
-                this.componentType = defaultComponentType;
+                this.componentType = defaultComponentType.type;
             }
         }
     }
     ngAfterViewInit() {
         if (this.componentType) {
-            const factory = this.componentFactoryResolver.resolveComponentFactory(this.componentType);
+            const injector = Injector.create({
+                providers: this.componentProviders,
+                parent: this.injector,
+            });
             // create a temp instance to check the value of `isListInput`
-            const cmpRef = factory.create(this.injector);
+            const cmpRef = this.singleViewContainer.createComponent(this.componentType, { injector });
             const isListInputComponent = cmpRef.instance.isListInput ?? false;
             cmpRef.destroy();
             if (this.def.list === false && isListInputComponent) {
@@ -11039,7 +11081,7 @@ class DynamicFormInputComponent {
             }
             this.renderAsList = this.def.list && !isListInputComponent;
             if (!this.renderAsList) {
-                this.singleComponentRef = this.renderInputComponent(factory, this.singleViewContainer, this.control);
+                this.singleComponentRef = this.renderInputComponent(injector, this.singleViewContainer, this.control);
             }
             else {
                 let formArraySub;
@@ -11054,7 +11096,7 @@ class DynamicFormInputComponent {
                             const listItem = this.listItems?.[i];
                             if (listItem) {
                                 this.listFormArray.push(listItem.control);
-                                listItem.componentRef = this.renderInputComponent(factory, ref, listItem.control);
+                                listItem.componentRef = this.renderInputComponent(injector, ref, listItem.control);
                             }
                         });
                         formArraySub = this.listFormArray.valueChanges
@@ -11138,8 +11180,8 @@ class DynamicFormInputComponent {
             this.renderList$.next();
         }
     }
-    renderInputComponent(factory, viewContainerRef, formControl) {
-        const componentRef = viewContainerRef.createComponent(factory);
+    renderInputComponent(injector, viewContainerRef, formControl) {
+        const componentRef = viewContainerRef.createComponent(this.componentType, { injector });
         const { instance } = componentRef;
         instance.config = simpleDeepClone(this.def);
         instance.formControl = formControl;
@@ -11217,7 +11259,7 @@ class DynamicFormInputComponent {
     hasUiConfig(def) {
         return typeof def === 'object' && typeof def?.ui?.component === 'string';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DynamicFormInputComponent, deps: [{ token: ComponentRegistryService }, { token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DynamicFormInputComponent, deps: [{ token: ComponentRegistryService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DynamicFormInputComponent, selector: "vdr-dynamic-form-input", inputs: { def: "def", readonly: "readonly", control: "control" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -11235,7 +11277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
                             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            [cdkDragLockAxis]=\"'y'\"\r\n        >\r\n            <div class=\"flex-spacer pr-2\">\r\n                <ng-container #listItem></ng-container>\r\n            </div>\r\n            <button\r\n                class=\"button-small\"\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=\"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{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: [{
+        }], ctorParameters: function () { return [{ type: ComponentRegistryService }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }]; }, propDecorators: { def: [{
                 type: Input
             }], readonly: [{
                 type: Input
@@ -11666,11 +11708,11 @@ class ChipComponent {
         this.iconClick = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", 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-inline-start: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$3.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.2.2", 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:center;gap:2px}.chip-icon{border-inline-start: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$3.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.2.2", 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;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-inline-start: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:center;gap:2px}.chip-icon{border-inline-start: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: [{
@@ -12178,11 +12220,11 @@ class FacetValueChipComponent {
         this.remove = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FacetValueChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: { facetValue: "facetValue", removable: "removable", displayFacetName: "displayFacetName" }, outputs: { remove: "remove" }, ngImport: i0, template: "<vdr-chip\r\n    [icon]=\"removable ? 'times' : undefined\"\r\n    [colorFrom]=\"facetValue.facet.name\"\r\n    (iconClick)=\"remove.emit()\"\r\n    [title]=\"facetValue.facet.name + ' - ' + facetValue.name\"\r\n>\r\n    <span *ngIf=\"displayFacetName\" class=\"facet-name\">{{ facetValue.facet.name }}</span>\r\n    <span>{{ facetValue.name }}</span>\r\n</vdr-chip>\r\n", styles: [":host{display:inline-block}.facet-name{color:var(--color-grey-100);text-transform:uppercase;font-size:10px;margin-inline-end:3px;height:11px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: { facetValue: "facetValue", removable: "removable", displayFacetName: "displayFacetName" }, outputs: { remove: "remove" }, ngImport: i0, template: "<vdr-chip\r\n    [icon]=\"removable ? 'times' : undefined\"\r\n    [colorFrom]=\"facetValue.facet.name\"\r\n    (iconClick)=\"remove.emit()\"\r\n    [title]=\"facetValue.facet.name + ' - ' + facetValue.name\"\r\n>\r\n    <span *ngIf=\"displayFacetName\" class=\"facet-name\">{{ facetValue.facet.name }}</span>\r\n    <span>{{ facetValue.name }}</span>\r\n</vdr-chip>\r\n", styles: [":host{display:inline-block}.facet-name{color:var(--color-grey-100);text-transform:uppercase;font-size:10px;margin-inline-end:3px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FacetValueChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-facet-value-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-chip\r\n    [icon]=\"removable ? 'times' : undefined\"\r\n    [colorFrom]=\"facetValue.facet.name\"\r\n    (iconClick)=\"remove.emit()\"\r\n    [title]=\"facetValue.facet.name + ' - ' + facetValue.name\"\r\n>\r\n    <span *ngIf=\"displayFacetName\" class=\"facet-name\">{{ facetValue.facet.name }}</span>\r\n    <span>{{ facetValue.name }}</span>\r\n</vdr-chip>\r\n", styles: [":host{display:inline-block}.facet-name{color:var(--color-grey-100);text-transform:uppercase;font-size:10px;margin-inline-end:3px;height:11px}\n"] }]
+            args: [{ selector: 'vdr-facet-value-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-chip\r\n    [icon]=\"removable ? 'times' : undefined\"\r\n    [colorFrom]=\"facetValue.facet.name\"\r\n    (iconClick)=\"remove.emit()\"\r\n    [title]=\"facetValue.facet.name + ' - ' + facetValue.name\"\r\n>\r\n    <span *ngIf=\"displayFacetName\" class=\"facet-name\">{{ facetValue.facet.name }}</span>\r\n    <span>{{ facetValue.name }}</span>\r\n</vdr-chip>\r\n", styles: [":host{display:inline-block}.facet-name{color:var(--color-grey-100);text-transform:uppercase;font-size:10px;margin-inline-end:3px}\n"] }]
         }], propDecorators: { facetValue: [{
                 type: Input
             }], removable: [{
@@ -13613,11 +13655,11 @@ class TabbedCustomFieldsComponent {
             .map(([tabName, customFields]) => ({ tabName, customFields }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: TabbedCustomFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: { entityName: "entityName", customFields: "customFields", customFieldsFormGroup: "customFieldsFormGroup", readonly: "readonly", compact: "compact", showLabel: "showLabel" }, ngImport: i0, template: "<ng-container *ngIf=\"1 < tabbedCustomFields.length; else singleGroup\">\r\n    <clr-tabs>\r\n        <clr-tab *ngFor=\"let group of tabbedCustomFields\">\r\n            <button clrTabLink>\r\n                {{\r\n                    group.tabName === defaultTabName\r\n                        ? ('common.general' | translate)\r\n                        : (group.tabName | translate)\r\n                }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive>\r\n                <div class=\"mt-2 form-grid\">\r\n                    <ng-container *ngFor=\"let customField of group.customFields\">\r\n                        <vdr-custom-field-control\r\n                            *ngIf=\"customFieldIsSet(customField.name)\"\r\n                            [entityName]=\"entityName\"\r\n                            [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                            [customField]=\"customField\"\r\n                            [readonly]=\"readonly\"\r\n                            [compact]=\"compact\"\r\n                            [showLabel]=\"showLabel\"\r\n                        ></vdr-custom-field-control>\r\n                    </ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n    </clr-tabs>\r\n</ng-container>\r\n<ng-template #singleGroup>\r\n    <div class=\"form-grid\">\r\n        <ng-container *ngFor=\"let customField of tabbedCustomFields[0]?.customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                [entityName]=\"entityName\"\r\n                [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                [customField]=\"customField\"\r\n                [readonly]=\"readonly\"\r\n                [compact]=\"compact\"\r\n                [showLabel]=\"showLabel\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }, { kind: "component", type: i1$3.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { kind: "component", type: i1$3.ClrTab, selector: "clr-tab" }, { kind: "component", type: i1$3.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { kind: "directive", type: i1$3.ClrTabLink, selector: "[clrTabLink]", inputs: ["id", "clrTabLinkInOverflow"] }, { kind: "directive", type: i1$3.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { kind: "directive", type: i1$3.ÇlrActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: { entityName: "entityName", customFields: "customFields", customFieldsFormGroup: "customFieldsFormGroup", readonly: "readonly", compact: "compact", showLabel: "showLabel" }, ngImport: i0, template: "<ng-container *ngIf=\"1 < tabbedCustomFields.length; else singleGroup\">\r\n    <clr-tabs>\r\n        <clr-tab *ngFor=\"let group of tabbedCustomFields\">\r\n            <button clrTabLink>\r\n                {{\r\n                    group.tabName === defaultTabName\r\n                        ? ('common.general' | translate)\r\n                        : (group.tabName | translate)\r\n                }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive>\r\n                <div class=\"mt-2 form-grid\">\r\n                    <ng-container *ngFor=\"let customField of group.customFields\">\r\n                        <vdr-custom-field-control\r\n                            *ngIf=\"customFieldIsSet(customField.name)\"\r\n                            [entityName]=\"entityName\"\r\n                            [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                            [customField]=\"customField\"\r\n                            [readonly]=\"readonly\"\r\n                            [compact]=\"compact\"\r\n                            [showLabel]=\"showLabel\"\r\n                        ></vdr-custom-field-control>\r\n                    </ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n    </clr-tabs>\r\n</ng-container>\r\n<ng-template #singleGroup>\r\n    <div class=\"form-grid\">\r\n        <ng-container *ngFor=\"let customField of tabbedCustomFields[0]?.customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                [entityName]=\"entityName\"\r\n                [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                [customField]=\"customField\"\r\n                [readonly]=\"readonly\"\r\n                [compact]=\"compact\"\r\n                [showLabel]=\"showLabel\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}::ng-deep clr-tabs .btn.btn-link{box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }, { kind: "component", type: i1$3.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { kind: "component", type: i1$3.ClrTab, selector: "clr-tab" }, { kind: "component", type: i1$3.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { kind: "directive", type: i1$3.ClrTabLink, selector: "[clrTabLink]", inputs: ["id", "clrTabLinkInOverflow"] }, { kind: "directive", type: i1$3.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { kind: "directive", type: i1$3.ÇlrActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: TabbedCustomFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-tabbed-custom-fields', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"1 < tabbedCustomFields.length; else singleGroup\">\r\n    <clr-tabs>\r\n        <clr-tab *ngFor=\"let group of tabbedCustomFields\">\r\n            <button clrTabLink>\r\n                {{\r\n                    group.tabName === defaultTabName\r\n                        ? ('common.general' | translate)\r\n                        : (group.tabName | translate)\r\n                }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive>\r\n                <div class=\"mt-2 form-grid\">\r\n                    <ng-container *ngFor=\"let customField of group.customFields\">\r\n                        <vdr-custom-field-control\r\n                            *ngIf=\"customFieldIsSet(customField.name)\"\r\n                            [entityName]=\"entityName\"\r\n                            [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                            [customField]=\"customField\"\r\n                            [readonly]=\"readonly\"\r\n                            [compact]=\"compact\"\r\n                            [showLabel]=\"showLabel\"\r\n                        ></vdr-custom-field-control>\r\n                    </ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n    </clr-tabs>\r\n</ng-container>\r\n<ng-template #singleGroup>\r\n    <div class=\"form-grid\">\r\n        <ng-container *ngFor=\"let customField of tabbedCustomFields[0]?.customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                [entityName]=\"entityName\"\r\n                [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                [customField]=\"customField\"\r\n                [readonly]=\"readonly\"\r\n                [compact]=\"compact\"\r\n                [showLabel]=\"showLabel\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}\n"] }]
+            args: [{ selector: 'vdr-tabbed-custom-fields', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"1 < tabbedCustomFields.length; else singleGroup\">\r\n    <clr-tabs>\r\n        <clr-tab *ngFor=\"let group of tabbedCustomFields\">\r\n            <button clrTabLink>\r\n                {{\r\n                    group.tabName === defaultTabName\r\n                        ? ('common.general' | translate)\r\n                        : (group.tabName | translate)\r\n                }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive>\r\n                <div class=\"mt-2 form-grid\">\r\n                    <ng-container *ngFor=\"let customField of group.customFields\">\r\n                        <vdr-custom-field-control\r\n                            *ngIf=\"customFieldIsSet(customField.name)\"\r\n                            [entityName]=\"entityName\"\r\n                            [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                            [customField]=\"customField\"\r\n                            [readonly]=\"readonly\"\r\n                            [compact]=\"compact\"\r\n                            [showLabel]=\"showLabel\"\r\n                        ></vdr-custom-field-control>\r\n                    </ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n    </clr-tabs>\r\n</ng-container>\r\n<ng-template #singleGroup>\r\n    <div class=\"form-grid\">\r\n        <ng-container *ngFor=\"let customField of tabbedCustomFields[0]?.customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                [entityName]=\"entityName\"\r\n                [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                [customField]=\"customField\"\r\n                [readonly]=\"readonly\"\r\n                [compact]=\"compact\"\r\n                [showLabel]=\"showLabel\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}::ng-deep clr-tabs .btn.btn-link{box-shadow:none}\n"] }]
         }], propDecorators: { entityName: [{
                 type: Input
             }], customFields: [{
@@ -13694,11 +13736,11 @@ class CardComponent {
         this.paddingX = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CardComponent, selector: "vdr-card", inputs: { title: "title", paddingX: "paddingX" }, queries: [{ propertyName: "controlsTemplate", first: true, predicate: CardControlsDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<div class=\"card-container\" [class.padding-x]=\"paddingX\">\r\n    <div *ngIf=\"title || controlsTemplate\" class=\"title-row\">\r\n        <span class=\"title\">{{ title }}</span>\r\n        <div class=\"controls\" *ngIf=\"controlsTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"controlsTemplate\"></ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"contents\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;--card-padding: calc(var(--space-unit) * 3);container-type:inline-size}.card-container{border:1px solid var(--color-card-border);background-color:var(--color-card-bg);border-radius:var(--border-radius);padding:var(--card-padding) 0;box-shadow:0 2px 4px #0000000d}@container (max-width: 400px){.card-container{--card-padding: calc(var(--space-unit) * 2)}}.card-container.padding-x{padding-inline-start:var(--card-padding);padding-inline-end:var(--card-padding)}.title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--card-padding)}.title{font-size:var(--font-size-base);padding:0 var(--card-padding)}.padding-x .title{padding:0}::ng-deep vdr-card+vdr-card{margin-top:calc(var(--space-unit) * 2)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CardComponent, selector: "vdr-card", inputs: { title: "title", paddingX: "paddingX" }, queries: [{ propertyName: "controlsTemplate", first: true, predicate: CardControlsDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<div class=\"card-container\" [class.padding-x]=\"paddingX\">\r\n    <div *ngIf=\"title || controlsTemplate\" class=\"title-row\">\r\n        <span class=\"title\">{{ title }}</span>\r\n        <div class=\"controls\" *ngIf=\"controlsTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"controlsTemplate\"></ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"contents\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [":host,.vdr-card{display:block;--card-padding: calc(var(--space-unit) * 3);container-type:inline-size}.card-container{border:1px solid var(--color-card-border);background-color:var(--color-card-bg);border-radius:var(--border-radius);padding:var(--card-padding) 0;box-shadow:0 2px 4px #0000000d}@container (max-width: 400px){.card-container{--card-padding: calc(var(--space-unit) * 2)}}.card-container.padding-x{padding-inline-start:var(--card-padding);padding-inline-end:var(--card-padding)}.title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--card-padding)}.title{font-size:var(--font-size-base);padding:0 var(--card-padding)}.padding-x .title{padding:0}::ng-deep vdr-card+vdr-card{margin-top:calc(var(--space-unit) * 2)}.vdr-card+.vdr-card{margin-top:calc(var(--space-unit) * 2)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card-container\" [class.padding-x]=\"paddingX\">\r\n    <div *ngIf=\"title || controlsTemplate\" class=\"title-row\">\r\n        <span class=\"title\">{{ title }}</span>\r\n        <div class=\"controls\" *ngIf=\"controlsTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"controlsTemplate\"></ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"contents\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;--card-padding: calc(var(--space-unit) * 3);container-type:inline-size}.card-container{border:1px solid var(--color-card-border);background-color:var(--color-card-bg);border-radius:var(--border-radius);padding:var(--card-padding) 0;box-shadow:0 2px 4px #0000000d}@container (max-width: 400px){.card-container{--card-padding: calc(var(--space-unit) * 2)}}.card-container.padding-x{padding-inline-start:var(--card-padding);padding-inline-end:var(--card-padding)}.title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--card-padding)}.title{font-size:var(--font-size-base);padding:0 var(--card-padding)}.padding-x .title{padding:0}::ng-deep vdr-card+vdr-card{margin-top:calc(var(--space-unit) * 2)}\n"] }]
+            args: [{ selector: 'vdr-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card-container\" [class.padding-x]=\"paddingX\">\r\n    <div *ngIf=\"title || controlsTemplate\" class=\"title-row\">\r\n        <span class=\"title\">{{ title }}</span>\r\n        <div class=\"controls\" *ngIf=\"controlsTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"controlsTemplate\"></ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"contents\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [":host,.vdr-card{display:block;--card-padding: calc(var(--space-unit) * 3);container-type:inline-size}.card-container{border:1px solid var(--color-card-border);background-color:var(--color-card-bg);border-radius:var(--border-radius);padding:var(--card-padding) 0;box-shadow:0 2px 4px #0000000d}@container (max-width: 400px){.card-container{--card-padding: calc(var(--space-unit) * 2)}}.card-container.padding-x{padding-inline-start:var(--card-padding);padding-inline-end:var(--card-padding)}.title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--card-padding)}.title{font-size:var(--font-size-base);padding:0 var(--card-padding)}.padding-x .title{padding:0}::ng-deep vdr-card+vdr-card{margin-top:calc(var(--space-unit) * 2)}.vdr-card+.vdr-card{margin-top:calc(var(--space-unit) * 2)}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], paddingX: [{
@@ -14097,11 +14139,11 @@ class AssetGalleryComponent {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssetGalleryComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", 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:start;list-style-type:none;margin-inline-start: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$3.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$1.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.2.2", 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            </ng-container>\r\n            <div *ngIf=\"selectionManager.selection.length === 1\">\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 *ngIf=\"selectionManager.selection.length === 1\">\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\" *ngIf=\"selectionManager.selection.length === 1\">\r\n                <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"card stack\" [class.visible]=\"selectionManager.selection.length > 1\"></div>\r\n    <div class=\"selection-count\" [class.visible]=\"selectionManager.selection.length > 1\">\r\n        {{ 'asset.assets-selected-count' | translate : { count: selectionManager.selection.length } }}\r\n        <ul>\r\n            <li *ngFor=\"let asset of selectionManager.selection\">{{ asset.name }}</li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex;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:start;list-style-type:none;margin-inline-start: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$3.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$1.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.2.2", 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;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:start;list-style-type:none;margin-inline-start: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            </ng-container>\r\n            <div *ngIf=\"selectionManager.selection.length === 1\">\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 *ngIf=\"selectionManager.selection.length === 1\">\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\" *ngIf=\"selectionManager.selection.length === 1\">\r\n                <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"card stack\" [class.visible]=\"selectionManager.selection.length > 1\"></div>\r\n    <div class=\"selection-count\" [class.visible]=\"selectionManager.selection.length > 1\">\r\n        {{ 'asset.assets-selected-count' | translate : { count: selectionManager.selection.length } }}\r\n        <ul>\r\n            <li *ngFor=\"let asset of selectionManager.selection\">{{ asset.name }}</li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex;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:start;list-style-type:none;margin-inline-start: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: [{
@@ -16183,7 +16225,7 @@ class RichTextEditorComponent {
             },
             ProsemirrorService,
             ContextMenuService,
-        ], viewQueries: [{ propertyName: "editorEl", first: true, predicate: ["editor"], descendants: true, static: true }], ngImport: i0, template: "<label *ngIf=\"label\" class=\"rich-text-label\">{{ label }}</label>\r\n<div #editor></div>\r\n<vdr-context-menu [editorMenuElement]=\"menuElement\"></vdr-context-menu>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .ProseMirror{position:relative}::ng-deep .ProseMirror{word-wrap:break-word;white-space:pre-wrap;font-variant-ligatures:none}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid var(--color-primary-500)}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{content:\"\";position:absolute;inset:-2px -2px -2px -32px;border:2px solid var(--color-primary-500);pointer-events:none}::ng-deep .ProseMirror-textblock-dropdown{min-width:3em}::ng-deep .ProseMirror-menu{margin:0 -4px;line-height:1}::ng-deep .ProseMirror-tooltip .ProseMirror-menu{width:-moz-fit-content;width:fit-content;white-space:pre}::ng-deep .ProseMirror-menuitem{margin-inline-end:3px;display:inline-block}::ng-deep .ProseMirror-menuseparator{border-inline-end:1px solid var(--color-component-border-200);margin:0 12px 0 8px;height:18px}::ng-deep .ProseMirror-menu-dropdown,::ng-deep .ProseMirror-menu-dropdown-menu{font-size:90%;white-space:nowrap;border-radius:var(--border-radius-input)}::ng-deep .ProseMirror-menu-dropdown{vertical-align:1px;cursor:pointer;position:relative;padding-inline-end:15px}::ng-deep .ProseMirror-menu-dropdown-wrap{padding:1px 3px 1px 6px;display:inline-block;position:relative}::ng-deep .ProseMirror-menu-dropdown:after{content:\"\";border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-top:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 2px)}::ng-deep .ProseMirror-menu-dropdown-menu,::ng-deep .ProseMirror-menu-submenu{position:absolute;background:var(--color-component-bg-100);border:1px solid var(--color-component-border-200);padding:2px}::ng-deep .ProseMirror-menu-dropdown-menu{z-index:15;min-width:6em;color:var(--color-text-200)}::ng-deep .ProseMirror-menu-dropdown-item{cursor:pointer;padding:2px 8px 2px 4px}::ng-deep .ProseMirror-menu-dropdown-item:hover{background:var(--color-component-bg-200)}::ng-deep .ProseMirror-menu-submenu-wrap{position:relative;margin-inline-end:4px}::ng-deep .ProseMirror-menu-submenu-label:after{content:\"\";border-top:4px solid transparent;border-bottom:4px solid transparent;border-inline-start:4px solid currentColor;opacity:.6;position:absolute;right:-8px;top:calc(50% - 4px)}::ng-deep .ProseMirror-menu-submenu{display:none;min-width:4em;left:100%;top:-3px}::ng-deep .ProseMirror-menu-active{background:var(--color-component-bg-100);border-radius:4px}::ng-deep .ProseMirror-menu-disabled{opacity:.3}::ng-deep .ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,::ng-deep .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu{display:block}::ng-deep .ProseMirror-menubar{border-top-left-radius:inherit;border-top-right-radius:inherit;position:relative;min-height:1em;color:var(--color-grey-600);padding:1px 6px;top:0;left:0;right:0;background:var(--color-component-bg-100);z-index:10;box-sizing:border-box;overflow:visible;align-items:center}::ng-deep .ProseMirror-icon{display:inline-block;line-height:.8;vertical-align:-2px;padding:2px 8px;cursor:pointer}::ng-deep .ProseMirror-menu-disabled.ProseMirror-icon{cursor:default}::ng-deep .ProseMirror-icon svg{fill:currentColor;height:1em}::ng-deep .ProseMirror-icon span{vertical-align:text-top}::ng-deep .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}::ng-deep .ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-inline-start:30px;list-style-position:initial}::ng-deep .ProseMirror blockquote{padding-inline-start:1em;border-inline-start:3px solid var(--color-grey-100);margin-inline-start:0;margin-inline-end:0}::ng-deep .ProseMirror-prompt{background:white;padding:5px 10px 5px 15px;border:1px solid silver;position:fixed;border-radius:3px;z-index:11;box-shadow:-.5px 2px 5px #0003}::ng-deep .ProseMirror-prompt h5{margin:0;font-weight:400;font-size:100%;color:var(--color-grey-500)}::ng-deep .ProseMirror-prompt input[type=text],::ng-deep .ProseMirror-prompt textarea{background:var(--color-component-bg-100);border:none;outline:none}::ng-deep .ProseMirror-prompt input[type=text]{padding:0 4px}::ng-deep .ProseMirror-prompt-close{position:absolute;left:2px;top:1px;color:var(--color-grey-400);border:none;background:transparent;padding:0}::ng-deep .ProseMirror-prompt-close:after{content:\"\\e2\\153\\2022\";font-size:12px}::ng-deep .ProseMirror-invalid{background:var(--color-warning-200);border:1px solid var(--color-warning-300);border-radius:4px;padding:5px 10px;position:absolute;min-width:10em}::ng-deep .ProseMirror-prompt-buttons{margin-top:5px;display:none}::ng-deep #editor,::ng-deep .editor{background:var(--color-form-input-bg);color:#000;background-clip:padding-box;border-radius:4px;border:2px solid rgba(0,0,0,.2);padding:5px 0;margin-bottom:23px}::ng-deep .ProseMirror p:first-child,::ng-deep .ProseMirror h1:first-child,::ng-deep .ProseMirror h2:first-child,::ng-deep .ProseMirror h3:first-child,::ng-deep .ProseMirror h4:first-child,::ng-deep .ProseMirror h5:first-child,::ng-deep .ProseMirror h6:first-child{margin-top:10px}::ng-deep .ProseMirror{padding:4px 8px 4px 14px;line-height:1.2;outline:none}::ng-deep .ProseMirror p{margin-bottom:.5rem;color:var(--color-text-100)!important}::ng-deep .ProseMirror .tableWrapper td,::ng-deep .ProseMirror .tableWrapper th{border:1px solid var(--color-grey-300);padding:3px 6px}::ng-deep .ProseMirror .tableWrapper td p,::ng-deep .ProseMirror .tableWrapper th p{margin-top:0}::ng-deep .ProseMirror .tableWrapper th,::ng-deep .ProseMirror .tableWrapper th p{font-weight:700}::ng-deep .ProseMirror table{border-collapse:collapse;table-layout:fixed;width:100%;overflow:hidden}::ng-deep .ProseMirror td,::ng-deep .ProseMirror th{vertical-align:top;box-sizing:border-box;position:relative}::ng-deep .ProseMirror .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;z-index:20;background-color:#adf;pointer-events:none}::ng-deep .ProseMirror.resize-cursor{cursor:ew-resize;cursor:col-resize}::ng-deep .ProseMirror .selectedCell:after{z-index:2;position:absolute;content:\"\";inset:0;background:rgba(175,218,243,.3333333333);pointer-events:none}::ng-deep .menu-separator{border-bottom:1px solid var(--color-grey-400);height:0;margin:6px 0;pointer-events:none}::ng-deep .menu-item-with-icon{display:flex;align-items:center}::ng-deep .menu-item-with-icon clr-icon,::ng-deep .menu-item-with-icon .custom-icon{margin-inline-end:4px;color:var(--color-text-200)}::ng-deep .menu-item-with-icon .hr-icon{width:13px;height:8px;border-bottom:2px solid var(--color-text-100);margin:-8px 5px 0 2px}::ng-deep .menu-item-with-icon .h-icon{width:16px;text-align:center;font-weight:700;font-size:12px}.context-menu{position:fixed}:host{display:block;margin-bottom:.5rem}:host.readonly ::ng-deep .ProseMirror-menubar{display:none}label.rich-text-label{font-size:var(--font-size-sm);color:var(--font-weight-700)}::ng-deep .ProseMirror-menubar{position:sticky;border:1px solid var(--color-component-border-200);border-bottom:none;background-color:var(--color-component-bg-200);color:var(--color-icon-button);border-radius:var(--border-radius-input) var(--border-radius-input) 0 0;padding:6px 12px;display:flex;flex-wrap:wrap}::ng-deep .vdr-prosemirror{background:var(--color-form-input-bg);color:var(--color-text-100);min-height:128px;max-height:600px;min-width:200px;border:1px solid var(--color-component-border-200);border-radius:0 0 var(--border-radius-input) var(--border-radius-input);transition:border-color .2s;overflow:auto;text-align:initial}::ng-deep .vdr-prosemirror:focus{border-color:var(--color-primary-500)!important;box-shadow:0 0 1px 1px var(--color-primary-100)}::ng-deep .vdr-prosemirror hr{padding:2px 10px;border:none;margin:1em 0}::ng-deep .vdr-prosemirror hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}::ng-deep .vdr-prosemirror img{cursor:default;max-width:100%}::ng-deep .vdr-prosemirror a:link,::ng-deep .vdr-prosemirror a:visited{color:var(--color-primary-700);text-decoration:none}::ng-deep .vdr-prosemirror .iframe-wrapper{width:100%;text-align:center;padding:6px;transition:background-color .3s}::ng-deep .vdr-prosemirror .iframe-wrapper:hover{background-color:var(--color-primary-100)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ContextMenuComponent, selector: "vdr-context-menu", inputs: ["editorMenuElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "editorEl", first: true, predicate: ["editor"], descendants: true, static: true }], ngImport: i0, template: "<label *ngIf=\"label\" class=\"rich-text-label\">{{ label }}</label>\r\n<div #editor></div>\r\n<vdr-context-menu [editorMenuElement]=\"menuElement\"></vdr-context-menu>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .ProseMirror{position:relative}::ng-deep .ProseMirror{word-wrap:break-word;white-space:pre-wrap;font-variant-ligatures:none}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid var(--color-primary-500)}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{content:\"\";position:absolute;inset:-2px -2px -2px -32px;border:2px solid var(--color-primary-500);pointer-events:none}::ng-deep .ProseMirror-textblock-dropdown{min-width:3em}::ng-deep .ProseMirror-menu{margin:0 -4px;line-height:1}::ng-deep .ProseMirror-tooltip .ProseMirror-menu{width:-moz-fit-content;width:fit-content;white-space:pre}::ng-deep .ProseMirror-menuitem{margin-inline-end:3px;display:inline-block}::ng-deep .ProseMirror-menuseparator{border-inline-end:1px solid var(--color-component-border-200);margin:0 12px 0 8px;height:18px}::ng-deep .ProseMirror-menu-dropdown,::ng-deep .ProseMirror-menu-dropdown-menu{font-size:90%;white-space:nowrap;border-radius:var(--border-radius-input)}::ng-deep .ProseMirror-menu-dropdown{vertical-align:1px;cursor:pointer;position:relative;padding-inline-end:15px}::ng-deep .ProseMirror-menu-dropdown-wrap{padding:1px 3px 1px 6px;display:inline-block;position:relative}::ng-deep .ProseMirror-menu-dropdown:after{content:\"\";border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-top:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 2px)}::ng-deep .ProseMirror-menu-dropdown-menu,::ng-deep .ProseMirror-menu-submenu{position:absolute;background:var(--color-component-bg-100);border:1px solid var(--color-component-border-200);padding:2px}::ng-deep .ProseMirror-menu-dropdown-menu{z-index:15;min-width:6em;color:var(--color-text-200)}::ng-deep .ProseMirror-menu-dropdown-item{cursor:pointer;padding:2px 8px 2px 4px}::ng-deep .ProseMirror-menu-dropdown-item:hover{background:var(--color-component-bg-200)}::ng-deep .ProseMirror-menu-submenu-wrap{position:relative;margin-inline-end:4px}::ng-deep .ProseMirror-menu-submenu-label:after{content:\"\";border-top:4px solid transparent;border-bottom:4px solid transparent;border-inline-start:4px solid currentColor;opacity:.6;position:absolute;right:-8px;top:calc(50% - 4px)}::ng-deep .ProseMirror-menu-submenu{display:none;min-width:4em;left:100%;top:-3px}::ng-deep .ProseMirror-menu-active{background:var(--color-component-bg-100);border-radius:4px}::ng-deep .ProseMirror-menu-disabled{opacity:.3}::ng-deep .ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,::ng-deep .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu{display:block}::ng-deep .ProseMirror-menubar{border-top-left-radius:inherit;border-top-right-radius:inherit;position:relative;min-height:1em;color:var(--color-grey-600);padding:1px 6px;top:0;left:0;right:0;background:var(--color-component-bg-100);z-index:10;box-sizing:border-box;overflow:visible;align-items:center}::ng-deep .ProseMirror-icon{display:inline-block;line-height:.8;vertical-align:-2px;padding:2px 8px;cursor:pointer}::ng-deep .ProseMirror-menu-disabled.ProseMirror-icon{cursor:default}::ng-deep .ProseMirror-icon svg{fill:currentColor;height:1em}::ng-deep .ProseMirror-icon span{vertical-align:text-top}::ng-deep .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}::ng-deep .ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-inline-start:30px;list-style-position:initial}::ng-deep .ProseMirror blockquote{padding-inline-start:1em;border-inline-start:3px solid var(--color-grey-100);margin-inline-start:0;margin-inline-end:0}::ng-deep .ProseMirror-prompt{background:white;padding:5px 10px 5px 15px;border:1px solid silver;position:fixed;border-radius:3px;z-index:11;box-shadow:-.5px 2px 5px #0003}::ng-deep .ProseMirror-prompt h5{margin:0;font-weight:400;font-size:100%;color:var(--color-grey-500)}::ng-deep .ProseMirror-prompt input[type=text],::ng-deep .ProseMirror-prompt textarea{background:var(--color-component-bg-100);border:none;outline:none}::ng-deep .ProseMirror-prompt input[type=text]{padding:0 4px}::ng-deep .ProseMirror-prompt-close{position:absolute;left:2px;top:1px;color:var(--color-grey-400);border:none;background:transparent;padding:0}::ng-deep .ProseMirror-prompt-close:after{content:\"\\e2\\153\\2022\";font-size:12px}::ng-deep .ProseMirror-invalid{background:var(--color-warning-200);border:1px solid var(--color-warning-300);border-radius:4px;padding:5px 10px;position:absolute;min-width:10em}::ng-deep .ProseMirror-prompt-buttons{margin-top:5px;display:none}::ng-deep #editor,::ng-deep .editor{background:var(--color-form-input-bg);color:#000;background-clip:padding-box;border-radius:4px;border:2px solid rgba(0,0,0,.2);padding:5px 0;margin-bottom:23px}::ng-deep .ProseMirror p:first-child,::ng-deep .ProseMirror h1:first-child,::ng-deep .ProseMirror h2:first-child,::ng-deep .ProseMirror h3:first-child,::ng-deep .ProseMirror h4:first-child,::ng-deep .ProseMirror h5:first-child,::ng-deep .ProseMirror h6:first-child{margin-top:10px}::ng-deep .ProseMirror{padding:4px 8px 4px 14px;line-height:1.2;outline:none}::ng-deep .ProseMirror p{margin-bottom:.5rem;color:var(--color-text-100)!important}::ng-deep .ProseMirror .tableWrapper td,::ng-deep .ProseMirror .tableWrapper th{border:1px solid var(--color-grey-300);padding:3px 6px}::ng-deep .ProseMirror .tableWrapper td p,::ng-deep .ProseMirror .tableWrapper th p{margin-top:0}::ng-deep .ProseMirror .tableWrapper th,::ng-deep .ProseMirror .tableWrapper th p{font-weight:700}::ng-deep .ProseMirror table{border-collapse:collapse;table-layout:fixed;width:100%;overflow:hidden}::ng-deep .ProseMirror td,::ng-deep .ProseMirror th{vertical-align:top;box-sizing:border-box;position:relative}::ng-deep .ProseMirror .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;z-index:20;background-color:#adf;pointer-events:none}::ng-deep .ProseMirror.resize-cursor{cursor:ew-resize;cursor:col-resize}::ng-deep .ProseMirror .selectedCell:after{z-index:2;position:absolute;content:\"\";inset:0;background:rgba(175,218,243,.3333333333);pointer-events:none}::ng-deep .menu-separator{border-bottom:1px solid var(--color-grey-400);height:0;margin:6px 0;pointer-events:none}::ng-deep .menu-item-with-icon{display:flex;align-items:center}::ng-deep .menu-item-with-icon clr-icon,::ng-deep .menu-item-with-icon .custom-icon{margin-inline-end:4px;color:var(--color-text-200)}::ng-deep .menu-item-with-icon .hr-icon{width:13px;height:8px;border-bottom:2px solid var(--color-text-100);margin:-8px 5px 0 2px}::ng-deep .menu-item-with-icon .h-icon{width:16px;text-align:center;font-weight:700;font-size:12px}.context-menu{position:fixed}:host{display:block;margin-bottom:.5rem}:host.readonly ::ng-deep .ProseMirror-menubar{display:none}label.rich-text-label{font-size:var(--font-size-sm);color:var(--font-weight-700)}::ng-deep .ProseMirror-menubar{position:sticky;border:1px solid var(--color-weight-200);border-bottom:none;background-color:var(--color-component-bg-200);color:var(--color-icon-button);border-radius:var(--border-radius-input) var(--border-radius-input) 0 0;padding:6px 12px;display:flex;flex-wrap:wrap}::ng-deep .vdr-prosemirror{background:var(--color-form-input-bg);color:var(--color-text-100);min-height:128px;max-height:600px;min-width:200px;border:1px solid var(--color-weight-200);border-radius:0 0 var(--border-radius-input) var(--border-radius-input);transition:border-color .2s;overflow:auto;text-align:initial}::ng-deep .vdr-prosemirror:focus{border-color:var(--color-primary-500)!important;box-shadow:0 0 1px 1px var(--color-primary-100)}::ng-deep .vdr-prosemirror hr{padding:2px 10px;border:none;margin:1em 0}::ng-deep .vdr-prosemirror hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}::ng-deep .vdr-prosemirror img{cursor:default;max-width:100%}::ng-deep .vdr-prosemirror a:link,::ng-deep .vdr-prosemirror a:visited{color:var(--color-primary-700);text-decoration:none}::ng-deep .vdr-prosemirror .iframe-wrapper{width:100%;text-align:center;padding:6px;transition:background-color .3s}::ng-deep .vdr-prosemirror .iframe-wrapper:hover{background-color:var(--color-primary-100)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ContextMenuComponent, selector: "vdr-context-menu", inputs: ["editorMenuElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RichTextEditorComponent, decorators: [{
             type: Component,
@@ -16195,7 +16237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
                         },
                         ProsemirrorService,
                         ContextMenuService,
-                    ], template: "<label *ngIf=\"label\" class=\"rich-text-label\">{{ label }}</label>\r\n<div #editor></div>\r\n<vdr-context-menu [editorMenuElement]=\"menuElement\"></vdr-context-menu>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .ProseMirror{position:relative}::ng-deep .ProseMirror{word-wrap:break-word;white-space:pre-wrap;font-variant-ligatures:none}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid var(--color-primary-500)}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{content:\"\";position:absolute;inset:-2px -2px -2px -32px;border:2px solid var(--color-primary-500);pointer-events:none}::ng-deep .ProseMirror-textblock-dropdown{min-width:3em}::ng-deep .ProseMirror-menu{margin:0 -4px;line-height:1}::ng-deep .ProseMirror-tooltip .ProseMirror-menu{width:-moz-fit-content;width:fit-content;white-space:pre}::ng-deep .ProseMirror-menuitem{margin-inline-end:3px;display:inline-block}::ng-deep .ProseMirror-menuseparator{border-inline-end:1px solid var(--color-component-border-200);margin:0 12px 0 8px;height:18px}::ng-deep .ProseMirror-menu-dropdown,::ng-deep .ProseMirror-menu-dropdown-menu{font-size:90%;white-space:nowrap;border-radius:var(--border-radius-input)}::ng-deep .ProseMirror-menu-dropdown{vertical-align:1px;cursor:pointer;position:relative;padding-inline-end:15px}::ng-deep .ProseMirror-menu-dropdown-wrap{padding:1px 3px 1px 6px;display:inline-block;position:relative}::ng-deep .ProseMirror-menu-dropdown:after{content:\"\";border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-top:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 2px)}::ng-deep .ProseMirror-menu-dropdown-menu,::ng-deep .ProseMirror-menu-submenu{position:absolute;background:var(--color-component-bg-100);border:1px solid var(--color-component-border-200);padding:2px}::ng-deep .ProseMirror-menu-dropdown-menu{z-index:15;min-width:6em;color:var(--color-text-200)}::ng-deep .ProseMirror-menu-dropdown-item{cursor:pointer;padding:2px 8px 2px 4px}::ng-deep .ProseMirror-menu-dropdown-item:hover{background:var(--color-component-bg-200)}::ng-deep .ProseMirror-menu-submenu-wrap{position:relative;margin-inline-end:4px}::ng-deep .ProseMirror-menu-submenu-label:after{content:\"\";border-top:4px solid transparent;border-bottom:4px solid transparent;border-inline-start:4px solid currentColor;opacity:.6;position:absolute;right:-8px;top:calc(50% - 4px)}::ng-deep .ProseMirror-menu-submenu{display:none;min-width:4em;left:100%;top:-3px}::ng-deep .ProseMirror-menu-active{background:var(--color-component-bg-100);border-radius:4px}::ng-deep .ProseMirror-menu-disabled{opacity:.3}::ng-deep .ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,::ng-deep .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu{display:block}::ng-deep .ProseMirror-menubar{border-top-left-radius:inherit;border-top-right-radius:inherit;position:relative;min-height:1em;color:var(--color-grey-600);padding:1px 6px;top:0;left:0;right:0;background:var(--color-component-bg-100);z-index:10;box-sizing:border-box;overflow:visible;align-items:center}::ng-deep .ProseMirror-icon{display:inline-block;line-height:.8;vertical-align:-2px;padding:2px 8px;cursor:pointer}::ng-deep .ProseMirror-menu-disabled.ProseMirror-icon{cursor:default}::ng-deep .ProseMirror-icon svg{fill:currentColor;height:1em}::ng-deep .ProseMirror-icon span{vertical-align:text-top}::ng-deep .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}::ng-deep .ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-inline-start:30px;list-style-position:initial}::ng-deep .ProseMirror blockquote{padding-inline-start:1em;border-inline-start:3px solid var(--color-grey-100);margin-inline-start:0;margin-inline-end:0}::ng-deep .ProseMirror-prompt{background:white;padding:5px 10px 5px 15px;border:1px solid silver;position:fixed;border-radius:3px;z-index:11;box-shadow:-.5px 2px 5px #0003}::ng-deep .ProseMirror-prompt h5{margin:0;font-weight:400;font-size:100%;color:var(--color-grey-500)}::ng-deep .ProseMirror-prompt input[type=text],::ng-deep .ProseMirror-prompt textarea{background:var(--color-component-bg-100);border:none;outline:none}::ng-deep .ProseMirror-prompt input[type=text]{padding:0 4px}::ng-deep .ProseMirror-prompt-close{position:absolute;left:2px;top:1px;color:var(--color-grey-400);border:none;background:transparent;padding:0}::ng-deep .ProseMirror-prompt-close:after{content:\"\\e2\\153\\2022\";font-size:12px}::ng-deep .ProseMirror-invalid{background:var(--color-warning-200);border:1px solid var(--color-warning-300);border-radius:4px;padding:5px 10px;position:absolute;min-width:10em}::ng-deep .ProseMirror-prompt-buttons{margin-top:5px;display:none}::ng-deep #editor,::ng-deep .editor{background:var(--color-form-input-bg);color:#000;background-clip:padding-box;border-radius:4px;border:2px solid rgba(0,0,0,.2);padding:5px 0;margin-bottom:23px}::ng-deep .ProseMirror p:first-child,::ng-deep .ProseMirror h1:first-child,::ng-deep .ProseMirror h2:first-child,::ng-deep .ProseMirror h3:first-child,::ng-deep .ProseMirror h4:first-child,::ng-deep .ProseMirror h5:first-child,::ng-deep .ProseMirror h6:first-child{margin-top:10px}::ng-deep .ProseMirror{padding:4px 8px 4px 14px;line-height:1.2;outline:none}::ng-deep .ProseMirror p{margin-bottom:.5rem;color:var(--color-text-100)!important}::ng-deep .ProseMirror .tableWrapper td,::ng-deep .ProseMirror .tableWrapper th{border:1px solid var(--color-grey-300);padding:3px 6px}::ng-deep .ProseMirror .tableWrapper td p,::ng-deep .ProseMirror .tableWrapper th p{margin-top:0}::ng-deep .ProseMirror .tableWrapper th,::ng-deep .ProseMirror .tableWrapper th p{font-weight:700}::ng-deep .ProseMirror table{border-collapse:collapse;table-layout:fixed;width:100%;overflow:hidden}::ng-deep .ProseMirror td,::ng-deep .ProseMirror th{vertical-align:top;box-sizing:border-box;position:relative}::ng-deep .ProseMirror .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;z-index:20;background-color:#adf;pointer-events:none}::ng-deep .ProseMirror.resize-cursor{cursor:ew-resize;cursor:col-resize}::ng-deep .ProseMirror .selectedCell:after{z-index:2;position:absolute;content:\"\";inset:0;background:rgba(175,218,243,.3333333333);pointer-events:none}::ng-deep .menu-separator{border-bottom:1px solid var(--color-grey-400);height:0;margin:6px 0;pointer-events:none}::ng-deep .menu-item-with-icon{display:flex;align-items:center}::ng-deep .menu-item-with-icon clr-icon,::ng-deep .menu-item-with-icon .custom-icon{margin-inline-end:4px;color:var(--color-text-200)}::ng-deep .menu-item-with-icon .hr-icon{width:13px;height:8px;border-bottom:2px solid var(--color-text-100);margin:-8px 5px 0 2px}::ng-deep .menu-item-with-icon .h-icon{width:16px;text-align:center;font-weight:700;font-size:12px}.context-menu{position:fixed}:host{display:block;margin-bottom:.5rem}:host.readonly ::ng-deep .ProseMirror-menubar{display:none}label.rich-text-label{font-size:var(--font-size-sm);color:var(--font-weight-700)}::ng-deep .ProseMirror-menubar{position:sticky;border:1px solid var(--color-component-border-200);border-bottom:none;background-color:var(--color-component-bg-200);color:var(--color-icon-button);border-radius:var(--border-radius-input) var(--border-radius-input) 0 0;padding:6px 12px;display:flex;flex-wrap:wrap}::ng-deep .vdr-prosemirror{background:var(--color-form-input-bg);color:var(--color-text-100);min-height:128px;max-height:600px;min-width:200px;border:1px solid var(--color-component-border-200);border-radius:0 0 var(--border-radius-input) var(--border-radius-input);transition:border-color .2s;overflow:auto;text-align:initial}::ng-deep .vdr-prosemirror:focus{border-color:var(--color-primary-500)!important;box-shadow:0 0 1px 1px var(--color-primary-100)}::ng-deep .vdr-prosemirror hr{padding:2px 10px;border:none;margin:1em 0}::ng-deep .vdr-prosemirror hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}::ng-deep .vdr-prosemirror img{cursor:default;max-width:100%}::ng-deep .vdr-prosemirror a:link,::ng-deep .vdr-prosemirror a:visited{color:var(--color-primary-700);text-decoration:none}::ng-deep .vdr-prosemirror .iframe-wrapper{width:100%;text-align:center;padding:6px;transition:background-color .3s}::ng-deep .vdr-prosemirror .iframe-wrapper:hover{background-color:var(--color-primary-100)}\n"] }]
+                    ], template: "<label *ngIf=\"label\" class=\"rich-text-label\">{{ label }}</label>\r\n<div #editor></div>\r\n<vdr-context-menu [editorMenuElement]=\"menuElement\"></vdr-context-menu>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .ProseMirror{position:relative}::ng-deep .ProseMirror{word-wrap:break-word;white-space:pre-wrap;font-variant-ligatures:none}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid var(--color-primary-500)}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{content:\"\";position:absolute;inset:-2px -2px -2px -32px;border:2px solid var(--color-primary-500);pointer-events:none}::ng-deep .ProseMirror-textblock-dropdown{min-width:3em}::ng-deep .ProseMirror-menu{margin:0 -4px;line-height:1}::ng-deep .ProseMirror-tooltip .ProseMirror-menu{width:-moz-fit-content;width:fit-content;white-space:pre}::ng-deep .ProseMirror-menuitem{margin-inline-end:3px;display:inline-block}::ng-deep .ProseMirror-menuseparator{border-inline-end:1px solid var(--color-component-border-200);margin:0 12px 0 8px;height:18px}::ng-deep .ProseMirror-menu-dropdown,::ng-deep .ProseMirror-menu-dropdown-menu{font-size:90%;white-space:nowrap;border-radius:var(--border-radius-input)}::ng-deep .ProseMirror-menu-dropdown{vertical-align:1px;cursor:pointer;position:relative;padding-inline-end:15px}::ng-deep .ProseMirror-menu-dropdown-wrap{padding:1px 3px 1px 6px;display:inline-block;position:relative}::ng-deep .ProseMirror-menu-dropdown:after{content:\"\";border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-top:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 2px)}::ng-deep .ProseMirror-menu-dropdown-menu,::ng-deep .ProseMirror-menu-submenu{position:absolute;background:var(--color-component-bg-100);border:1px solid var(--color-component-border-200);padding:2px}::ng-deep .ProseMirror-menu-dropdown-menu{z-index:15;min-width:6em;color:var(--color-text-200)}::ng-deep .ProseMirror-menu-dropdown-item{cursor:pointer;padding:2px 8px 2px 4px}::ng-deep .ProseMirror-menu-dropdown-item:hover{background:var(--color-component-bg-200)}::ng-deep .ProseMirror-menu-submenu-wrap{position:relative;margin-inline-end:4px}::ng-deep .ProseMirror-menu-submenu-label:after{content:\"\";border-top:4px solid transparent;border-bottom:4px solid transparent;border-inline-start:4px solid currentColor;opacity:.6;position:absolute;right:-8px;top:calc(50% - 4px)}::ng-deep .ProseMirror-menu-submenu{display:none;min-width:4em;left:100%;top:-3px}::ng-deep .ProseMirror-menu-active{background:var(--color-component-bg-100);border-radius:4px}::ng-deep .ProseMirror-menu-disabled{opacity:.3}::ng-deep .ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,::ng-deep .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu{display:block}::ng-deep .ProseMirror-menubar{border-top-left-radius:inherit;border-top-right-radius:inherit;position:relative;min-height:1em;color:var(--color-grey-600);padding:1px 6px;top:0;left:0;right:0;background:var(--color-component-bg-100);z-index:10;box-sizing:border-box;overflow:visible;align-items:center}::ng-deep .ProseMirror-icon{display:inline-block;line-height:.8;vertical-align:-2px;padding:2px 8px;cursor:pointer}::ng-deep .ProseMirror-menu-disabled.ProseMirror-icon{cursor:default}::ng-deep .ProseMirror-icon svg{fill:currentColor;height:1em}::ng-deep .ProseMirror-icon span{vertical-align:text-top}::ng-deep .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}::ng-deep .ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-inline-start:30px;list-style-position:initial}::ng-deep .ProseMirror blockquote{padding-inline-start:1em;border-inline-start:3px solid var(--color-grey-100);margin-inline-start:0;margin-inline-end:0}::ng-deep .ProseMirror-prompt{background:white;padding:5px 10px 5px 15px;border:1px solid silver;position:fixed;border-radius:3px;z-index:11;box-shadow:-.5px 2px 5px #0003}::ng-deep .ProseMirror-prompt h5{margin:0;font-weight:400;font-size:100%;color:var(--color-grey-500)}::ng-deep .ProseMirror-prompt input[type=text],::ng-deep .ProseMirror-prompt textarea{background:var(--color-component-bg-100);border:none;outline:none}::ng-deep .ProseMirror-prompt input[type=text]{padding:0 4px}::ng-deep .ProseMirror-prompt-close{position:absolute;left:2px;top:1px;color:var(--color-grey-400);border:none;background:transparent;padding:0}::ng-deep .ProseMirror-prompt-close:after{content:\"\\e2\\153\\2022\";font-size:12px}::ng-deep .ProseMirror-invalid{background:var(--color-warning-200);border:1px solid var(--color-warning-300);border-radius:4px;padding:5px 10px;position:absolute;min-width:10em}::ng-deep .ProseMirror-prompt-buttons{margin-top:5px;display:none}::ng-deep #editor,::ng-deep .editor{background:var(--color-form-input-bg);color:#000;background-clip:padding-box;border-radius:4px;border:2px solid rgba(0,0,0,.2);padding:5px 0;margin-bottom:23px}::ng-deep .ProseMirror p:first-child,::ng-deep .ProseMirror h1:first-child,::ng-deep .ProseMirror h2:first-child,::ng-deep .ProseMirror h3:first-child,::ng-deep .ProseMirror h4:first-child,::ng-deep .ProseMirror h5:first-child,::ng-deep .ProseMirror h6:first-child{margin-top:10px}::ng-deep .ProseMirror{padding:4px 8px 4px 14px;line-height:1.2;outline:none}::ng-deep .ProseMirror p{margin-bottom:.5rem;color:var(--color-text-100)!important}::ng-deep .ProseMirror .tableWrapper td,::ng-deep .ProseMirror .tableWrapper th{border:1px solid var(--color-grey-300);padding:3px 6px}::ng-deep .ProseMirror .tableWrapper td p,::ng-deep .ProseMirror .tableWrapper th p{margin-top:0}::ng-deep .ProseMirror .tableWrapper th,::ng-deep .ProseMirror .tableWrapper th p{font-weight:700}::ng-deep .ProseMirror table{border-collapse:collapse;table-layout:fixed;width:100%;overflow:hidden}::ng-deep .ProseMirror td,::ng-deep .ProseMirror th{vertical-align:top;box-sizing:border-box;position:relative}::ng-deep .ProseMirror .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;z-index:20;background-color:#adf;pointer-events:none}::ng-deep .ProseMirror.resize-cursor{cursor:ew-resize;cursor:col-resize}::ng-deep .ProseMirror .selectedCell:after{z-index:2;position:absolute;content:\"\";inset:0;background:rgba(175,218,243,.3333333333);pointer-events:none}::ng-deep .menu-separator{border-bottom:1px solid var(--color-grey-400);height:0;margin:6px 0;pointer-events:none}::ng-deep .menu-item-with-icon{display:flex;align-items:center}::ng-deep .menu-item-with-icon clr-icon,::ng-deep .menu-item-with-icon .custom-icon{margin-inline-end:4px;color:var(--color-text-200)}::ng-deep .menu-item-with-icon .hr-icon{width:13px;height:8px;border-bottom:2px solid var(--color-text-100);margin:-8px 5px 0 2px}::ng-deep .menu-item-with-icon .h-icon{width:16px;text-align:center;font-weight:700;font-size:12px}.context-menu{position:fixed}:host{display:block;margin-bottom:.5rem}:host.readonly ::ng-deep .ProseMirror-menubar{display:none}label.rich-text-label{font-size:var(--font-size-sm);color:var(--font-weight-700)}::ng-deep .ProseMirror-menubar{position:sticky;border:1px solid var(--color-weight-200);border-bottom:none;background-color:var(--color-component-bg-200);color:var(--color-icon-button);border-radius:var(--border-radius-input) var(--border-radius-input) 0 0;padding:6px 12px;display:flex;flex-wrap:wrap}::ng-deep .vdr-prosemirror{background:var(--color-form-input-bg);color:var(--color-text-100);min-height:128px;max-height:600px;min-width:200px;border:1px solid var(--color-weight-200);border-radius:0 0 var(--border-radius-input) var(--border-radius-input);transition:border-color .2s;overflow:auto;text-align:initial}::ng-deep .vdr-prosemirror:focus{border-color:var(--color-primary-500)!important;box-shadow:0 0 1px 1px var(--color-primary-100)}::ng-deep .vdr-prosemirror hr{padding:2px 10px;border:none;margin:1em 0}::ng-deep .vdr-prosemirror hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}::ng-deep .vdr-prosemirror img{cursor:default;max-width:100%}::ng-deep .vdr-prosemirror a:link,::ng-deep .vdr-prosemirror a:visited{color:var(--color-primary-700);text-decoration:none}::ng-deep .vdr-prosemirror .iframe-wrapper{width:100%;text-align:center;padding:6px;transition:background-color .3s}::ng-deep .vdr-prosemirror .iframe-wrapper:hover{background-color:var(--color-primary-100)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ProsemirrorService }, { type: i0.ViewContainerRef }, { type: ContextMenuService }]; }, propDecorators: { label: [{
                 type: Input
             }], readonly: [{
@@ -16319,63 +16361,6 @@ const defaultFormInputs = [
     ProductMultiSelectorFormInputComponent,
     CombinationModeFormInputComponent,
 ];
-/**
- * @description
- * Registers a custom FormInputComponent which can be used to control the argument inputs
- * of a {@link ConfigurableOperationDef} (e.g. CollectionFilter, ShippingMethod etc) or for
- * a custom field.
- *
- * @example
- * ```TypeScript
- * \@NgModule({
- *   imports: [SharedModule],
- *   declarations: [MyCustomFieldControl],
- *   providers: [
- *       registerFormInputComponent('my-custom-input', MyCustomFieldControl),
- *   ],
- * })
- * export class MyUiExtensionModule {}
- * ```
- *
- * This input component can then be used in a custom field:
- *
- * @example
- * ```TypeScript
- * const config = {
- *   // ...
- *   customFields: {
- *     ProductVariant: [
- *       {
- *         name: 'rrp',
- *         type: 'int',
- *         ui: { component: 'my-custom-input' },
- *       },
- *     ]
- *   }
- * }
- * ```
- *
- * or with an argument of a {@link ConfigurableOperationDef}:
- *
- * @example
- * ```TypeScript
- * args: {
- *   rrp: { type: 'int', ui: { component: 'my-custom-input' } },
- * }
- * ```
- *
- * @docsCategory custom-input-components
- */
-function registerFormInputComponent(id, component) {
-    return {
-        provide: APP_INITIALIZER,
-        multi: true,
-        useFactory: (registry) => () => {
-            registry.registerInputComponent(id, component);
-        },
-        deps: [ComponentRegistryService],
-    };
-}
 /**
  * Registers the default form input components.
  */
@@ -16506,11 +16491,11 @@ class ActionBarItemsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ActionBarItemsComponent, deps: [{ token: NavBuilderService }, { token: i1$1.ActivatedRoute }, { token: DataService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: { locationId: "locationId" }, host: { properties: { "attr.data-location-id": "this.locationId" } }, usesOnChanges: true, ngImport: i0, template: "<vdr-ui-extension-point [locationId]=\"locationId\" api=\"actionBar\">\r\n    <ng-container *ngFor=\"let item of items$ | async\">\r\n        <button\r\n            *vdrIfPermissions=\"item.requiresPermission\"\r\n            [routerLink]=\"getRouterLink(item)\"\r\n            [disabled]=\"item.disabled ? (item.disabled | async) : false\"\r\n            (click)=\"handleClick($event, item)\"\r\n            [ngClass]=\"getButtonStyles(item)\"\r\n            class=\"mr-2\"\r\n        >\r\n            <clr-icon *ngIf=\"item.icon\" [attr.shape]=\"item.icon\"></clr-icon>\r\n            {{ item.label | translate }}\r\n        </button>\r\n    </ng-container>\r\n</vdr-ui-extension-point>\r\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { 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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: { locationId: "locationId" }, host: { properties: { "attr.data-location-id": "this.locationId" } }, usesOnChanges: true, ngImport: i0, template: "<vdr-ui-extension-point [locationId]=\"locationId\" api=\"actionBar\" [leftPx]=\"-24\">\r\n    <ng-container *ngFor=\"let item of items$ | async\">\r\n        <button\r\n            *vdrIfPermissions=\"item.requiresPermission\"\r\n            [routerLink]=\"getRouterLink(item)\"\r\n            [disabled]=\"item.disabled ? (item.disabled | async) : false\"\r\n            (click)=\"handleClick($event, item)\"\r\n            [ngClass]=\"getButtonStyles(item)\"\r\n            class=\"mr-2\"\r\n        >\r\n            <clr-icon *ngIf=\"item.icon\" [attr.shape]=\"item.icon\"></clr-icon>\r\n            {{ item.label | translate }}\r\n        </button>\r\n    </ng-container>\r\n</vdr-ui-extension-point>\r\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { 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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { 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.2.2", ngImport: i0, type: ActionBarItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-action-bar-items', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-ui-extension-point [locationId]=\"locationId\" api=\"actionBar\">\r\n    <ng-container *ngFor=\"let item of items$ | async\">\r\n        <button\r\n            *vdrIfPermissions=\"item.requiresPermission\"\r\n            [routerLink]=\"getRouterLink(item)\"\r\n            [disabled]=\"item.disabled ? (item.disabled | async) : false\"\r\n            (click)=\"handleClick($event, item)\"\r\n            [ngClass]=\"getButtonStyles(item)\"\r\n            class=\"mr-2\"\r\n        >\r\n            <clr-icon *ngIf=\"item.icon\" [attr.shape]=\"item.icon\"></clr-icon>\r\n            {{ item.label | translate }}\r\n        </button>\r\n    </ng-container>\r\n</vdr-ui-extension-point>\r\n", styles: [":host{display:inline-block}\n"] }]
+            args: [{ selector: 'vdr-action-bar-items', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-ui-extension-point [locationId]=\"locationId\" api=\"actionBar\" [leftPx]=\"-24\">\r\n    <ng-container *ngFor=\"let item of items$ | async\">\r\n        <button\r\n            *vdrIfPermissions=\"item.requiresPermission\"\r\n            [routerLink]=\"getRouterLink(item)\"\r\n            [disabled]=\"item.disabled ? (item.disabled | async) : false\"\r\n            (click)=\"handleClick($event, item)\"\r\n            [ngClass]=\"getButtonStyles(item)\"\r\n            class=\"mr-2\"\r\n        >\r\n            <clr-icon *ngIf=\"item.icon\" [attr.shape]=\"item.icon\"></clr-icon>\r\n            {{ item.label | translate }}\r\n        </button>\r\n    </ng-container>\r\n</vdr-ui-extension-point>\r\n", styles: [":host{display:inline-block}\n"] }]
         }], ctorParameters: function () { return [{ type: NavBuilderService }, { type: i1$1.ActivatedRoute }, { type: DataService }, { type: NotificationService }]; }, propDecorators: { locationId: [{
                 type: HostBinding,
                 args: ['attr.data-location-id']
@@ -16939,23 +16924,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
                 type: Input
             }] } });
 
-/**
- * @description
- * Registers a {@link CustomDetailComponent} to be placed in a given location. This allows you
- * to embed any type of custom Angular component in the entity detail pages of the Admin UI.
- *
- * @docsCategory custom-detail-components
- */
-function registerCustomDetailComponent(config) {
-    return {
-        provide: APP_INITIALIZER,
-        multi: true,
-        useFactory: (customDetailComponentService) => () => {
-            customDetailComponentService.registerCustomDetailComponent(config);
-        },
-        deps: [CustomDetailComponentService],
-    };
-}
 class CustomDetailComponentService {
     constructor() {
         this.customDetailComponents = new Map();
@@ -16982,17 +16950,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
         }] });
 
 class CustomDetailComponentHostComponent {
-    constructor(viewContainerRef, componentFactoryResolver, customDetailComponentService) {
+    constructor(viewContainerRef, customDetailComponentService, injector) {
         this.viewContainerRef = viewContainerRef;
-        this.componentFactoryResolver = componentFactoryResolver;
         this.customDetailComponentService = customDetailComponentService;
+        this.injector = injector;
         this.componentRefs = [];
     }
     ngOnInit() {
         const customComponents = this.customDetailComponentService.getCustomDetailComponentsFor(this.locationId);
         for (const config of customComponents) {
-            const factory = this.componentFactoryResolver.resolveComponentFactory(config.component);
-            const componentRef = this.viewContainerRef.createComponent(factory);
+            const componentRef = this.viewContainerRef.createComponent(config.component, {
+                injector: Injector.create({
+                    parent: this.injector,
+                    providers: config.providers ?? [],
+                }),
+            });
             componentRef.instance.entity$ = this.entity$;
             componentRef.instance.detailForm = this.detailForm;
             this.componentRefs.push(componentRef);
@@ -17003,13 +16975,13 @@ class CustomDetailComponentHostComponent {
             ref.destroy();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CustomDetailComponentHostComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: CustomDetailComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: { locationId: "locationId", entity$: "entity$", detailForm: "detailForm" }, ngImport: i0, template: "<vdr-ui-extension-point [locationId]=\"locationId\" api=\"detailComponent\"></vdr-ui-extension-point>\r\n", styles: [""], dependencies: [{ kind: "component", type: UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "topPx", "leftPx", "display", "api"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CustomDetailComponentHostComponent, deps: [{ token: i0.ViewContainerRef }, { token: CustomDetailComponentService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: { locationId: "locationId", entity$: "entity$", detailForm: "detailForm" }, ngImport: i0, template: "<vdr-ui-extension-point [locationId]=\"locationId\" api=\"detailComponent\"></vdr-ui-extension-point>\r\n", styles: [""], dependencies: [{ kind: "component", type: UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CustomDetailComponentHostComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-custom-detail-component-host', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-ui-extension-point [locationId]=\"locationId\" api=\"detailComponent\"></vdr-ui-extension-point>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: CustomDetailComponentService }]; }, propDecorators: { locationId: [{
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: CustomDetailComponentService }, { type: i0.Injector }]; }, propDecorators: { locationId: [{
                 type: Input
             }], entity$: [{
                 type: Input
@@ -17043,9 +17015,6 @@ class DataTable2ColumnComponent {
     }
     #visible;
     #onColumnChangeFns;
-    get id() {
-        return this.heading.toLowerCase().replace(/ /g, '-');
-    }
     get visible() {
         return this.#visible;
     }
@@ -17063,7 +17032,7 @@ class DataTable2ColumnComponent {
         this.#onColumnChangeFns.push(callback);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTable2ColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: { expand: "expand", heading: "heading", align: "align", sort: "sort", optional: "optional", hiddenByDefault: "hiddenByDefault", orderable: "orderable" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["row"], ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: { id: "id", expand: "expand", heading: "heading", align: "align", sort: "sort", optional: "optional", hiddenByDefault: "hiddenByDefault", orderable: "orderable" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["row"], ngImport: i0, template: ``, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTable2ColumnComponent, decorators: [{
             type: Component,
@@ -17072,7 +17041,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
                     template: ``,
                     exportAs: 'row',
                 }]
-        }], propDecorators: { expand: [{
+        }], propDecorators: { id: [{
+                type: Input
+            }], expand: [{
                 type: Input
             }], heading: [{
                 type: Input
@@ -17099,9 +17070,6 @@ class DataTableCustomFieldColumnComponent extends DataTable2ColumnComponent {
             .uiState()
             .stream$.pipe(map(({ uiState }) => uiState.language));
     }
-    get id() {
-        return this.customField.name.toLowerCase().replace(/ /g, '-');
-    }
     ngOnInit() {
         this.uiLanguage$.subscribe(uiLanguage => {
             this.heading =
@@ -17112,6 +17080,7 @@ class DataTableCustomFieldColumnComponent extends DataTable2ColumnComponent {
         });
         this.hiddenByDefault = true;
         this.sort = this.sorts?.get(this.customField.name);
+        this.id = this.customField.name;
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableCustomFieldColumnComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -17219,6 +17188,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: LocalStorageService }]; } });
 
+class DataTableCustomComponentService {
+    constructor() {
+        this.configMap = new Map();
+    }
+    registerCustomComponent(config) {
+        const id = this.compoundId(config.tableId, config.columnId);
+        this.configMap.set(id, config);
+    }
+    getCustomComponentsFor(tableId, columnId) {
+        return this.configMap.get(this.compoundId(tableId, columnId));
+    }
+    compoundId(tableId, columnId) {
+        return `${tableId}.${columnId}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableCustomComponentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableCustomComponentService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableCustomComponentService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class EmptyPlaceholderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: EmptyPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: { emptyStateLabel: "emptyStateLabel" }, ngImport: i0, template: "<div class=\"empty-state\">\r\n    <clr-icon shape=\"bubble-exclamation\" size=\"64\"></clr-icon>\r\n    <div class=\"empty-label\">\r\n        <ng-container *ngIf=\"emptyStateLabel; else defaultEmptyLabel\">{{ emptyStateLabel }}</ng-container>\r\n        <ng-template #defaultEmptyLabel>{{ 'common.no-results' | translate }}</ng-template>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.empty-state{text-align:center;padding:60px;color:var(--color-grey-400);width:100%}.empty-state .empty-label{margin-top:12px;font-size:22px}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -17277,11 +17270,11 @@ class DataTableFilterLabelComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableFilterLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTableFilterLabelComponent, selector: "vdr-data-table-filter-label", inputs: { filterWithValue: "filterWithValue" }, ngImport: i0, template: "<span><vdr-localized-text [text]=\"filterWithValue.filter.label\" />:</span>\n<div>\n    <ng-container *ngIf=\"filterWithValue.isSelect()\">\n        {{ filterWithValue.value?.join(', ') }}\n    </ng-container>\n    <ng-container *ngIf=\"filterWithValue.isId()\">\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\">{{ 'common.operator-eq' | translate }}</span>\n        <span *ngIf=\"filterWithValue.value?.operator === 'notEq'\">{{\n            'common.operator-not-eq' | translate\n        }}</span>\n        <span> \"{{ filterWithValue.value?.term }}\"</span>\n    </ng-container>\n    <ng-container *ngIf=\"filterWithValue.isText()\">\n        <span *ngIf=\"filterWithValue.value?.operator === 'contains'\">{{\n            'common.operator-contains' | translate\n        }}</span>\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\">{{ 'common.operator-eq' | translate }}</span>\n        <span *ngIf=\"filterWithValue.value?.operator === 'notContains'\">{{\n            'common.operator-notContains' | translate\n        }}</span>\n        <span *ngIf=\"filterWithValue.value?.operator === 'notEq'\">{{\n            'common.operator-not-eq' | translate\n        }}</span>\n        <span *ngIf=\"filterWithValue.value?.operator === 'regex'\">{{\n            'common.operator-regex' | translate\n        }}</span>\n        <span> \"{{ filterWithValue.value?.term }}\"</span>\n    </ng-container>\n    <ng-container *ngIf=\"filterWithValue.isBoolean()\">\n        <span *ngIf=\"filterWithValue?.value\">{{ 'common.boolean-true' | translate }}</span>\n        <span *ngIf=\"!filterWithValue?.value\">{{ 'common.boolean-false' | translate }}</span>\n    </ng-container>\n    <ng-container *ngIf=\"filterWithValue.isDateRange()\">\n        <ng-container *ngIf=\"filterWithValue.value.mode === 'relative'\">\n            <span *ngIf=\"filterWithValue.value.relativeUnit === 'day'\">\n                {{ 'datetime.relative-past-days' | translate: { count: filterWithValue.value.relativeValue } }}\n            </span>\n            <span *ngIf=\"filterWithValue.value.relativeUnit === 'month'\">\n                {{ 'datetime.relative-past-months' | translate: { count: filterWithValue.value.relativeValue } }}\n            </span>\n            <span *ngIf=\"filterWithValue.value.relativeUnit === 'year'\">\n                {{ 'datetime.relative-past-years' | translate: { count: filterWithValue.value.relativeValue } }}\n            </span>\n        </ng-container>\n        <ng-container *ngIf=\"filterWithValue.value.mode === 'range'\">\n            <span *ngIf=\"filterWithValue.value?.start && filterWithValue.value?.end\">\n                {{ filterWithValue.value?.start | localeDate : 'shortDate' }} -\n                {{ filterWithValue.value?.end | localeDate : 'shortDate' }}\n            </span>\n            <span *ngIf=\"filterWithValue.value?.start && !filterWithValue.value?.end\">\n                > {{ filterWithValue.value?.start | localeDate : 'shortDate' }}\n            </span>\n            <span *ngIf=\"filterWithValue.value?.end && !filterWithValue.value?.start\">\n                < {{ filterWithValue.value?.end | localeDate : 'shortDate' }}\n            </span>\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"filterWithValue.isNumber()\">\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\"> = </span>\n        <span *ngIf=\"filterWithValue.value?.operator === 'gt'\"> > </span>\n        <span *ngIf=\"filterWithValue.value?.operator === 'lt'\"> < </span>\n        <span *ngIf=\"$any(filterWithValue.filter.type).inputType === 'currency'\">{{\n            +filterWithValue.value?.amount | localeCurrency\n        }}</span>\n        <span *ngIf=\"$any(filterWithValue.filter.type).inputType !== 'currency'\">{{\n            +filterWithValue.value?.amount\n        }}</span>\n    </ng-container>\n    <ng-container *ngIf=\"filterWithValue.isCustom()\">\n        <span>{{ customFilterLabel$ | async }}</span>\n    </ng-container>\n</div>\n", styles: [":host{display:flex;gap:calc(var(--space-unit) / 2)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LocalizedTextComponent, selector: "vdr-localized-text", inputs: ["text"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTableFilterLabelComponent, selector: "vdr-data-table-filter-label", inputs: { filterWithValue: "filterWithValue" }, ngImport: i0, template: "<span><vdr-localized-text [text]=\"filterWithValue.filter.label\" />:</span>\r\n<div>\r\n    <ng-container *ngIf=\"filterWithValue.isSelect()\">\r\n        {{ filterWithValue.value?.join(', ') }}\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isId()\">\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\">{{ 'common.operator-eq' | translate }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'notEq'\">{{\r\n            'common.operator-not-eq' | translate\r\n        }}</span>\r\n        <span> \"{{ filterWithValue.value?.term }}\"</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isText()\">\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'contains'\">{{\r\n            'common.operator-contains' | translate\r\n        }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\">{{ 'common.operator-eq' | translate }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'notContains'\">{{\r\n            'common.operator-notContains' | translate\r\n        }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'notEq'\">{{\r\n            'common.operator-not-eq' | translate\r\n        }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'regex'\">{{\r\n            'common.operator-regex' | translate\r\n        }}</span>\r\n        <span> \"{{ filterWithValue.value?.term }}\"</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isBoolean()\">\r\n        <span *ngIf=\"filterWithValue?.value\">{{ 'common.boolean-true' | translate }}</span>\r\n        <span *ngIf=\"!filterWithValue?.value\">{{ 'common.boolean-false' | translate }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isDateRange()\">\r\n        <ng-container *ngIf=\"filterWithValue.value.mode === 'relative'\">\r\n            <span *ngIf=\"filterWithValue.value.relativeUnit === 'day'\">\r\n                {{ 'datetime.relative-past-days' | translate: { count: filterWithValue.value.relativeValue } }}\r\n            </span>\r\n            <span *ngIf=\"filterWithValue.value.relativeUnit === 'month'\">\r\n                {{ 'datetime.relative-past-months' | translate: { count: filterWithValue.value.relativeValue } }}\r\n            </span>\r\n            <span *ngIf=\"filterWithValue.value.relativeUnit === 'year'\">\r\n                {{ 'datetime.relative-past-years' | translate: { count: filterWithValue.value.relativeValue } }}\r\n            </span>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"filterWithValue.value.mode === 'range'\">\r\n            <span *ngIf=\"filterWithValue.value?.start && filterWithValue.value?.end\">\r\n                {{ filterWithValue.value?.start | localeDate : 'shortDate' }} -\r\n                {{ filterWithValue.value?.end | localeDate : 'shortDate' }}\r\n            </span>\r\n            <span *ngIf=\"filterWithValue.value?.start && !filterWithValue.value?.end\">\r\n                > {{ filterWithValue.value?.start | localeDate : 'shortDate' }}\r\n            </span>\r\n            <span *ngIf=\"filterWithValue.value?.end && !filterWithValue.value?.start\">\r\n                < {{ filterWithValue.value?.end | localeDate : 'shortDate' }}\r\n            </span>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isNumber()\">\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\"> = </span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'gt'\"> > </span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'lt'\"> < </span>\r\n        <span *ngIf=\"$any(filterWithValue.filter.type).inputType === 'currency'\">{{\r\n            +filterWithValue.value?.amount | localeCurrency\r\n        }}</span>\r\n        <span *ngIf=\"$any(filterWithValue.filter.type).inputType !== 'currency'\">{{\r\n            +filterWithValue.value?.amount\r\n        }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isCustom()\">\r\n        <span>{{ customFilterLabel$ | async }}</span>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host{display:flex;gap:calc(var(--space-unit) / 2)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LocalizedTextComponent, selector: "vdr-localized-text", inputs: ["text"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableFilterLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-data-table-filter-label', changeDetection: ChangeDetectionStrategy.Default, template: "<span><vdr-localized-text [text]=\"filterWithValue.filter.label\" />:</span>\n<div>\n    <ng-container *ngIf=\"filterWithValue.isSelect()\">\n        {{ filterWithValue.value?.join(', ') }}\n    </ng-container>\n    <ng-container *ngIf=\"filterWithValue.isId()\">\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\">{{ 'common.operator-eq' | translate }}</span>\n        <span *ngIf=\"filterWithValue.value?.operator === 'notEq'\">{{\n            'common.operator-not-eq' | translate\n        }}</span>\n        <span> \"{{ filterWithValue.value?.term }}\"</span>\n    </ng-container>\n    <ng-container *ngIf=\"filterWithValue.isText()\">\n        <span *ngIf=\"filterWithValue.value?.operator === 'contains'\">{{\n            'common.operator-contains' | translate\n        }}</span>\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\">{{ 'common.operator-eq' | translate }}</span>\n        <span *ngIf=\"filterWithValue.value?.operator === 'notContains'\">{{\n            'common.operator-notContains' | translate\n        }}</span>\n        <span *ngIf=\"filterWithValue.value?.operator === 'notEq'\">{{\n            'common.operator-not-eq' | translate\n        }}</span>\n        <span *ngIf=\"filterWithValue.value?.operator === 'regex'\">{{\n            'common.operator-regex' | translate\n        }}</span>\n        <span> \"{{ filterWithValue.value?.term }}\"</span>\n    </ng-container>\n    <ng-container *ngIf=\"filterWithValue.isBoolean()\">\n        <span *ngIf=\"filterWithValue?.value\">{{ 'common.boolean-true' | translate }}</span>\n        <span *ngIf=\"!filterWithValue?.value\">{{ 'common.boolean-false' | translate }}</span>\n    </ng-container>\n    <ng-container *ngIf=\"filterWithValue.isDateRange()\">\n        <ng-container *ngIf=\"filterWithValue.value.mode === 'relative'\">\n            <span *ngIf=\"filterWithValue.value.relativeUnit === 'day'\">\n                {{ 'datetime.relative-past-days' | translate: { count: filterWithValue.value.relativeValue } }}\n            </span>\n            <span *ngIf=\"filterWithValue.value.relativeUnit === 'month'\">\n                {{ 'datetime.relative-past-months' | translate: { count: filterWithValue.value.relativeValue } }}\n            </span>\n            <span *ngIf=\"filterWithValue.value.relativeUnit === 'year'\">\n                {{ 'datetime.relative-past-years' | translate: { count: filterWithValue.value.relativeValue } }}\n            </span>\n        </ng-container>\n        <ng-container *ngIf=\"filterWithValue.value.mode === 'range'\">\n            <span *ngIf=\"filterWithValue.value?.start && filterWithValue.value?.end\">\n                {{ filterWithValue.value?.start | localeDate : 'shortDate' }} -\n                {{ filterWithValue.value?.end | localeDate : 'shortDate' }}\n            </span>\n            <span *ngIf=\"filterWithValue.value?.start && !filterWithValue.value?.end\">\n                > {{ filterWithValue.value?.start | localeDate : 'shortDate' }}\n            </span>\n            <span *ngIf=\"filterWithValue.value?.end && !filterWithValue.value?.start\">\n                < {{ filterWithValue.value?.end | localeDate : 'shortDate' }}\n            </span>\n        </ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"filterWithValue.isNumber()\">\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\"> = </span>\n        <span *ngIf=\"filterWithValue.value?.operator === 'gt'\"> > </span>\n        <span *ngIf=\"filterWithValue.value?.operator === 'lt'\"> < </span>\n        <span *ngIf=\"$any(filterWithValue.filter.type).inputType === 'currency'\">{{\n            +filterWithValue.value?.amount | localeCurrency\n        }}</span>\n        <span *ngIf=\"$any(filterWithValue.filter.type).inputType !== 'currency'\">{{\n            +filterWithValue.value?.amount\n        }}</span>\n    </ng-container>\n    <ng-container *ngIf=\"filterWithValue.isCustom()\">\n        <span>{{ customFilterLabel$ | async }}</span>\n    </ng-container>\n</div>\n", styles: [":host{display:flex;gap:calc(var(--space-unit) / 2)}\n"] }]
+            args: [{ selector: 'vdr-data-table-filter-label', changeDetection: ChangeDetectionStrategy.Default, template: "<span><vdr-localized-text [text]=\"filterWithValue.filter.label\" />:</span>\r\n<div>\r\n    <ng-container *ngIf=\"filterWithValue.isSelect()\">\r\n        {{ filterWithValue.value?.join(', ') }}\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isId()\">\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\">{{ 'common.operator-eq' | translate }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'notEq'\">{{\r\n            'common.operator-not-eq' | translate\r\n        }}</span>\r\n        <span> \"{{ filterWithValue.value?.term }}\"</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isText()\">\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'contains'\">{{\r\n            'common.operator-contains' | translate\r\n        }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\">{{ 'common.operator-eq' | translate }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'notContains'\">{{\r\n            'common.operator-notContains' | translate\r\n        }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'notEq'\">{{\r\n            'common.operator-not-eq' | translate\r\n        }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'regex'\">{{\r\n            'common.operator-regex' | translate\r\n        }}</span>\r\n        <span> \"{{ filterWithValue.value?.term }}\"</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isBoolean()\">\r\n        <span *ngIf=\"filterWithValue?.value\">{{ 'common.boolean-true' | translate }}</span>\r\n        <span *ngIf=\"!filterWithValue?.value\">{{ 'common.boolean-false' | translate }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isDateRange()\">\r\n        <ng-container *ngIf=\"filterWithValue.value.mode === 'relative'\">\r\n            <span *ngIf=\"filterWithValue.value.relativeUnit === 'day'\">\r\n                {{ 'datetime.relative-past-days' | translate: { count: filterWithValue.value.relativeValue } }}\r\n            </span>\r\n            <span *ngIf=\"filterWithValue.value.relativeUnit === 'month'\">\r\n                {{ 'datetime.relative-past-months' | translate: { count: filterWithValue.value.relativeValue } }}\r\n            </span>\r\n            <span *ngIf=\"filterWithValue.value.relativeUnit === 'year'\">\r\n                {{ 'datetime.relative-past-years' | translate: { count: filterWithValue.value.relativeValue } }}\r\n            </span>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"filterWithValue.value.mode === 'range'\">\r\n            <span *ngIf=\"filterWithValue.value?.start && filterWithValue.value?.end\">\r\n                {{ filterWithValue.value?.start | localeDate : 'shortDate' }} -\r\n                {{ filterWithValue.value?.end | localeDate : 'shortDate' }}\r\n            </span>\r\n            <span *ngIf=\"filterWithValue.value?.start && !filterWithValue.value?.end\">\r\n                > {{ filterWithValue.value?.start | localeDate : 'shortDate' }}\r\n            </span>\r\n            <span *ngIf=\"filterWithValue.value?.end && !filterWithValue.value?.start\">\r\n                < {{ filterWithValue.value?.end | localeDate : 'shortDate' }}\r\n            </span>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isNumber()\">\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\"> = </span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'gt'\"> > </span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'lt'\"> < </span>\r\n        <span *ngIf=\"$any(filterWithValue.filter.type).inputType === 'currency'\">{{\r\n            +filterWithValue.value?.amount | localeCurrency\r\n        }}</span>\r\n        <span *ngIf=\"$any(filterWithValue.filter.type).inputType !== 'currency'\">{{\r\n            +filterWithValue.value?.amount\r\n        }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isCustom()\">\r\n        <span>{{ customFilterLabel$ | async }}</span>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host{display:flex;gap:calc(var(--space-unit) / 2)}\n"] }]
         }], propDecorators: { filterWithValue: [{
                 type: Input
             }] } });
@@ -17292,7 +17285,9 @@ class DataTableFiltersComponent {
     }
     onFKeyPress(event) {
         if (event.target instanceof HTMLElement) {
-            if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
+            if (event.target.tagName === 'INPUT' ||
+                event.target.tagName === 'TEXTAREA' ||
+                event.target.classList.contains('vdr-prosemirror')) {
                 return;
             }
         }
@@ -17460,11 +17455,11 @@ class DataTableFiltersComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", 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.2.2", 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>\n    <div class=\"filter-button\" [ngClass]=\"state\">\n        <clr-icon shape=\"plus\" size=\"12\" *ngIf=\"state === 'new'\"></clr-icon>\n        <button *ngIf=\"state === 'active'\" class=\"remove\" (click)=\"deactivate()\">\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\n        </button>\n        <button vdrDropdownTrigger class=\"\">\n            <span *ngIf=\"state === 'new'\"\n                >{{ 'common.add-filter' | translate }} <span class=\"filter-hotkey\">f</span></span\n            >\n            <span *ngIf=\"state === 'active'\">\n                <vdr-data-table-filter-label\n                    [filterWithValue]=\"filterWithValue\"\n                ></vdr-data-table-filter-label>\n            </span>\n            <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\n        </button>\n    </div>\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\n        <div *ngIf=\"!selectedFilter\">\n            <div class=\"filter-heading\">Filter by:</div>\n            <div *ngFor=\"let filter of filters.getFilters()\">\n                <button vdrDropdownItem (click)=\"selectFilter(filter)\">\n                    <vdr-localized-text [text]=\"filter?.label\" />\n                </button>\n            </div>\n        </div>\n\n        <div class=\"filter-heading\" *ngIf=\"selectedFilter\">\n            Filter by <vdr-localized-text [text]=\"selectedFilter.label\" />:\n        </div>\n        <div class=\"mx-2 mt-1\">\n            <div vdrCustomFilterComponentHost #customComponentHost></div>\n        </div>\n        <form *ngIf=\"selectedFilter\" class=\"\" [cdkTrapFocus]=\"true\" [cdkTrapFocusAutoCapture]=\"true\">\n            <ng-container *ngIf=\"selectedFilter.type.kind !== 'custom'\">\n                <div class=\"mx-2 mt-1\" [ngSwitch]=\"selectedFilter.type.kind\">\n                    <div *ngSwitchCase=\"'select'\" [formGroup]=\"formControl\">\n                        <label *ngFor=\"let option of $any(selectedFilter.type).options; index as i\">\n                            <input type=\"checkbox\" [formControlName]=\"i\" />\n                            <span>{{ option.label | translate }}</span>\n                        </label>\n                    </div>\n                    <div *ngSwitchCase=\"'boolean'\">\n                        <label\n                            ><input type=\"checkbox\" [formControl]=\"formControl\" clrToggle />\n                            <span *ngIf=\"formControl.value\">{{ 'common.boolean-true' | translate }}</span>\n                            <span *ngIf=\"!formControl.value\">{{ 'common.boolean-false' | translate }}</span>\n                        </label>\n                    </div>\n                    <div *ngSwitchCase=\"'text'\">\n                        <div [formGroup]=\"formControl\">\n                            <div>\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\n                                    <option value=\"contains\">\n                                        {{ 'common.operator-contains' | translate }}\n                                    </option>\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\n                                    <option value=\"notContains\">\n                                        {{ 'common.operator-not-contains' | translate }}\n                                    </option>\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\n                                    <option value=\"regex\">{{ 'common.operator-regex' | translate }}</option>\n                                </select>\n                            </div>\n                            <input type=\"text\" formControlName=\"term\" />\n                        </div>\n                    </div>\n                    <div *ngSwitchCase=\"'id'\">\n                        <div [formGroup]=\"formControl\">\n                            <div>\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\n                                </select>\n                            </div>\n                            <input type=\"text\" formControlName=\"term\" />\n                        </div>\n                    </div>\n                    <div *ngSwitchCase=\"'number'\">\n                        <div [formGroup]=\"formControl\">\n                            <div>\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\n                                    <option value=\"gt\">{{ 'common.operator-gt' | translate }}</option>\n                                    <option value=\"lt\">{{ 'common.operator-lt' | translate }}</option>\n                                </select>\n                            </div>\n                            <input\n                                *ngIf=\"$any(selectedFilter.type).inputType !== 'currency'\"\n                                type=\"text\"\n                                formControlName=\"amount\"\n                            />\n                            <vdr-currency-input\n                                *ngIf=\"$any(selectedFilter.type).inputType === 'currency'\"\n                                formControlName=\"amount\"\n                            />\n                        </div>\n                    </div>\n                    <div *ngSwitchCase=\"'dateRange'\">\n                        <div [formGroup]=\"formControl\">\n                            <vdr-form-field [label]=\"'common.data-table-filter-date-mode' | translate\">\n                                <select name=\"mode\" formControlName=\"mode\" class=\"mb-1\">\n                                    <option value=\"relative\">\n                                        {{ 'common.data-table-filter-date-relative' | translate }}\n                                    </option>\n                                    <option value=\"range\">\n                                        {{ 'common.data-table-filter-date-range' | translate }}\n                                    </option>\n                                </select>\n                            </vdr-form-field>\n                            <ng-container *ngIf=\"formControl.get('mode')?.value === 'relative'\">\n                                <div class=\"flex mt-2\">\n                                    <vdr-form-field class=\"mr-1\">\n                                        <input type=\"number\" min=\"1\" formControlName=\"relativeValue\" />\n                                    </vdr-form-field>\n                                    <vdr-form-field>\n                                        <select name=\"mode\" formControlName=\"relativeUnit\">\n                                            <option value=\"day\">{{ 'datetime.day' | translate }}</option>\n                                            <option value=\"month\">{{ 'datetime.month' | translate }}</option>\n                                            <option value=\"year\">{{ 'datetime.year' | translate }}</option>\n                                        </select>\n                                    </vdr-form-field>\n                                </div>\n                            </ng-container>\n                            <ng-container *ngIf=\"formControl.get('mode')?.value === 'range'\">\n                                <label>\n                                    <div>{{ 'common.start-date' | translate }}</div>\n                                </label>\n                                <vdr-datetime-picker formControlName=\"start\"></vdr-datetime-picker>\n                                <label>\n                                    <div>{{ 'common.end-date' | translate }}</div>\n                                </label>\n                                <vdr-datetime-picker formControlName=\"end\"></vdr-datetime-picker>\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n            <div class=\"apply-wrapper mt-2\">\n                <button class=\"button\" (click)=\"activate()\" [disabled]=\"!formControl?.valid\">\n                    <span>{{ 'common.apply' | translate }}</span>\n                    <clr-icon shape=\"check\"></clr-icon>\n                </button>\n            </div>\n        </form>\n    </vdr-dropdown-menu>\n</vdr-dropdown>\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-inline-end: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$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$3.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$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.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$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { 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.2.2", 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'\"\r\n                >{{ 'common.add-filter' | translate }} <span class=\"filter-hotkey\">f</span></span\r\n            >\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=\"'id'\">\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=\"notEq\">{{ 'common.operator-not-eq' | 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                            <vdr-form-field [label]=\"'common.data-table-filter-date-mode' | translate\">\r\n                                <select name=\"mode\" formControlName=\"mode\" class=\"mb-1\">\r\n                                    <option value=\"relative\">\r\n                                        {{ 'common.data-table-filter-date-relative' | translate }}\r\n                                    </option>\r\n                                    <option value=\"range\">\r\n                                        {{ 'common.data-table-filter-date-range' | translate }}\r\n                                    </option>\r\n                                </select>\r\n                            </vdr-form-field>\r\n                            <ng-container *ngIf=\"formControl.get('mode')?.value === 'relative'\">\r\n                                <div class=\"flex mt-2\">\r\n                                    <vdr-form-field class=\"mr-1\">\r\n                                        <input type=\"number\" min=\"1\" formControlName=\"relativeValue\" />\r\n                                    </vdr-form-field>\r\n                                    <vdr-form-field>\r\n                                        <select name=\"mode\" formControlName=\"relativeUnit\">\r\n                                            <option value=\"day\">{{ 'datetime.day' | translate }}</option>\r\n                                            <option value=\"month\">{{ 'datetime.month' | translate }}</option>\r\n                                            <option value=\"year\">{{ 'datetime.year' | translate }}</option>\r\n                                        </select>\r\n                                    </vdr-form-field>\r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"formControl.get('mode')?.value === 'range'\">\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                            </ng-container>\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-inline-end: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$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$3.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$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.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$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { 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.2.2", ngImport: i0, type: DataTableFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-data-table-filters', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-dropdown [manualToggle]=\"true\" #dropdown>\n    <div class=\"filter-button\" [ngClass]=\"state\">\n        <clr-icon shape=\"plus\" size=\"12\" *ngIf=\"state === 'new'\"></clr-icon>\n        <button *ngIf=\"state === 'active'\" class=\"remove\" (click)=\"deactivate()\">\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\n        </button>\n        <button vdrDropdownTrigger class=\"\">\n            <span *ngIf=\"state === 'new'\"\n                >{{ 'common.add-filter' | translate }} <span class=\"filter-hotkey\">f</span></span\n            >\n            <span *ngIf=\"state === 'active'\">\n                <vdr-data-table-filter-label\n                    [filterWithValue]=\"filterWithValue\"\n                ></vdr-data-table-filter-label>\n            </span>\n            <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\n        </button>\n    </div>\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\n        <div *ngIf=\"!selectedFilter\">\n            <div class=\"filter-heading\">Filter by:</div>\n            <div *ngFor=\"let filter of filters.getFilters()\">\n                <button vdrDropdownItem (click)=\"selectFilter(filter)\">\n                    <vdr-localized-text [text]=\"filter?.label\" />\n                </button>\n            </div>\n        </div>\n\n        <div class=\"filter-heading\" *ngIf=\"selectedFilter\">\n            Filter by <vdr-localized-text [text]=\"selectedFilter.label\" />:\n        </div>\n        <div class=\"mx-2 mt-1\">\n            <div vdrCustomFilterComponentHost #customComponentHost></div>\n        </div>\n        <form *ngIf=\"selectedFilter\" class=\"\" [cdkTrapFocus]=\"true\" [cdkTrapFocusAutoCapture]=\"true\">\n            <ng-container *ngIf=\"selectedFilter.type.kind !== 'custom'\">\n                <div class=\"mx-2 mt-1\" [ngSwitch]=\"selectedFilter.type.kind\">\n                    <div *ngSwitchCase=\"'select'\" [formGroup]=\"formControl\">\n                        <label *ngFor=\"let option of $any(selectedFilter.type).options; index as i\">\n                            <input type=\"checkbox\" [formControlName]=\"i\" />\n                            <span>{{ option.label | translate }}</span>\n                        </label>\n                    </div>\n                    <div *ngSwitchCase=\"'boolean'\">\n                        <label\n                            ><input type=\"checkbox\" [formControl]=\"formControl\" clrToggle />\n                            <span *ngIf=\"formControl.value\">{{ 'common.boolean-true' | translate }}</span>\n                            <span *ngIf=\"!formControl.value\">{{ 'common.boolean-false' | translate }}</span>\n                        </label>\n                    </div>\n                    <div *ngSwitchCase=\"'text'\">\n                        <div [formGroup]=\"formControl\">\n                            <div>\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\n                                    <option value=\"contains\">\n                                        {{ 'common.operator-contains' | translate }}\n                                    </option>\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\n                                    <option value=\"notContains\">\n                                        {{ 'common.operator-not-contains' | translate }}\n                                    </option>\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\n                                    <option value=\"regex\">{{ 'common.operator-regex' | translate }}</option>\n                                </select>\n                            </div>\n                            <input type=\"text\" formControlName=\"term\" />\n                        </div>\n                    </div>\n                    <div *ngSwitchCase=\"'id'\">\n                        <div [formGroup]=\"formControl\">\n                            <div>\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\n                                </select>\n                            </div>\n                            <input type=\"text\" formControlName=\"term\" />\n                        </div>\n                    </div>\n                    <div *ngSwitchCase=\"'number'\">\n                        <div [formGroup]=\"formControl\">\n                            <div>\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\n                                    <option value=\"gt\">{{ 'common.operator-gt' | translate }}</option>\n                                    <option value=\"lt\">{{ 'common.operator-lt' | translate }}</option>\n                                </select>\n                            </div>\n                            <input\n                                *ngIf=\"$any(selectedFilter.type).inputType !== 'currency'\"\n                                type=\"text\"\n                                formControlName=\"amount\"\n                            />\n                            <vdr-currency-input\n                                *ngIf=\"$any(selectedFilter.type).inputType === 'currency'\"\n                                formControlName=\"amount\"\n                            />\n                        </div>\n                    </div>\n                    <div *ngSwitchCase=\"'dateRange'\">\n                        <div [formGroup]=\"formControl\">\n                            <vdr-form-field [label]=\"'common.data-table-filter-date-mode' | translate\">\n                                <select name=\"mode\" formControlName=\"mode\" class=\"mb-1\">\n                                    <option value=\"relative\">\n                                        {{ 'common.data-table-filter-date-relative' | translate }}\n                                    </option>\n                                    <option value=\"range\">\n                                        {{ 'common.data-table-filter-date-range' | translate }}\n                                    </option>\n                                </select>\n                            </vdr-form-field>\n                            <ng-container *ngIf=\"formControl.get('mode')?.value === 'relative'\">\n                                <div class=\"flex mt-2\">\n                                    <vdr-form-field class=\"mr-1\">\n                                        <input type=\"number\" min=\"1\" formControlName=\"relativeValue\" />\n                                    </vdr-form-field>\n                                    <vdr-form-field>\n                                        <select name=\"mode\" formControlName=\"relativeUnit\">\n                                            <option value=\"day\">{{ 'datetime.day' | translate }}</option>\n                                            <option value=\"month\">{{ 'datetime.month' | translate }}</option>\n                                            <option value=\"year\">{{ 'datetime.year' | translate }}</option>\n                                        </select>\n                                    </vdr-form-field>\n                                </div>\n                            </ng-container>\n                            <ng-container *ngIf=\"formControl.get('mode')?.value === 'range'\">\n                                <label>\n                                    <div>{{ 'common.start-date' | translate }}</div>\n                                </label>\n                                <vdr-datetime-picker formControlName=\"start\"></vdr-datetime-picker>\n                                <label>\n                                    <div>{{ 'common.end-date' | translate }}</div>\n                                </label>\n                                <vdr-datetime-picker formControlName=\"end\"></vdr-datetime-picker>\n                            </ng-container>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n            <div class=\"apply-wrapper mt-2\">\n                <button class=\"button\" (click)=\"activate()\" [disabled]=\"!formControl?.valid\">\n                    <span>{{ 'common.apply' | translate }}</span>\n                    <clr-icon shape=\"check\"></clr-icon>\n                </button>\n            </div>\n        </form>\n    </vdr-dropdown-menu>\n</vdr-dropdown>\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-inline-end: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"] }]
+            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'\"\r\n                >{{ 'common.add-filter' | translate }} <span class=\"filter-hotkey\">f</span></span\r\n            >\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=\"'id'\">\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=\"notEq\">{{ 'common.operator-not-eq' | 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                            <vdr-form-field [label]=\"'common.data-table-filter-date-mode' | translate\">\r\n                                <select name=\"mode\" formControlName=\"mode\" class=\"mb-1\">\r\n                                    <option value=\"relative\">\r\n                                        {{ 'common.data-table-filter-date-relative' | translate }}\r\n                                    </option>\r\n                                    <option value=\"range\">\r\n                                        {{ 'common.data-table-filter-date-range' | translate }}\r\n                                    </option>\r\n                                </select>\r\n                            </vdr-form-field>\r\n                            <ng-container *ngIf=\"formControl.get('mode')?.value === 'relative'\">\r\n                                <div class=\"flex mt-2\">\r\n                                    <vdr-form-field class=\"mr-1\">\r\n                                        <input type=\"number\" min=\"1\" formControlName=\"relativeValue\" />\r\n                                    </vdr-form-field>\r\n                                    <vdr-form-field>\r\n                                        <select name=\"mode\" formControlName=\"relativeUnit\">\r\n                                            <option value=\"day\">{{ 'datetime.day' | translate }}</option>\r\n                                            <option value=\"month\">{{ 'datetime.month' | translate }}</option>\r\n                                            <option value=\"year\">{{ 'datetime.year' | translate }}</option>\r\n                                        </select>\r\n                                    </vdr-form-field>\r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"formControl.get('mode')?.value === 'range'\">\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                            </ng-container>\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-inline-end: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: [{
@@ -17519,11 +17514,11 @@ class RenameFilterPresetDialogComponent {
         this.resolveWith(this.name);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RenameFilterPresetDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: RenameFilterPresetDialogComponent, selector: "vdr-rename-filter-preset-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\n    {{ 'common.rename-filter-preset' | translate }}\n</ng-template>\n    <vdr-form-field>\n        <input type=\"text\" [(ngModel)]=\"name\">\n    </vdr-form-field>\n<ng-template vdrDialogButtons>\n    <button type=\"submit\" (click)=\"rename()\" [disabled]=\"!name\" class=\"button primary\">\n       {{ 'common.update' | translate }}\n    </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: RenameFilterPresetDialogComponent, selector: "vdr-rename-filter-preset-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.rename-filter-preset' | translate }}\r\n</ng-template>\r\n    <vdr-form-field>\r\n        <input type=\"text\" [(ngModel)]=\"name\">\r\n    </vdr-form-field>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"rename()\" [disabled]=\"!name\" class=\"button primary\">\r\n       {{ 'common.update' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RenameFilterPresetDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-rename-filter-preset-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\n    {{ 'common.rename-filter-preset' | translate }}\n</ng-template>\n    <vdr-form-field>\n        <input type=\"text\" [(ngModel)]=\"name\">\n    </vdr-form-field>\n<ng-template vdrDialogButtons>\n    <button type=\"submit\" (click)=\"rename()\" [disabled]=\"!name\" class=\"button primary\">\n       {{ 'common.update' | translate }}\n    </button>\n</ng-template>\n" }]
+            args: [{ selector: 'vdr-rename-filter-preset-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.rename-filter-preset' | translate }}\r\n</ng-template>\r\n    <vdr-form-field>\r\n        <input type=\"text\" [(ngModel)]=\"name\">\r\n    </vdr-form-field>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"rename()\" [disabled]=\"!name\" class=\"button primary\">\r\n       {{ 'common.update' | translate }}\r\n    </button>\r\n</ng-template>\r\n" }]
         }] });
 
 class DataTableFilterPresetsComponent {
@@ -17575,11 +17570,11 @@ class DataTableFilterPresetsComponent {
         this.filterPresetService.reorderPresets(this.dataTableId, event.previousIndex, event.currentIndex);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableFilterPresetsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: FilterPresetService }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: { dataTableId: "dataTableId", filters: "filters" }, ngImport: i0, template: "<ng-container *ngIf=\"filterPresets$ | async as filterPresets\">\n    <div\n        class=\"preset-tabs\"\n        *ngIf=\"filters && filterPresets.length\"\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"drop($event)\"\n    >\n        <div\n            *ngFor=\"let preset of filterPresets\"\n            class=\"preset-tab\"\n            [class.active]=\"preset.value === serializedActiveFilters\"\n            cdkDrag\n            cdkDragBoundary=\".preset-tabs\"\n            cdkDragLockAxis=\"x\"\n        >\n            <div class=\"drag-handle\" cdkDragHandle>\n                <clr-icon shape=\"drag-handle\"></clr-icon>\n            </div>\n            <a\n                [routerLink]=\"['./']\"\n                [queryParams]=\"preset.value === serializedActiveFilters ? {} : { filters: preset.value }\"\n            >\n                <div>{{ preset.name }}</div>\n            </a>\n            <vdr-dropdown>\n                <button class=\"icon-button\" vdrDropdownTrigger>\n                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"/>\n                </button>\n                <vdr-dropdown-menu vdrPosition=\"bottom-left\">\n                    <button vdrDropdownItem (click)=\"renameFilterPreset(preset.name)\">\n                        <clr-icon shape=\"edit\"></clr-icon>\n                        {{ 'common.rename-filter-preset' | translate }}\n                    </button>\n                    <button vdrDropdownItem (click)=\"deleteFilterPreset(preset.name)\">\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n                        {{ 'common.delete' | translate }}\n                    </button>\n                </vdr-dropdown-menu>\n            </vdr-dropdown>\n        </div>\n    </div>\n</ng-container>\n", styles: [".preset-tabs{padding-inline-start:var(--surface-margin-left);margin:var(--space-unit) 0;display:flex;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid var(--color-component-border-100)}.preset-tab{display:flex;align-items:center;gap:calc(var(--space-unit) * .5);font-size:var(--font-size-sm);white-space:nowrap;text-transform:none;padding:0 calc(var(--space-unit) * 1);border-bottom:1px solid var(--color-weight-300);cursor:pointer}.preset-tab>a{padding:calc(var(--space-unit) * 1) 0;padding-inline-end:0;color:var(--color-weight-600)}.preset-tab.active{border-bottom-color:var(--color-text-active)}.preset-tab.active>a{color:var(--color-text-active)}.preset-tab-link{display:flex;align-items:center;gap:calc(var(--space-unit) * .5)}.drag-handle{cursor:move}.cdk-drag-preview{box-sizing:border-box;opacity:.8;background:var(--color-weight-100);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.preset-tabs.cdk-drop-list-dragging .preset-tab:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$3.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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: "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: "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.2.2", type: DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: { dataTableId: "dataTableId", filters: "filters" }, ngImport: i0, template: "<ng-container *ngIf=\"filterPresets$ | async as filterPresets\">\r\n    <div\r\n        class=\"preset-tabs\"\r\n        *ngIf=\"filters && filterPresets.length\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"horizontal\"\r\n        (cdkDropListDropped)=\"drop($event)\"\r\n    >\r\n        <div\r\n            *ngFor=\"let preset of filterPresets\"\r\n            class=\"preset-tab\"\r\n            [class.active]=\"preset.value === serializedActiveFilters\"\r\n            cdkDrag\r\n            cdkDragBoundary=\".preset-tabs\"\r\n            cdkDragLockAxis=\"x\"\r\n        >\r\n            <div class=\"drag-handle\" cdkDragHandle>\r\n                <clr-icon shape=\"drag-handle\"></clr-icon>\r\n            </div>\r\n            <a\r\n                [routerLink]=\"['./']\"\r\n                [queryParams]=\"preset.value === serializedActiveFilters ? {} : { filters: preset.value, page: 1 }\"\r\n            >\r\n                <div>{{ preset.name }}</div>\r\n            </a>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"/>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                    <button vdrDropdownItem (click)=\"renameFilterPreset(preset.name)\">\r\n                        <clr-icon shape=\"edit\"></clr-icon>\r\n                        {{ 'common.rename-filter-preset' | translate }}\r\n                    </button>\r\n                    <button vdrDropdownItem (click)=\"deleteFilterPreset(preset.name)\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [".preset-tabs{padding-inline-start:var(--surface-margin-left);margin:var(--space-unit) 0;gap:calc(var(--space-unit) * .5);display:flex;overflow-x:auto;overflow-y:hidden}.preset-tab{display:flex;align-items:center;gap:calc(var(--space-unit) * .5);font-size:var(--font-size-sm);white-space:nowrap;text-transform:none;padding:0 calc(var(--space-unit) * 1);border:1px solid var(--color-weight-300);border-radius:var(--border-radius-lg);cursor:pointer}.preset-tab>a{padding-inline-end:0;color:var(--color-weight-600)}.preset-tab.active{border-color:var(--color-primary-700);background-color:var(--color-primary-700);color:var(--color-primary-100)}.preset-tab.active>a{color:var(--color-primary-100)}.preset-tab.active button.icon-button{color:var(--color-primary-100)}.preset-tab-link{display:flex;align-items:center;gap:calc(var(--space-unit) * .5)}.drag-handle{cursor:move}.cdk-drag-preview{box-sizing:border-box;opacity:.8;background:var(--color-weight-100);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.preset-tabs.cdk-drop-list-dragging .preset-tab:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$3.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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: "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: "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.2.2", ngImport: i0, type: DataTableFilterPresetsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-data-table-filter-presets', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"filterPresets$ | async as filterPresets\">\n    <div\n        class=\"preset-tabs\"\n        *ngIf=\"filters && filterPresets.length\"\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"drop($event)\"\n    >\n        <div\n            *ngFor=\"let preset of filterPresets\"\n            class=\"preset-tab\"\n            [class.active]=\"preset.value === serializedActiveFilters\"\n            cdkDrag\n            cdkDragBoundary=\".preset-tabs\"\n            cdkDragLockAxis=\"x\"\n        >\n            <div class=\"drag-handle\" cdkDragHandle>\n                <clr-icon shape=\"drag-handle\"></clr-icon>\n            </div>\n            <a\n                [routerLink]=\"['./']\"\n                [queryParams]=\"preset.value === serializedActiveFilters ? {} : { filters: preset.value }\"\n            >\n                <div>{{ preset.name }}</div>\n            </a>\n            <vdr-dropdown>\n                <button class=\"icon-button\" vdrDropdownTrigger>\n                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"/>\n                </button>\n                <vdr-dropdown-menu vdrPosition=\"bottom-left\">\n                    <button vdrDropdownItem (click)=\"renameFilterPreset(preset.name)\">\n                        <clr-icon shape=\"edit\"></clr-icon>\n                        {{ 'common.rename-filter-preset' | translate }}\n                    </button>\n                    <button vdrDropdownItem (click)=\"deleteFilterPreset(preset.name)\">\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n                        {{ 'common.delete' | translate }}\n                    </button>\n                </vdr-dropdown-menu>\n            </vdr-dropdown>\n        </div>\n    </div>\n</ng-container>\n", styles: [".preset-tabs{padding-inline-start:var(--surface-margin-left);margin:var(--space-unit) 0;display:flex;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid var(--color-component-border-100)}.preset-tab{display:flex;align-items:center;gap:calc(var(--space-unit) * .5);font-size:var(--font-size-sm);white-space:nowrap;text-transform:none;padding:0 calc(var(--space-unit) * 1);border-bottom:1px solid var(--color-weight-300);cursor:pointer}.preset-tab>a{padding:calc(var(--space-unit) * 1) 0;padding-inline-end:0;color:var(--color-weight-600)}.preset-tab.active{border-bottom-color:var(--color-text-active)}.preset-tab.active>a{color:var(--color-text-active)}.preset-tab-link{display:flex;align-items:center;gap:calc(var(--space-unit) * .5)}.drag-handle{cursor:move}.cdk-drag-preview{box-sizing:border-box;opacity:.8;background:var(--color-weight-100);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.preset-tabs.cdk-drop-list-dragging .preset-tab:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'vdr-data-table-filter-presets', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"filterPresets$ | async as filterPresets\">\r\n    <div\r\n        class=\"preset-tabs\"\r\n        *ngIf=\"filters && filterPresets.length\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"horizontal\"\r\n        (cdkDropListDropped)=\"drop($event)\"\r\n    >\r\n        <div\r\n            *ngFor=\"let preset of filterPresets\"\r\n            class=\"preset-tab\"\r\n            [class.active]=\"preset.value === serializedActiveFilters\"\r\n            cdkDrag\r\n            cdkDragBoundary=\".preset-tabs\"\r\n            cdkDragLockAxis=\"x\"\r\n        >\r\n            <div class=\"drag-handle\" cdkDragHandle>\r\n                <clr-icon shape=\"drag-handle\"></clr-icon>\r\n            </div>\r\n            <a\r\n                [routerLink]=\"['./']\"\r\n                [queryParams]=\"preset.value === serializedActiveFilters ? {} : { filters: preset.value, page: 1 }\"\r\n            >\r\n                <div>{{ preset.name }}</div>\r\n            </a>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"/>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                    <button vdrDropdownItem (click)=\"renameFilterPreset(preset.name)\">\r\n                        <clr-icon shape=\"edit\"></clr-icon>\r\n                        {{ 'common.rename-filter-preset' | translate }}\r\n                    </button>\r\n                    <button vdrDropdownItem (click)=\"deleteFilterPreset(preset.name)\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [".preset-tabs{padding-inline-start:var(--surface-margin-left);margin:var(--space-unit) 0;gap:calc(var(--space-unit) * .5);display:flex;overflow-x:auto;overflow-y:hidden}.preset-tab{display:flex;align-items:center;gap:calc(var(--space-unit) * .5);font-size:var(--font-size-sm);white-space:nowrap;text-transform:none;padding:0 calc(var(--space-unit) * 1);border:1px solid var(--color-weight-300);border-radius:var(--border-radius-lg);cursor:pointer}.preset-tab>a{padding-inline-end:0;color:var(--color-weight-600)}.preset-tab.active{border-color:var(--color-primary-700);background-color:var(--color-primary-700);color:var(--color-primary-100)}.preset-tab.active>a{color:var(--color-primary-100)}.preset-tab.active button.icon-button{color:var(--color-primary-100)}.preset-tab-link{display:flex;align-items:center;gap:calc(var(--space-unit) * .5)}.drag-handle{cursor:move}.cdk-drag-preview{box-sizing:border-box;opacity:.8;background:var(--color-weight-100);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.preset-tabs.cdk-drop-list-dragging .preset-tab:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: FilterPresetService }, { type: ModalService }]; }, propDecorators: { dataTableId: [{
                 type: Input,
                 args: [{ required: true }]
@@ -17597,7 +17592,7 @@ class AddFilterPresetButtonComponent {
         this.destroy$ = new Subject();
     }
     ngOnInit() {
-        merge(this.route.queryParamMap.pipe(map(qpm => qpm.get('filters')), distinctUntilChanged(), takeUntil(this.destroy$)), this.filterPresetService.presetChanges$).subscribe(() => {
+        merge(this.route.queryParamMap.pipe(map(qpm => qpm.get('filters')), distinctUntilChanged(), takeUntil(this.destroy$)), this.filterPresetService.presetChanges$, this.filters.valueChanges).subscribe(() => {
             this.changeDetector.markForCheck();
             this.updateSelectedFilterPreset();
         });
@@ -17712,8 +17707,11 @@ class DataTable2Component {
         this.activeIndex = -1;
         this.pageChange = new EventEmitter();
         this.itemsPerPageChange = new EventEmitter();
+        this.injector = inject(Injector);
         this.route = inject(ActivatedRoute);
         this.filterPresetService = inject(FilterPresetService);
+        this.dataTableCustomComponentService = inject(DataTableCustomComponentService);
+        this.customComponents = new Map();
         // This is used to apply a `user-select: none` CSS rule to the table,
         // which allows shift-click multi-row selection
         this.disableSelect = false;
@@ -17789,6 +17787,14 @@ class DataTable2Component {
                 column.setVisibility(column.hiddenByDefault);
             }
             column.onColumnChange(updateColumnVisibility);
+            const config = this.dataTableCustomComponentService.getCustomComponentsFor(this.id, column.id);
+            if (config) {
+                const injector = Injector.create({
+                    parent: this.injector,
+                    providers: config.providers ?? [],
+                });
+                this.customComponents.set(column.id, { config, injector });
+            }
         });
         if (this.selectionManager) {
             document.addEventListener('keydown', this.shiftDownHandler, { passive: true });
@@ -17867,11 +17873,11 @@ class DataTable2Component {
         return dataTableConfig;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTable2Component, deps: [{ token: i0.ChangeDetectorRef }, { token: LocalStorageService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTable2Component, selector: "vdr-data-table-2", inputs: { id: "id", items: "items", itemsPerPage: "itemsPerPage", currentPage: "currentPage", totalItems: "totalItems", emptyStateLabel: "emptyStateLabel", filters: "filters", activeIndex: "activeIndex" }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange" }, providers: [PaginationService, FilterPresetService], queries: [{ propertyName: "searchComponent", first: true, predicate: DataTable2SearchComponent, descendants: true }, { propertyName: "bulkActionMenuComponent", first: true, predicate: BulkActionMenuComponent, descendants: true }, { propertyName: "customSearchTemplate", first: true, predicate: ["vdrDt2CustomSearch"], descendants: true }, { propertyName: "columns", predicate: DataTable2ColumnComponent }, { propertyName: "customFieldColumns", predicate: DataTableCustomFieldColumnComponent }, { propertyName: "templateRefs", predicate: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    <vdr-data-table-filter-presets [filters]=\"filters\" [dataTableId]=\"id\"></vdr-data-table-filter-presets>\r\n    <table class=\"\" [class.no-select]=\"disableSelect\">\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <span>{{ column.heading }}</span>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-add-filter-preset-button\r\n                                    [filters]=\"filters\"\r\n                                    [dataTableId]=\"id\"\r\n                                ></vdr-add-filter-preset-button>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  id: id,\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n                        ></ng-container>\r\n                    </div>\r\n                </td>\r\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\r\n            </tr>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n    <vdr-items-per-page-controls\r\n        *ngIf=\"totalItems\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n    ></vdr-items-per-page-controls>\r\n    <div *ngIf=\"totalItems\" class=\"total-items-count\">\r\n        {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n    </div>\r\n\r\n    <vdr-pagination-controls\r\n        *ngIf=\"totalItems\"\r\n        [id]=\"id\"\r\n        [currentPage]=\"currentPage\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        [totalItems]=\"totalItems\"\r\n        (pageChange)=\"pageChange.emit($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-weight-200);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-weight-200)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-weight-200),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-weight-200),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-weight-200)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$3.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "component", type: DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: ["dataTableId", "filters"] }, { kind: "component", type: AddFilterPresetButtonComponent, selector: "vdr-add-filter-preset-button", inputs: ["dataTableId", "filters"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTable2Component, selector: "vdr-data-table-2", inputs: { id: "id", items: "items", itemsPerPage: "itemsPerPage", currentPage: "currentPage", totalItems: "totalItems", emptyStateLabel: "emptyStateLabel", filters: "filters", activeIndex: "activeIndex" }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange" }, providers: [PaginationService, FilterPresetService], queries: [{ propertyName: "searchComponent", first: true, predicate: DataTable2SearchComponent, descendants: true }, { propertyName: "bulkActionMenuComponent", first: true, predicate: BulkActionMenuComponent, descendants: true }, { propertyName: "customSearchTemplate", first: true, predicate: ["vdrDt2CustomSearch"], descendants: true }, { propertyName: "columns", predicate: DataTable2ColumnComponent }, { propertyName: "customFieldColumns", predicate: DataTableCustomFieldColumnComponent }, { propertyName: "templateRefs", predicate: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<vdr-data-table-filter-presets\r\n    *ngIf=\"filters\"\r\n    [filters]=\"filters\"\r\n    [dataTableId]=\"id\"\r\n></vdr-data-table-filter-presets>\r\n<div class=\"table-wrapper\">\r\n    <div class=\"bulk-actions\">\r\n        <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n    </div>\r\n    <table class=\"\" [class.no-select]=\"disableSelect\">\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <vdr-ui-extension-point\r\n                            [locationId]=\"id\"\r\n                            [metadata]=\"column.id\"\r\n                            api=\"dataTable\"\r\n                            [topPx]=\"-6\"\r\n                            [leftPx]=\"-24\"\r\n                            display=\"block\"\r\n                        >\r\n                            <span>{{ column.heading }}</span>\r\n                        </vdr-ui-extension-point>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-add-filter-preset-button\r\n                                    [filters]=\"filters\"\r\n                                    [dataTableId]=\"id\"\r\n                                ></vdr-add-filter-preset-button>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  id: id,\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <ng-container\r\n                            *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n                        >\r\n                            <ng-container\r\n                                *ngComponentOutlet=\"\r\n                                    componentConfig.config.component;\r\n                                    inputs: { rowItem: item };\r\n                                    injector: componentConfig.injector\r\n                                \"\r\n                            ></ng-container>\r\n                        </ng-container>\r\n                        <ng-template #defaultComponent>\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n                            ></ng-container>\r\n                        </ng-template>\r\n                    </div>\r\n                </td>\r\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\r\n            </tr>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n    <vdr-items-per-page-controls\r\n        *ngIf=\"totalItems\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n    ></vdr-items-per-page-controls>\r\n    <div *ngIf=\"totalItems\" class=\"total-items-count\">\r\n        {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n    </div>\r\n\r\n    <vdr-pagination-controls\r\n        *ngIf=\"totalItems\"\r\n        [id]=\"id\"\r\n        [currentPage]=\"currentPage\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        [totalItems]=\"totalItems\"\r\n        (pageChange)=\"pageChange.emit($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { kind: "component", type: DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "component", type: DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: ["dataTableId", "filters"] }, { kind: "component", type: AddFilterPresetButtonComponent, selector: "vdr-add-filter-preset-button", inputs: ["dataTableId", "filters"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTable2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-data-table-2', changeDetection: ChangeDetectionStrategy.OnPush, providers: [PaginationService, FilterPresetService], template: "<div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    <vdr-data-table-filter-presets [filters]=\"filters\" [dataTableId]=\"id\"></vdr-data-table-filter-presets>\r\n    <table class=\"\" [class.no-select]=\"disableSelect\">\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <span>{{ column.heading }}</span>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-add-filter-preset-button\r\n                                    [filters]=\"filters\"\r\n                                    [dataTableId]=\"id\"\r\n                                ></vdr-add-filter-preset-button>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  id: id,\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n                        ></ng-container>\r\n                    </div>\r\n                </td>\r\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\r\n            </tr>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n    <vdr-items-per-page-controls\r\n        *ngIf=\"totalItems\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n    ></vdr-items-per-page-controls>\r\n    <div *ngIf=\"totalItems\" class=\"total-items-count\">\r\n        {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n    </div>\r\n\r\n    <vdr-pagination-controls\r\n        *ngIf=\"totalItems\"\r\n        [id]=\"id\"\r\n        [currentPage]=\"currentPage\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        [totalItems]=\"totalItems\"\r\n        (pageChange)=\"pageChange.emit($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-weight-200);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-weight-200)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-weight-200),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-weight-200),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-weight-200)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n"] }]
+            args: [{ selector: 'vdr-data-table-2', changeDetection: ChangeDetectionStrategy.OnPush, providers: [PaginationService, FilterPresetService], template: "<vdr-data-table-filter-presets\r\n    *ngIf=\"filters\"\r\n    [filters]=\"filters\"\r\n    [dataTableId]=\"id\"\r\n></vdr-data-table-filter-presets>\r\n<div class=\"table-wrapper\">\r\n    <div class=\"bulk-actions\">\r\n        <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n    </div>\r\n    <table class=\"\" [class.no-select]=\"disableSelect\">\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <vdr-ui-extension-point\r\n                            [locationId]=\"id\"\r\n                            [metadata]=\"column.id\"\r\n                            api=\"dataTable\"\r\n                            [topPx]=\"-6\"\r\n                            [leftPx]=\"-24\"\r\n                            display=\"block\"\r\n                        >\r\n                            <span>{{ column.heading }}</span>\r\n                        </vdr-ui-extension-point>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-add-filter-preset-button\r\n                                    [filters]=\"filters\"\r\n                                    [dataTableId]=\"id\"\r\n                                ></vdr-add-filter-preset-button>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  id: id,\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <ng-container\r\n                            *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n                        >\r\n                            <ng-container\r\n                                *ngComponentOutlet=\"\r\n                                    componentConfig.config.component;\r\n                                    inputs: { rowItem: item };\r\n                                    injector: componentConfig.injector\r\n                                \"\r\n                            ></ng-container>\r\n                        </ng-container>\r\n                        <ng-template #defaultComponent>\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n                            ></ng-container>\r\n                        </ng-template>\r\n                    </div>\r\n                </td>\r\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\r\n            </tr>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n    <vdr-items-per-page-controls\r\n        *ngIf=\"totalItems\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n    ></vdr-items-per-page-controls>\r\n    <div *ngIf=\"totalItems\" class=\"total-items-count\">\r\n        {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n    </div>\r\n\r\n    <vdr-pagination-controls\r\n        *ngIf=\"totalItems\"\r\n        [id]=\"id\"\r\n        [currentPage]=\"currentPage\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        [totalItems]=\"totalItems\"\r\n        (pageChange)=\"pageChange.emit($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: LocalStorageService }, { type: DataService }]; }, propDecorators: { id: [{
                 type: Input
             }], items: [{
@@ -18528,8 +18534,8 @@ class PageTitleComponent {
         }), tap(title => this.setTitle(title)));
     }
     ngOnChanges(changes) {
-        if (changes.value) {
-            this.titleChange$.next(changes.value.currentValue);
+        if (changes.title) {
+            this.titleChange$.next(changes.title.currentValue);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: PageTitleComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -19664,6 +19670,9 @@ const DECLARATIONS = [
     AssignToChannelDialogComponent,
     CurrencyCodeSelectorComponent,
     LanguageCodeSelectorComponent,
+    DataTableFilterPresetsComponent,
+    AddFilterPresetButtonComponent,
+    RenameFilterPresetDialogComponent,
 ];
 const DYNAMIC_FORM_INPUTS = [
     TextFormInputComponent,
@@ -19819,7 +19828,10 @@ class SharedModule {
             ChartComponent,
             AssignToChannelDialogComponent,
             CurrencyCodeSelectorComponent,
-            LanguageCodeSelectorComponent, TextFormInputComponent,
+            LanguageCodeSelectorComponent,
+            DataTableFilterPresetsComponent,
+            AddFilterPresetButtonComponent,
+            RenameFilterPresetDialogComponent, TextFormInputComponent,
             PasswordFormInputComponent,
             NumberFormInputComponent,
             DateFormInputComponent,
@@ -19842,9 +19854,7 @@ class SharedModule {
             JsonEditorFormInputComponent,
             HtmlEditorFormInputComponent,
             ProductMultiSelectorFormInputComponent,
-            CombinationModeFormInputComponent, DataTableFilterPresetsComponent,
-            AddFilterPresetButtonComponent,
-            RenameFilterPresetDialogComponent], imports: [ClarityModule,
+            CombinationModeFormInputComponent], imports: [ClarityModule,
             CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -19990,7 +20000,10 @@ class SharedModule {
             ChartComponent,
             AssignToChannelDialogComponent,
             CurrencyCodeSelectorComponent,
-            LanguageCodeSelectorComponent, TextFormInputComponent,
+            LanguageCodeSelectorComponent,
+            DataTableFilterPresetsComponent,
+            AddFilterPresetButtonComponent,
+            RenameFilterPresetDialogComponent, TextFormInputComponent,
             PasswordFormInputComponent,
             NumberFormInputComponent,
             DateFormInputComponent,
@@ -20038,13 +20051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
             args: [{
                     imports: [IMPORTS],
                     exports: [...IMPORTS, ...DECLARATIONS, ...DYNAMIC_FORM_INPUTS],
-                    declarations: [
-                        ...DECLARATIONS,
-                        ...DYNAMIC_FORM_INPUTS,
-                        DataTableFilterPresetsComponent,
-                        AddFilterPresetButtonComponent,
-                        RenameFilterPresetDialogComponent,
-                    ],
+                    declarations: [...DECLARATIONS, ...DYNAMIC_FORM_INPUTS],
                     providers: [
                         // This needs to be shared, since lazy-loaded
                         // modules have their own entryComponents which
@@ -20354,7 +20361,14 @@ class TypedBaseDetailComponent extends BaseDetailComponent {
  * @docsCategory list-detail-views
  */
 function detailComponentWithResolver(config) {
-    const resolveFn = route => {
+    return {
+        resolveFn: createBaseDetailResolveFn(config),
+        breadcrumbFn: (result) => config.getBreadcrumbs?.(result) ?? [],
+        component: config.component,
+    };
+}
+function createBaseDetailResolveFn(config) {
+    return route => {
         const router = inject(Router);
         const dataService = inject(DataService);
         const id = route.paramMap.get('id');
@@ -20379,11 +20393,6 @@ function detailComponentWithResolver(config) {
             })));
         }
     };
-    return {
-        resolveFn,
-        breadcrumbFn: (result) => config.getBreadcrumbs?.(result) ?? [],
-        component: config.component,
-    };
 }
 
 function createResolveData(resolver) {
@@ -20711,13 +20720,6 @@ class DataTableFilterCollection {
         }, {});
     }
     connectToRoute(route) {
-        this.valueChanges.subscribe(() => {
-            this.router.navigate(['./'], {
-                queryParams: { [this.#filtersQueryParamName]: this.serialize(), page: 1 },
-                relativeTo: route,
-                queryParamsHandling: 'merge',
-            });
-        });
         route.queryParamMap
             .pipe(map(params => params.get(this.#filtersQueryParamName)), distinctUntilChanged(), startWith(route.snapshot.queryParamMap.get(this.#filtersQueryParamName) ?? ''))
             .subscribe(value => {
@@ -21430,6 +21432,33 @@ function findTranslation(entity, languageCode) {
     return (entity?.translations || []).find(t => t.languageCode === languageCode);
 }
 
+function getCustomFieldsDefaults(customFieldConfig) {
+    return customFieldConfig.reduce((hash, field) => ({
+        ...hash,
+        [field.name]: getDefaultValue(field.type, field.nullable ?? undefined),
+    }), {});
+}
+function getDefaultValue(type, isNullable) {
+    switch (type) {
+        case 'localeString':
+        case 'string':
+        case 'text':
+        case 'localeText':
+            return '';
+        case 'boolean':
+            return false;
+        case 'float':
+        case 'int':
+            return isNullable ? null : 0;
+        case 'datetime':
+            return isNullable ? null : new Date();
+        case 'relation':
+            return null;
+        default:
+            assertNever(type);
+    }
+}
+
 /**
  * When updating an entity which has translations, the value from the form will pertain to the current
  * languageCode. This function ensures that the "translations" array is correctly set based on the
@@ -21450,7 +21479,9 @@ function createUpdatedTranslatable(options) {
             }
             else {
                 newCustomFields[field.name] =
-                    value === '' ? getDefaultValue(field.type) : value;
+                    value === ''
+                        ? getDefaultValue(field.type, field.nullable ?? true)
+                        : value;
             }
         }
         newTranslation.customFields = newTranslatedCustomFields;
@@ -21470,26 +21501,6 @@ function createUpdatedTranslatable(options) {
     }
     return newTranslatable;
 }
-function getDefaultValue(type) {
-    switch (type) {
-        case 'localeString':
-        case 'string':
-        case 'text':
-        case 'localeText':
-            return '';
-        case 'boolean':
-            return false;
-        case 'float':
-        case 'int':
-            return 0;
-        case 'datetime':
-            return new Date();
-        case 'relation':
-            return null;
-        default:
-            assertNever(type);
-    }
-}
 /**
  * Returns a shallow clone of `obj` with any properties contained in `patch` overwriting
  * those of `obj`.
@@ -21504,8 +21515,199 @@ function patchObject(obj, patch) {
     return clone;
 }
 
-// Auto-generated by the set-version.js script.
-const ADMIN_UI_VERSION = '2.1.0-next.2';
+/**
+ * @description
+ * Adds a button to the ActionBar at the top right of each list or detail view. The locationId can
+ * be determined by inspecting the DOM and finding the <vdr-action-bar> element and its
+ * `data-location-id` attribute.
+ *
+ * This should be used in the NgModule `providers` array of your ui extension module.
+ *
+ * @example
+ * ```TypeScript
+ * \@NgModule({
+ *   imports: [SharedModule],
+ *   providers: [
+ *     addActionBarItem({
+ *      id: 'print-invoice'
+ *      label: 'Print Invoice',
+ *      locationId: 'order-detail',
+ *      routerLink: ['/extensions/invoicing'],
+ *     }),
+ *   ],
+ * })
+ * export class MyUiExtensionModule {}
+ * ```
+ * @docsCategory action-bar
+ */
+function addActionBarItem(config) {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (navBuilderService) => () => {
+            navBuilderService.addActionBarItem(config);
+        },
+        deps: [NavBuilderService],
+    };
+}
+
+/**
+ * @description
+ * Add a section to the main nav menu. Providing the `before` argument will
+ * move the section before any existing section with the specified id. If
+ * omitted (or if the id is not found) the section will be appended to the
+ * existing set of sections.
+ * This should be used in the NgModule `providers` array of your ui extension module.
+ *
+ * @example
+ * ```TypeScript
+ * \@NgModule({
+ *   imports: [SharedModule],
+ *   providers: [
+ *     addNavMenuSection({
+ *       id: 'reports',
+ *       label: 'Reports',
+ *       items: [{
+ *           // ...
+ *       }],
+ *     },
+ *     'settings'),
+ *   ],
+ * })
+ * export class MyUiExtensionModule {}
+ * ```
+ * @docsCategory nav-menu
+ */
+function addNavMenuSection(config, before) {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (navBuilderService) => () => {
+            navBuilderService.addNavMenuSection(config, before);
+        },
+        deps: [NavBuilderService],
+    };
+}
+/**
+ * @description
+ * Add a menu item to an existing section specified by `sectionId`. The id of the section
+ * can be found by inspecting the DOM and finding the `data-section-id` attribute.
+ * Providing the `before` argument will move the item before any existing item with the specified id.
+ * If omitted (or if the name is not found) the item will be appended to the
+ * end of the section.
+ *
+ * This should be used in the NgModule `providers` array of your ui extension module.
+ *
+ * @example
+ * ```TypeScript
+ * \@NgModule({
+ *   imports: [SharedModule],
+ *   providers: [
+ *     addNavMenuItem({
+ *       id: 'reviews',
+ *       label: 'Product Reviews',
+ *       routerLink: ['/extensions/reviews'],
+ *       icon: 'star',
+ *     },
+ *     'marketing'),
+ *   ],
+ * })
+ * export class MyUiExtensionModule {}
+ * ``
+ *
+ * @docsCategory nav-menu
+ */
+function addNavMenuItem(config, sectionId, before) {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (navBuilderService) => () => {
+            navBuilderService.addNavMenuItem(config, sectionId, before);
+        },
+        deps: [NavBuilderService],
+    };
+}
+
+class PageMetadataService {
+    constructor() {
+        this.routeComponentOptions = inject(ROUTE_COMPONENT_OPTIONS);
+    }
+    setTitle(title) {
+        this.routeComponentOptions.title$.next(title);
+    }
+    setBreadcrumbs(value) {
+        this.routeComponentOptions.breadcrumb$.next(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: PageMetadataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: PageMetadataService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: PageMetadataService, decorators: [{
+            type: Injectable
+        }] });
+
+const ROUTE_COMPONENT_OPTIONS = new InjectionToken('ROUTE_COMPONENT_OPTIONS');
+class RouteComponent {
+    constructor(route) {
+        this.route = route;
+        const breadcrumbLabel$ = this.route.data.pipe(switchMap$1(data => {
+            if (data.breadcrumb instanceof Observable) {
+                return data.breadcrumb;
+            }
+            if (typeof data.breadcrumb === 'function') {
+                return data.breadcrumb(data);
+            }
+            return of(undefined);
+        }), filter(notNullOrUndefined), map(breadcrumb => {
+            if (typeof breadcrumb === 'string') {
+                return breadcrumb;
+            }
+            if (Array.isArray(breadcrumb)) {
+                return breadcrumb[breadcrumb.length - 1].label;
+            }
+            return breadcrumb.label;
+        }));
+        this.title$ = combineLatest([inject(ROUTE_COMPONENT_OPTIONS).title$, breadcrumbLabel$]).pipe(map(([title, breadcrumbLabel]) => title ?? breadcrumbLabel));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RouteComponent, deps: [{ token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: RouteComponent, isStandalone: true, selector: "vdr-route-component", providers: [PageMetadataService], ngImport: i0, template: `
+        <vdr-page-header>
+            <vdr-page-title *ngIf="title$ | async as title" [title]="title"></vdr-page-title>
+        </vdr-page-header>
+        <vdr-page-body><ng-content /></vdr-page-body>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PageHeaderComponent, selector: "vdr-page-header" }, { kind: "component", type: PageTitleComponent, selector: "vdr-page-title", inputs: ["title"] }, { kind: "component", type: PageBodyComponent, selector: "vdr-page-body" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RouteComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vdr-route-component',
+                    template: `
+        <vdr-page-header>
+            <vdr-page-title *ngIf="title$ | async as title" [title]="title"></vdr-page-title>
+        </vdr-page-header>
+        <vdr-page-body><ng-content /></vdr-page-body>
+    `,
+                    standalone: true,
+                    imports: [SharedModule],
+                    providers: [PageMetadataService],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }]; } });
+
+class AngularRouteComponent {
+    constructor() {
+        this.component = inject(ROUTE_COMPONENT_OPTIONS).component;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AngularRouteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AngularRouteComponent, isStandalone: true, selector: "vdr-angular-route-component", ngImport: i0, template: ` <vdr-route-component><ng-container *ngComponentOutlet="component" /></vdr-route-component> `, isInline: true, dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: RouteComponent, selector: "vdr-route-component" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AngularRouteComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vdr-angular-route-component',
+                    template: ` <vdr-route-component><ng-container *ngComponentOutlet="component" /></vdr-route-component> `,
+                    standalone: true,
+                    imports: [SharedModule, RouteComponent],
+                }]
+        }] });
 
 /**
  * @description
@@ -21570,41 +21772,21 @@ function registerBulkAction(bulkAction) {
 
 /**
  * @description
- * Registers a {@link HistoryEntryComponent} for displaying history entries in the Order/Customer
- * history timeline.
+ * Registers a {@link CustomDetailComponent} to be placed in a given location. This allows you
+ * to embed any type of custom Angular component in the entity detail pages of the Admin UI.
  *
- * @since 1.9.0
- * @docsCategory custom-history-entry-components
+ * @docsCategory custom-detail-components
  */
-function registerHistoryEntryComponent(config) {
+function registerCustomDetailComponent(config) {
     return {
         provide: APP_INITIALIZER,
         multi: true,
-        useFactory: (customHistoryEntryComponentService) => () => {
-            customHistoryEntryComponentService.registerComponent(config);
+        useFactory: (customDetailComponentService) => () => {
+            customDetailComponentService.registerCustomDetailComponent(config);
         },
-        deps: [HistoryEntryComponentService],
+        deps: [CustomDetailComponentService],
     };
-}
-class HistoryEntryComponentService {
-    constructor() {
-        this.customEntryComponents = new Map();
-    }
-    registerComponent(config) {
-        this.customEntryComponents.set(config.type, config);
-    }
-    getComponent(type) {
-        return this.customEntryComponents.get(type)?.component;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: HistoryEntryComponentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: HistoryEntryComponentService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: HistoryEntryComponentService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
+}
 
 /**
  * Responsible for registering dashboard widget components and querying for layouts.
@@ -21698,6 +21880,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
  * @description
  * Registers a dashboard widget. Once registered, the widget can be set as part of the default
  * (using {@link setDashboardWidgetLayout}).
+ *
+ * @docsCategory dashboard-widgets
  */
 function registerDashboardWidget(id, config) {
     return {
@@ -21712,6 +21896,8 @@ function registerDashboardWidget(id, config) {
 /**
  * @description
  * Sets the default widget layout for the Admin UI dashboard.
+ *
+ * @docsCategory dashboard-widgets
  */
 function setDashboardWidgetLayout(layoutDef) {
     return {
@@ -21724,6 +21910,133 @@ function setDashboardWidgetLayout(layoutDef) {
     };
 }
 
+/**
+ * @description
+ * Allows you to override the default component used to render the data of a particular column in a DataTable.
+ * The component should implement the {@link CustomDataTableColumnComponent} interface.
+ *
+ * @example
+ * ```ts title="components/custom-table.component.ts"
+ * import { Component, Input } from '\@angular/core';
+ * import { CustomColumnComponent } from '\@vendure/admin-ui/core';
+ *
+ * @Component({
+ *     selector: 'custom-slug-component',
+ *     template: `
+ *         <a [href]="'https://example.com/products/' + rowItem.slug" target="_blank">{{ rowItem.slug }}</a>
+ *     `,
+ *     standalone: true,
+ * })
+ * export class CustomTableComponent implements CustomColumnComponent {
+ *     \@Input() rowItem: any;
+ * }
+ * ```
+ *
+ * ```ts title="providers.ts"
+ * import { registerDataTableComponent } from '\@vendure/admin-ui/core';
+ * import { CustomTableComponent } from './components/custom-table.component';
+ *
+ * export default [
+ *     registerDataTableComponent({
+ *         component: CustomTableComponent,
+ *         tableId: 'product-list',
+ *         columnId: 'slug',
+ *     }),
+ * ];
+ * ```
+ *
+ * @docsCategory custom-table-components
+ */
+function registerDataTableComponent(config) {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (dataTableCustomComponentService) => () => {
+            dataTableCustomComponentService.registerCustomComponent(config);
+        },
+        deps: [DataTableCustomComponentService],
+    };
+}
+
+class HistoryEntryComponentService {
+    constructor() {
+        this.customEntryComponents = new Map();
+    }
+    registerComponent(config) {
+        this.customEntryComponents.set(config.type, config);
+    }
+    getComponent(type) {
+        return this.customEntryComponents.get(type)?.component;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: HistoryEntryComponentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: HistoryEntryComponentService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: HistoryEntryComponentService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * @description
+ * Registers a {@link HistoryEntryComponent} for displaying history entries in the Order/Customer
+ * history timeline.
+ *
+ * @since 1.9.0
+ * @docsCategory custom-history-entry-components
+ */
+function registerHistoryEntryComponent(config) {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (customHistoryEntryComponentService) => () => {
+            customHistoryEntryComponentService.registerComponent(config);
+        },
+        deps: [HistoryEntryComponentService],
+    };
+}
+
+function registerRouteComponent(options) {
+    const { query, entityKey, variables, getBreadcrumbs } = options;
+    const breadcrumbSubject$ = new BehaviorSubject(options.breadcrumb ?? '');
+    const titleSubject$ = new BehaviorSubject(options.title);
+    const resolveFn = query && entityKey
+        ? createBaseDetailResolveFn({
+            query,
+            entityKey,
+            variables,
+        })
+        : undefined;
+    return {
+        path: options.path ?? '',
+        providers: [
+            {
+                provide: ROUTE_COMPONENT_OPTIONS,
+                useValue: {
+                    component: options.component,
+                    title$: titleSubject$,
+                    breadcrumb$: breadcrumbSubject$,
+                },
+            },
+            ...(options.routeConfig?.providers ?? []),
+        ],
+        ...(options.routeConfig ?? {}),
+        resolve: { ...(resolveFn ? { detail: resolveFn } : {}), ...(options.routeConfig?.resolve ?? {}) },
+        data: {
+            breadcrumb: breadcrumbSubject$,
+            ...(options.routeConfig?.data ?? {}),
+            ...(getBreadcrumbs
+                ? {
+                    breadcrumb: data => data.detail.entity.pipe(map((entity) => getBreadcrumbs(entity))),
+                }
+                : {}),
+            ...(options.routeConfig?.data ?? {}),
+        },
+        component: RouteComponent,
+    };
+}
+
 /**
  * This guard prevents unauthorized users from accessing any routes which require
  * authorization.
@@ -21858,5 +22171,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, AddFilterPresetButtonComponent, 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, DataTableFilterPresetsComponent, 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, FACET_WITH_VALUE_LIST_FRAGMENT, FLOAT_CUSTOM_FIELD_FRAGMENT, FULFILLMENT_FRAGMENT, FacetDataService, FacetValueChipComponent, FacetValueFormInputComponent, FacetValueFragmentDoc, FacetValueSelectorComponent, FacetWithValueListFragmentDoc, FacetWithValuesFragmentDoc, FetchAdapter, FileSizePipe, FilterPresetService, 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, RenameFilterPresetDialogComponent, 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, linkMark, 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, AddFilterPresetButtonComponent, AddItemToDraftOrderDocument, AddManualPaymentDocument, AddMembersToZoneDocument, AddNoteToCustomerDocument, AddNoteToOrderDocument, AddOptionGroupToProductDocument, AddOptionToGroupDocument, AddressFormComponent, AddressFragmentDoc, AdjustDraftOrderLineDocument, AdjustmentType, AdministratorDataService, AdministratorFragmentDoc, AdministratorListItemFragmentDoc, AffixedInputComponent, Alert, AlertsComponent, AlertsService, AngularRouteComponent, 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, DataTableCustomComponentService, DataTableCustomFieldColumnComponent, DataTableFilter, DataTableFilterCollection, DataTableFilterLabelComponent, DataTableFilterPresetsComponent, 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, FACET_WITH_VALUE_LIST_FRAGMENT, FLOAT_CUSTOM_FIELD_FRAGMENT, FULFILLMENT_FRAGMENT, FacetDataService, FacetValueChipComponent, FacetValueFormInputComponent, FacetValueFragmentDoc, FacetValueSelectorComponent, FacetWithValueListFragmentDoc, FacetWithValuesFragmentDoc, FetchAdapter, FileSizePipe, FilterPresetService, 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, PageMetadataService, 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, ROUTE_COMPONENT_OPTIONS, 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, RenameFilterPresetDialogComponent, RequestCompletedDocument, RequestStartedDocument, RichTextEditorComponent, RichTextFormInputComponent, RoleFragmentDoc, RouteComponent, 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, createBaseDetailResolveFn, createBulkAssignToChannelAction, createBulkDeleteAction, createBulkRemoveFromChannelAction, createResolveData, createUpdatedTranslatable, currentChannelIsNotDefault, customMenuPlugin, dayOfWeekIndex, defaultFormInputs, detailBreadcrumb, detailComponentWithResolver, encodeConfigArgValue, findTranslation, getAppConfig, getChannelCodeFromUserStatus, getClientDefaults, getConfigArgValue, getCustomFieldsDefaults, getDefaultConfigArgValue, getDefaultUiLanguage, getDefaultUiLocale, getDefaultValue, getMarkRange, getOrderStateTranslationToken, getServerLocation, getTableMenu, getTableNodes, headingRule, hostExternalFrame, iframeNode, iframeNodeView, imageContextMenuPlugin, initializeServerConfigService, insertImageItem, interpolateDescription, result as introspectionResult, isEntityCreateOrUpdateMutation, isMultiChannel, jsonValidator, linkItem, linkMark, linkSelectPlugin, loadAppConfig, markActive, orderedListRule, rawEditorPlugin, registerBulkAction, registerCustomDetailComponent, registerDashboardWidget, registerDataTableComponent, registerDefaultFormInputs, registerFormInputComponent, registerHistoryEntryComponent, registerPageTab, registerRouteComponent, removeReadonlyCustomFields, renderClarityIcon, setDashboardWidgetLayout, stringToColor, tableContextMenuPlugin, titleSetter, toConfigurableOperationInput, tooltipPlugin, transformRelationCustomFieldInputs, unicodePatternValidator, weekDayNames, wrapInMenuItemWithIcon };
 //# sourceMappingURL=vendure-admin-ui-core.mjs.map