@vendure/admin-ui 2.2.0-next.6 → 2.2.0-next.7

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

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, isDevMode, Inject, HostListener, ChangeDetectionStrategy, Input, ViewChild, Directive, Optional, EventEmitter, Output, ContentChild, Pipe, HostBinding, Injector, APP_INITIALIZER, NgModule, ChangeDetectorRef, ViewContainerRef, ViewChildren, forwardRef, TemplateRef, SkipSelf, inject, ContentChildren, ElementRef, Self, CUSTOM_ELEMENTS_SCHEMA, DestroyRef, InjectionToken } from '@angular/core';
+import { Injectable, Component, isDevMode, Inject, HostListener, ViewChild, EventEmitter, Input, Output, Directive, ChangeDetectionStrategy, Optional, ContentChild, Pipe, HostBinding, Injector, APP_INITIALIZER, NgModule, ChangeDetectorRef, ViewContainerRef, ViewChildren, forwardRef, TemplateRef, SkipSelf, inject, ContentChildren, ElementRef, Self, CUSTOM_ELEMENTS_SCHEMA, DestroyRef, 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, startWith, mergeMap, mapTo, catchError, shareReplay, throttleTime, scan, debounceTime, delay, bufferWhen, delayWhen } from 'rxjs/operators';
+import { concatMap, bufferCount, map, filter, distinctUntilChanged, skip, takeUntil, tap, take, finalize, switchMap, mergeMap, startWith, mapTo, catchError, shareReplay, throttleTime, scan, debounceTime, delay, bufferWhen, delayWhen } from 'rxjs/operators';
 import * as i1 from 'apollo-angular';
 import { gql, ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
 import { pick } from '@vendure/common/lib/pick';
-import { from, Subject, merge, lastValueFrom, BehaviorSubject, interval, combineLatest, isObservable, switchMap as switchMap$1, first, of, map as map$1, take as take$1, takeUntil as takeUntil$1, finalize as finalize$1, Observable, timer, EMPTY, concat, forkJoin, fromEvent } from 'rxjs';
+import { from, Subject, merge, lastValueFrom, BehaviorSubject, map as map$1, Observable, combineLatest, isObservable, switchMap as switchMap$1, first, of, take as take$1, takeUntil as takeUntil$1, finalize as finalize$1, timer, interval, EMPTY, concat, forkJoin, fromEvent } from 'rxjs';
 import { simpleDeepClone } from '@vendure/common/lib/simple-deep-clone';
 import { NetworkStatus, ApolloLink, InMemoryCache } from '@apollo/client/core';
 import { notNullOrUndefined, getGraphQlInputName, assertNever } from '@vendure/common/lib/shared-utils';
@@ -21,12 +21,12 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import * as i3 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader, TranslateCompiler } from '@ngx-translate/core';
-import * as i1$3 from '@clr/angular';
+import * as i1$2 from '@clr/angular';
 import { ClarityModule } from '@clr/angular';
+import * as i4 from '@angular/cdk/bidi';
 import { TemplatePortal } from '@angular/cdk/portal';
-import * as i1$2 from '@angular/cdk/overlay';
+import * as i1$3 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
-import * as i4 from '@angular/cdk/bidi';
 import * as i5 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i1$4 from '@angular/forms';
@@ -62,6 +62,7 @@ import { MenuItem, DropdownSubmenu, icons, wrapItem, blockTypeItem, Dropdown, jo
 import '@clr/icons';
 import '@clr/icons/shapes/all-shapes';
 import '@webcomponents/custom-elements/custom-elements.min.js';
+import { unique } from '@vendure/common/lib/unique';
 import { LineChart, easings } from 'chartist';
 import extend from 'just-extend';
 
@@ -6000,99 +6001,35 @@ function isFieldNode(value) {
     return value.kind === Kind.FIELD;
 }
 
-const CREATE_ENTITY_REGEX = /Create([A-Za-z]+)Input/;
-const UPDATE_ENTITY_REGEX = /Update([A-Za-z]+)Input/;
-/**
- * Checks the current documentNode for an operation with a variable named "Create<Entity>Input" or "Update<Entity>Input"
- * and if a match is found, returns the <Entity> name.
- */
-function isEntityCreateOrUpdateMutation(documentNode) {
-    const operationDef = getOperationAST(documentNode, null);
-    if (operationDef && operationDef.variableDefinitions) {
-        for (const variableDef of operationDef.variableDefinitions) {
-            const namedType = extractInputType(variableDef.type);
-            const inputTypeName = namedType.name.value;
-            // special cases which don't follow the usual pattern
-            if (inputTypeName === 'UpdateActiveAdministratorInput') {
-                return 'Administrator';
-            }
-            if (inputTypeName === 'ModifyOrderInput') {
-                return 'Order';
-            }
-            if (inputTypeName === 'AddItemToDraftOrderInput' ||
-                inputTypeName === 'AdjustDraftOrderLineInput') {
-                return 'OrderLine';
-            }
-            const createMatch = inputTypeName.match(CREATE_ENTITY_REGEX);
-            if (createMatch) {
-                return createMatch[1];
-            }
-            const updateMatch = inputTypeName.match(UPDATE_ENTITY_REGEX);
-            if (updateMatch) {
-                return updateMatch[1];
-            }
-        }
-    }
-}
-function extractInputType(type) {
-    if (type.kind === 'NonNullType') {
-        return extractInputType(type.type);
-    }
-    if (type.kind === 'ListType') {
-        return extractInputType(type.type);
-    }
-    return type;
-}
 /**
  * Removes any `readonly` custom fields from an entity (including its translations).
  * To be used before submitting the entity for a create or update request.
  */
 function removeReadonlyCustomFields(variables, customFieldConfig) {
-    if (!Array.isArray(variables)) {
+    if (Array.isArray(variables)) {
+        return variables.map(variable => removeReadonlyCustomFields(variable, customFieldConfig));
+    }
+    if ('input' in variables && variables.input) {
         if (Array.isArray(variables.input)) {
-            for (const input of variables.input) {
-                removeReadonly(input, customFieldConfig);
-            }
+            variables.input = variables.input.map(variable => removeReadonly(variable, customFieldConfig));
         }
         else {
-            removeReadonly(variables.input, customFieldConfig);
-        }
-    }
-    else {
-        for (const input of variables) {
-            removeReadonly(input, customFieldConfig);
+            variables.input = removeReadonly(variables.input, customFieldConfig);
         }
+        return variables;
     }
     return removeReadonly(variables, customFieldConfig);
 }
 function removeReadonly(input, customFieldConfig) {
-    for (const field of customFieldConfig) {
-        if (field.readonly) {
-            if (field.type === 'localeString') {
-                if (hasTranslations(input)) {
-                    for (const translation of input.translations) {
-                        if (hasCustomFields$1(translation) &&
-                            translation.customFields[field.name] !== undefined) {
-                            delete translation.customFields[field.name];
-                        }
-                    }
-                }
-            }
-            else {
-                if (hasCustomFields$1(input) && input.customFields[field.name] !== undefined) {
-                    delete input.customFields[field.name];
-                }
-            }
-        }
-    }
+    const readonlyConfigs = customFieldConfig.filter(({ readonly }) => readonly);
+    readonlyConfigs.forEach(({ name }) => {
+        input.translations?.forEach(translation => {
+            delete translation.customFields?.[name];
+        });
+        delete input.customFields?.[name];
+    });
     return input;
 }
-function hasCustomFields$1(input) {
-    return input != null && input.hasOwnProperty('customFields');
-}
-function hasTranslations(input) {
-    return input != null && input.hasOwnProperty('translations');
-}
 
 /**
  * Transforms any custom field "relation" type inputs into the corresponding `<name>Id` format,
@@ -6139,6 +6076,50 @@ function hasCustomFields(input) {
     return input != null && input.hasOwnProperty('customFields') && typeof input.customFields === 'object';
 }
 
+const CREATE_ENTITY_REGEX = /Create([A-Za-z]+)Input/;
+const UPDATE_ENTITY_REGEX = /Update([A-Za-z]+)Input/;
+/**
+ * Checks the current documentNode for an operation with a variable named "Create<Entity>Input" or "Update<Entity>Input"
+ * and if a match is found, returns the <Entity> name.
+ */
+function isEntityCreateOrUpdateMutation(documentNode) {
+    const operationDef = getOperationAST(documentNode, null);
+    if (operationDef && operationDef.variableDefinitions) {
+        for (const variableDef of operationDef.variableDefinitions) {
+            const namedType = extractInputType(variableDef.type);
+            const inputTypeName = namedType.name.value;
+            // special cases which don't follow the usual pattern
+            if (inputTypeName === 'UpdateActiveAdministratorInput') {
+                return 'Administrator';
+            }
+            if (inputTypeName === 'ModifyOrderInput') {
+                return 'Order';
+            }
+            if (inputTypeName === 'AddItemToDraftOrderInput' ||
+                inputTypeName === 'AdjustDraftOrderLineInput') {
+                return 'OrderLine';
+            }
+            const createMatch = inputTypeName.match(CREATE_ENTITY_REGEX);
+            if (createMatch) {
+                return createMatch[1];
+            }
+            const updateMatch = inputTypeName.match(UPDATE_ENTITY_REGEX);
+            if (updateMatch) {
+                return updateMatch[1];
+            }
+        }
+    }
+}
+function extractInputType(type) {
+    if (type.kind === 'NonNullType') {
+        return extractInputType(type.type);
+    }
+    if (type.kind === 'ListType') {
+        return extractInputType(type.type);
+    }
+    return type;
+}
+
 function initializeServerConfigService(serverConfigService) {
     return serverConfigService.init();
 }
@@ -6651,154 +6632,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 }]
         }] });
 
-class Alert {
-    constructor(config) {
-        this.config = config;
-        this.hasRun$ = new BehaviorSubject(false);
-        this.data$ = new BehaviorSubject(undefined);
-        if (this.config.recheckIntervalMs) {
-            interval(this.config.recheckIntervalMs).subscribe(() => this.runCheck());
-        }
-        this.activeAlert$ = combineLatest(this.data$, this.hasRun$).pipe(map(([data, hasRun]) => {
-            if (!data) {
-                return;
-            }
-            const isAlert = this.config.isAlert(data);
-            if (!isAlert) {
-                return;
-            }
-            return {
-                id: this.config.id,
-                runAction: () => {
-                    if (!hasRun) {
-                        this.config.action(data);
-                        this.hasRun$.next(true);
-                    }
-                },
-                hasRun,
-                label: this.config.label(data),
-            };
-        }));
-    }
-    get id() {
-        return this.config.id;
-    }
-    runCheck() {
-        const result = this.config.check();
-        if (result instanceof Promise) {
-            result.then(data => this.data$.next(data));
-        }
-        else if (isObservable(result)) {
-            result.pipe(take(1)).subscribe(data => this.data$.next(data));
-        }
-        else {
-            this.data$.next(result);
-        }
-        this.hasRun$.next(false);
-    }
-}
-class AlertsService {
-    constructor(permissionsService) {
-        this.permissionsService = permissionsService;
-        this.alertsMap = new Map();
-        this.configUpdated = new Subject();
-        const alerts$ = this.configUpdated.pipe(map(() => [...this.alertsMap.values()]), startWith([...this.alertsMap.values()]));
-        this.activeAlerts$ = alerts$.pipe(switchMap$1(() => {
-            const alerts = [...this.alertsMap.values()];
-            const isAlertStreams = alerts.map(alert => alert.activeAlert$);
-            return combineLatest(isAlertStreams);
-        }), map(alertStates => alertStates.filter(notNullOrUndefined)));
-    }
-    configureAlert(config) {
-        this.hasSufficientPermissions(config.requiredPermissions)
-            .pipe(first())
-            .subscribe(hasPermissions => {
-            if (hasPermissions) {
-                this.alertsMap.set(config.id, new Alert(config));
-                this.configUpdated.next();
-            }
-        });
-    }
-    hasSufficientPermissions(permissions) {
-        if (!permissions || permissions.length === 0) {
-            return of(true);
-        }
-        return this.permissionsService.currentUserPermissions$.pipe(filter(permissions => permissions.length > 0), map(() => this.permissionsService.userHasPermissions(permissions)));
-    }
-    refresh(id) {
-        if (id) {
-            this.alertsMap.get(id)?.runCheck();
-        }
-        else {
-            this.alertsMap.forEach(config => config.runCheck());
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AlertsService, deps: [{ token: PermissionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AlertsService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AlertsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: PermissionsService }] });
-
-/**
- * @description
- * Used for building dropdown menus.
- *
- * @example
- * ```HTML
- * <vdr-dropdown>
- *   <button class="btn btn-outline" vdrDropdownTrigger>
- *       <clr-icon shape="plus"></clr-icon>
- *       Select type
- *   </button>
- *   <vdr-dropdown-menu vdrPosition="bottom-left">
- *     <button
- *       *ngFor="let typeName of allTypes"
- *       type="button"
- *       vdrDropdownItem
- *       (click)="selectType(typeName)"
- *     >
- *       typeName
- *     </button>
- *   </vdr-dropdown-menu>
- * </vdr-dropdown>
- * ```
- * @docsCategory components
- */
-class DropdownComponent {
-    constructor() {
-        this.isOpen = false;
-        this.onOpenChangeCallbacks = [];
-        this.manualToggle = false;
-    }
-    onClick() {
-        if (!this.manualToggle) {
-            this.toggleOpen();
-        }
-    }
-    toggleOpen() {
-        this.isOpen = !this.isOpen;
-        this.onOpenChangeCallbacks.forEach(fn => fn(this.isOpen));
-    }
-    onOpenChange(callback) {
-        this.onOpenChangeCallbacks.push(callback);
-    }
-    setTriggerElement(elementRef) {
-        this.trigger = elementRef;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DropdownComponent, selector: "vdr-dropdown", inputs: { manualToggle: "manualToggle" }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DropdownComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vdr-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\r\n" }]
-        }], propDecorators: { manualToggle: [{
-                type: Input
-            }] } });
-
 /** @dynamic */
 class I18nService {
     get availableLanguages() {
@@ -6898,15 +6731,641 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 }]
         }], ctorParameters: () => [{ type: I18nService }, { type: DataService }] });
 
-/**
- * A dropdown menu modelled on the Clarity Dropdown component (https://v1.clarity.design/dropdowns).
- *
- * This was created because the Clarity implementation (at this time) does not handle edge detection. Instead
- * we make use of the Angular CDK's Overlay module to manage the positioning.
- *
- * The API of this component (and its related Components & Directives) are based on the Clarity version,
- * albeit only a subset which is currently used in this application.
- */
+class NotificationComponent {
+    /**
+     *
+     */
+    constructor(localizationService) {
+        this.localizationService = localizationService;
+        this.offsetTop = 0;
+        this.message = '';
+        this.translationVars = {};
+        this.type = 'info';
+        this.isVisible = true;
+        this.onClickFn = () => {
+            /* */
+        };
+    }
+    ngOnInit() {
+        this.direction$ = this.localizationService.direction$;
+    }
+    registerOnClickFn(fn) {
+        this.onClickFn = fn;
+    }
+    onClick() {
+        if (this.isVisible) {
+            this.onClickFn();
+        }
+    }
+    /**
+     * Fade out the toast. When promise resolves, toast is invisible and
+     * can be removed.
+     */
+    fadeOut() {
+        this.isVisible = false;
+        return new Promise(resolve => setTimeout(resolve, 1000));
+    }
+    /**
+     * Returns the height of the toast element in px.
+     */
+    getHeight() {
+        if (!this.wrapper) {
+            return 0;
+        }
+        const el = this.wrapper.nativeElement;
+        return el.getBoundingClientRect().height;
+    }
+    getIcon() {
+        switch (this.type) {
+            case 'info':
+                return 'info-circle';
+            case 'success':
+                return 'check-circle';
+            case 'error':
+                return 'exclamation-circle';
+            case 'warning':
+                return 'exclamation-triangle';
+        }
+    }
+    stringifyMessage(message) {
+        if (typeof message === 'string') {
+            return message;
+        }
+        else {
+            return JSON.stringify(message, null, 2);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NotificationComponent, deps: [{ token: LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: NotificationComponent, selector: "vdr-notification", host: { listeners: { "click": "onClick()" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }], ngImport: i0, template: "<div [dir]=\"direction$ | async\" class=\"notification-wrapper\" #wrapper [style.top.px]=\"offsetTop\" [ngClass]=\"{\r\n            visible: isVisible,\r\n            info: type === 'info',\r\n            success: type === 'success',\r\n            error: type === 'error',\r\n            warning: type === 'warning'\r\n        }\">\r\n    <clr-icon [attr.shape]=\"getIcon()\" size=\"24\"></clr-icon>\r\n    {{ stringifyMessage(message) | translate: translationVars }}\r\n</div>", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:.95}}:host{position:relative;z-index:1050}:host>.notification-wrapper{display:block;position:fixed;z-index:1001;top:0;right:10px;border-radius:3px;max-width:98vw;word-wrap:break-word;padding:10px;background-color:var(--color-grey-500);color:#fff;transition:opacity 1s,top .3s;opacity:0;white-space:pre-line}:host>.notification-wrapper.success{background-color:var(--color-success-800)}:host>.notification-wrapper.error{background-color:var(--color-error-800)}:host>.notification-wrapper.warning{background-color:var(--color-warning-800)}:host>.notification-wrapper.info{background-color:var(--color-weight-500)}:host>.notification-wrapper.visible{opacity:.95;animation:fadeIn .3s .3s backwards}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NotificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-notification', template: "<div [dir]=\"direction$ | async\" class=\"notification-wrapper\" #wrapper [style.top.px]=\"offsetTop\" [ngClass]=\"{\r\n            visible: isVisible,\r\n            info: type === 'info',\r\n            success: type === 'success',\r\n            error: type === 'error',\r\n            warning: type === 'warning'\r\n        }\">\r\n    <clr-icon [attr.shape]=\"getIcon()\" size=\"24\"></clr-icon>\r\n    {{ stringifyMessage(message) | translate: translationVars }}\r\n</div>", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:.95}}:host{position:relative;z-index:1050}:host>.notification-wrapper{display:block;position:fixed;z-index:1001;top:0;right:10px;border-radius:3px;max-width:98vw;word-wrap:break-word;padding:10px;background-color:var(--color-grey-500);color:#fff;transition:opacity 1s,top .3s;opacity:0;white-space:pre-line}:host>.notification-wrapper.success{background-color:var(--color-success-800)}:host>.notification-wrapper.error{background-color:var(--color-error-800)}:host>.notification-wrapper.warning{background-color:var(--color-warning-800)}:host>.notification-wrapper.info{background-color:var(--color-weight-500)}:host>.notification-wrapper.visible{opacity:.95;animation:fadeIn .3s .3s backwards}\n"] }]
+        }], ctorParameters: () => [{ type: LocalizationService }], propDecorators: { wrapper: [{
+                type: ViewChild,
+                args: ['wrapper', { static: true }]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+// How many ms before the toast is dismissed.
+const TOAST_DURATION = 3000;
+/**
+ * @description
+ * Provides toast notification functionality.
+ *
+ * @example
+ * ```ts
+ * class MyComponent {
+ *   constructor(private notificationService: NotificationService) {}
+ *
+ *   save() {
+ *     this.notificationService
+ *         .success(_('asset.notify-create-assets-success'), {
+ *           count: successCount,
+ *         });
+ *   }
+ * }
+ *
+ * @docsCategory services
+ * @docsPage NotificationService
+ * @docsWeight 0
+ */
+class NotificationService {
+    get hostView() {
+        return this.overlayHostService.getHostView();
+    }
+    constructor(i18nService, resolver, overlayHostService) {
+        this.i18nService = i18nService;
+        this.resolver = resolver;
+        this.overlayHostService = overlayHostService;
+        this.openToastRefs = [];
+    }
+    /**
+     * @description
+     * Display a success toast notification
+     */
+    success(message, translationVars) {
+        this.notify({
+            message,
+            translationVars,
+            type: 'success',
+        });
+    }
+    /**
+     * @description
+     * Display an info toast notification
+     */
+    info(message, translationVars) {
+        this.notify({
+            message,
+            translationVars,
+            type: 'info',
+        });
+    }
+    /**
+     * @description
+     * Display a warning toast notification
+     */
+    warning(message, translationVars) {
+        this.notify({
+            message,
+            translationVars,
+            type: 'warning',
+        });
+    }
+    /**
+     * @description
+     * Display an error toast notification
+     */
+    error(message, translationVars) {
+        this.notify({
+            message,
+            translationVars,
+            type: 'error',
+            duration: 20000,
+        });
+    }
+    /**
+     * @description
+     * Display a toast notification.
+     */
+    notify(config) {
+        this.createToast(config);
+    }
+    /**
+     * Load a ToastComponent into the DOM host location.
+     */
+    async createToast(config) {
+        const toastFactory = this.resolver.resolveComponentFactory(NotificationComponent);
+        const hostView = await this.hostView;
+        const ref = hostView.createComponent(toastFactory);
+        const toast = ref.instance;
+        const dismissFn = this.createDismissFunction(ref);
+        toast.type = config.type || 'info';
+        toast.message = config.message;
+        toast.translationVars = this.translateTranslationVars(config.translationVars || {});
+        toast.registerOnClickFn(dismissFn);
+        let timerId;
+        if (!config.duration || 0 < config.duration) {
+            timerId = setTimeout(dismissFn, config.duration || TOAST_DURATION);
+        }
+        this.openToastRefs.unshift({ ref, timerId });
+        setTimeout(() => this.calculatePositions());
+    }
+    /**
+     * Returns a function which will destroy the toast component and
+     * remove it from the openToastRefs array.
+     */
+    createDismissFunction(ref) {
+        return () => {
+            const toast = ref.instance;
+            const index = this.openToastRefs.map(o => o.ref).indexOf(ref);
+            if (this.openToastRefs[index]) {
+                clearTimeout(this.openToastRefs[index].timerId);
+            }
+            toast.fadeOut().then(() => {
+                ref.destroy();
+                this.openToastRefs.splice(index, 1);
+                this.calculatePositions();
+            });
+        };
+    }
+    /**
+     * Calculate and set the top offsets for each of the open toasts.
+     */
+    calculatePositions() {
+        let cumulativeHeight = 10;
+        this.openToastRefs.forEach(obj => {
+            const toast = obj.ref.instance;
+            toast.offsetTop = cumulativeHeight;
+            cumulativeHeight += toast.getHeight() + 6;
+        });
+    }
+    translateTranslationVars(translationVars) {
+        for (const [key, val] of Object.entries(translationVars)) {
+            if (typeof val === 'string') {
+                translationVars[key] = this.i18nService.translate(val);
+            }
+        }
+        return translationVars;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NotificationService, deps: [{ token: I18nService }, { token: i0.ComponentFactoryResolver }, { token: OverlayHostService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NotificationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NotificationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: I18nService }, { type: i0.ComponentFactoryResolver }, { type: OverlayHostService }] });
+
+/**
+ * A helper component used to embed a component instance into the {@link ModalDialogComponent}
+ */
+class DialogComponentOutletComponent {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+        this.create = new EventEmitter();
+    }
+    ngOnInit() {
+        const componentRef = this.viewContainerRef.createComponent(this.component);
+        this.create.emit(componentRef.instance);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogComponentOutletComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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: "17.2.4", ngImport: i0, type: DialogComponentOutletComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vdr-dialog-component-outlet',
+                    template: ``,
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { component: [{
+                type: Input
+            }], create: [{
+                type: Output
+            }] } });
+
+/**
+ * This component should only be instantiated dynamically by the ModalService. It should not be used
+ * directly in templates. See {@link ModalService.fromComponent} method for more detail.
+ */
+class ModalDialogComponent {
+    /**
+     *
+     */
+    constructor(localizationService) {
+        this.localizationService = localizationService;
+        this.titleTemplateRef$ = new Subject();
+        this.buttonsTemplateRef$ = new Subject();
+    }
+    ngOnInit() {
+        this.direction$ = this.localizationService.direction$;
+    }
+    /**
+     * This callback is invoked when the childComponentType is instantiated in the
+     * template by the {@link DialogComponentOutletComponent}.
+     * Once we have the instance, we can set the resolveWith function and any
+     * locals which were specified in the config.
+     */
+    onCreate(componentInstance) {
+        componentInstance.resolveWith = (result) => {
+            this.closeModal(result);
+        };
+        if (this.options && this.options.locals) {
+            // eslint-disable-next-line
+            for (const key in this.options.locals) {
+                componentInstance[key] = this.options.locals[key];
+            }
+        }
+    }
+    /**
+     * This should be called by the {@link DialogTitleDirective} only
+     */
+    registerTitleTemplate(titleTemplateRef) {
+        this.titleTemplateRef$.next(titleTemplateRef);
+    }
+    /**
+     * This should be called by the {@link DialogButtonsDirective} only
+     */
+    registerButtonsTemplate(buttonsTemplateRef) {
+        this.buttonsTemplateRef$.next(buttonsTemplateRef);
+    }
+    /**
+     * Called when the modal is closed by clicking the X or the mask.
+     */
+    modalOpenChange(status) {
+        if (status === false) {
+            this.closeModal();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ModalDialogComponent, deps: [{ token: LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ModalDialogComponent, selector: "vdr-modal-dialog", ngImport: i0, template: "<div [dir]=\"direction$ | async\">\r\n    <clr-modal [clrModalOpen]=\"true\" (clrModalOpenChange)=\"modalOpenChange($event)\"\r\n        [clrModalClosable]=\"options?.closable\" [clrModalSize]=\"options?.size\"\r\n        [ngClass]=\"'modal-valign-' + (options?.verticalAlign || 'center')\">\r\n        <h3 class=\"modal-title\"><ng-container *ngTemplateOutlet=\"(titleTemplateRef$ | async)\"></ng-container></h3>\r\n        <div class=\"modal-body\">\r\n            <vdr-dialog-component-outlet [component]=\"childComponentType\"\r\n                (create)=\"onCreate($event)\"></vdr-dialog-component-outlet>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <ng-container *ngTemplateOutlet=\"(buttonsTemplateRef$ | async)\"></ng-container>\r\n        </div>\r\n    </clr-modal>\r\n</div>", styles: ["::ng-deep clr-modal.modal-valign-top .modal{justify-content:flex-start}::ng-deep clr-modal.modal-valign-bottom .modal{justify-content:flex-end}::ng-deep clr-modal .modal-dialog{display:flex}::ng-deep clr-modal .modal-content-wrapper{flex:1;display:flex}::ng-deep clr-modal .modal-dialog .modal-content{flex:1;display:flex;flex-direction:column}@media screen and (max-height: 700px){::ng-deep clr-modal .modal-dialog .modal-content{padding:.8rem}::ng-deep clr-modal .modal-header,::ng-deep clr-modal .modal-header--accessible{padding-bottom:.8rem}::ng-deep clr-modal .modal-footer{padding-top:.8rem}}.modal-body{display:flex;flex-direction:column;container-type:inline-size}\n"], dependencies: [{ kind: "component", type: i1$2.ClrModal, selector: "clr-modal", inputs: ["clrModalOpen", "clrModalClosable", "clrModalCloseButtonAriaLabel", "clrModalSize", "clrModalStaticBackdrop", "clrModalSkipAnimation", "clrModalPreventClose", "clrModalLabelledById"], outputs: ["clrModalOpenChange", "clrModalAlternateClose"] }, { kind: "directive", type: i1$2.ClrModalBody, selector: ".modal-body" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: DialogComponentOutletComponent, selector: "vdr-dialog-component-outlet", inputs: ["component"], outputs: ["create"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ModalDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-modal-dialog', template: "<div [dir]=\"direction$ | async\">\r\n    <clr-modal [clrModalOpen]=\"true\" (clrModalOpenChange)=\"modalOpenChange($event)\"\r\n        [clrModalClosable]=\"options?.closable\" [clrModalSize]=\"options?.size\"\r\n        [ngClass]=\"'modal-valign-' + (options?.verticalAlign || 'center')\">\r\n        <h3 class=\"modal-title\"><ng-container *ngTemplateOutlet=\"(titleTemplateRef$ | async)\"></ng-container></h3>\r\n        <div class=\"modal-body\">\r\n            <vdr-dialog-component-outlet [component]=\"childComponentType\"\r\n                (create)=\"onCreate($event)\"></vdr-dialog-component-outlet>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <ng-container *ngTemplateOutlet=\"(buttonsTemplateRef$ | async)\"></ng-container>\r\n        </div>\r\n    </clr-modal>\r\n</div>", styles: ["::ng-deep clr-modal.modal-valign-top .modal{justify-content:flex-start}::ng-deep clr-modal.modal-valign-bottom .modal{justify-content:flex-end}::ng-deep clr-modal .modal-dialog{display:flex}::ng-deep clr-modal .modal-content-wrapper{flex:1;display:flex}::ng-deep clr-modal .modal-dialog .modal-content{flex:1;display:flex;flex-direction:column}@media screen and (max-height: 700px){::ng-deep clr-modal .modal-dialog .modal-content{padding:.8rem}::ng-deep clr-modal .modal-header,::ng-deep clr-modal .modal-header--accessible{padding-bottom:.8rem}::ng-deep clr-modal .modal-footer{padding-top:.8rem}}.modal-body{display:flex;flex-direction:column;container-type:inline-size}\n"] }]
+        }], ctorParameters: () => [{ type: LocalizationService }] });
+
+/**
+ * A helper directive used to correctly embed the modal buttons in the {@link ModalDialogComponent}.
+ */
+class DialogButtonsDirective {
+    constructor(modal, templateRef) {
+        this.modal = modal;
+        this.templateRef = templateRef;
+    }
+    ngOnInit() {
+        // setTimeout due to https://github.com/angular/angular/issues/15634
+        setTimeout(() => this.modal.registerButtonsTemplate(this.templateRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogButtonsDirective, deps: [{ token: ModalDialogComponent }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: DialogButtonsDirective, selector: "[vdrDialogButtons]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogButtonsDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[vdrDialogButtons]' }]
+        }], ctorParameters: () => [{ type: ModalDialogComponent }, { type: i0.TemplateRef }] });
+
+/**
+ * A helper directive used to correctly embed the modal title in the {@link ModalDialogComponent}.
+ */
+class DialogTitleDirective {
+    constructor(modal, templateRef) {
+        this.modal = modal;
+        this.templateRef = templateRef;
+    }
+    ngOnInit() {
+        // setTimeout due to https://github.com/angular/angular/issues/15634
+        setTimeout(() => this.modal.registerTitleTemplate(this.templateRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogTitleDirective, deps: [{ token: ModalDialogComponent }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: DialogTitleDirective, selector: "[vdrDialogTitle]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogTitleDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[vdrDialogTitle]' }]
+        }], ctorParameters: () => [{ type: ModalDialogComponent }, { type: i0.TemplateRef }] });
+
+/**
+ * Used by ModalService.dialog() to host a generic configurable modal dialog.
+ */
+class SimpleDialogComponent {
+    constructor() {
+        this.title = '';
+        this.body = '';
+        this.translationVars = {};
+        this.buttons = [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SimpleDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SimpleDialogComponent, selector: "vdr-simple-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ title | translate:translationVars }}</ng-template>\r\n<div style=\"white-space: pre-wrap;\">{{ body | translate:translationVars }}</div>\r\n<ng-template vdrDialogButtons>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n        <button\r\n            class=\"button ml-2\"\r\n            [class.primary]=\"button.type === 'primary'\"\r\n            [class.danger]=\"button.type === 'danger'\"\r\n            (click)=\"resolveWith(button.returnValue)\"\r\n        >\r\n            {{ button.label | translate: (button.translationVars || {}) }}\r\n        </button>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "17.2.4", ngImport: i0, type: SimpleDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-simple-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ title | translate:translationVars }}</ng-template>\r\n<div style=\"white-space: pre-wrap;\">{{ body | translate:translationVars }}</div>\r\n<ng-template vdrDialogButtons>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n        <button\r\n            class=\"button ml-2\"\r\n            [class.primary]=\"button.type === 'primary'\"\r\n            [class.danger]=\"button.type === 'danger'\"\r\n            (click)=\"resolveWith(button.returnValue)\"\r\n        >\r\n            {{ button.label | translate: (button.translationVars || {}) }}\r\n        </button>\r\n    </ng-container>\r\n</ng-template>\r\n" }]
+        }] });
+
+/**
+ * @description
+ * This service is responsible for instantiating a ModalDialog component and
+ * embedding the specified component within.
+ *
+ * @docsCategory services
+ * @docsPage ModalService
+ * @docsWeight 0
+ */
+class ModalService {
+    constructor(overlayHostService) {
+        this.overlayHostService = overlayHostService;
+    }
+    /**
+     * @description
+     * Create a modal from a component. The component must implement the {@link Dialog} interface.
+     * Additionally, the component should include templates for the title and the buttons to be
+     * displayed in the modal dialog. See example:
+     *
+     * @example
+     * ```ts
+     * class MyDialog implements Dialog {
+     *  resolveWith: (result?: any) => void;
+     *
+     *  okay() {
+     *    doSomeWork().subscribe(result => {
+     *      this.resolveWith(result);
+     *    })
+     *  }
+     *
+     *  cancel() {
+     *    this.resolveWith(false);
+     *  }
+     * }
+     * ```
+     *
+     * @example
+     * ```html
+     * <ng-template vdrDialogTitle>Title of the modal</ng-template>
+     *
+     * <p>
+     *   My Content
+     * </p>
+     *
+     * <ng-template vdrDialogButtons>
+     *   <button type="button"
+     *           class="btn"
+     *           (click)="cancel()">Cancel</button>
+     *   <button type="button"
+     *           class="btn btn-primary"
+     *           (click)="okay()">Okay</button>
+     * </ng-template>
+     * ```
+     */
+    fromComponent(component, options) {
+        return from(this.overlayHostService.getHostView()).pipe(mergeMap(hostView => {
+            const modalComponentRef = hostView.createComponent(ModalDialogComponent);
+            const modalInstance = modalComponentRef.instance;
+            modalInstance.childComponentType = component;
+            modalInstance.options = options;
+            return new Observable(subscriber => {
+                modalInstance.closeModal = (result) => {
+                    modalComponentRef.destroy();
+                    subscriber.next(result);
+                    subscriber.complete();
+                };
+            });
+        }));
+    }
+    /**
+     * @description
+     * Displays a modal dialog with the provided title, body and buttons.
+     */
+    dialog(config) {
+        return this.fromComponent(SimpleDialogComponent, {
+            locals: config,
+            size: config.size,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ModalService, deps: [{ token: OverlayHostService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ModalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: OverlayHostService }] });
+
+class Alert {
+    constructor(config, context) {
+        this.config = config;
+        this.context = context;
+        this.hasRun$ = new BehaviorSubject(false);
+        this.data$ = new BehaviorSubject(undefined);
+        if (this.config.recheck) {
+            this.config.recheck(this.context).subscribe(() => this.runCheck());
+        }
+        this.activeAlert$ = combineLatest(this.data$, this.hasRun$).pipe(map(([data, hasRun]) => {
+            if (!data) {
+                return;
+            }
+            const isAlert = this.config.isAlert(data, this.context);
+            if (!isAlert) {
+                return;
+            }
+            return {
+                id: this.config.id,
+                runAction: () => {
+                    if (!hasRun) {
+                        this.config.action(data, this.context);
+                        this.hasRun$.next(true);
+                    }
+                },
+                hasRun,
+                label: this.config.label(data, this.context),
+            };
+        }));
+    }
+    get id() {
+        return this.config.id;
+    }
+    runCheck() {
+        const result = this.config.check(this.context);
+        if (result instanceof Promise) {
+            result.then(data => this.data$.next(data));
+        }
+        else if (isObservable(result)) {
+            result.pipe(take(1)).subscribe(data => this.data$.next(data));
+        }
+        else {
+            this.data$.next(result);
+        }
+        this.hasRun$.next(false);
+    }
+}
+class AlertsService {
+    constructor(permissionsService, injector, dataService, notificationService, modalService) {
+        this.permissionsService = permissionsService;
+        this.injector = injector;
+        this.dataService = dataService;
+        this.notificationService = notificationService;
+        this.modalService = modalService;
+        this.alertsMap = new Map();
+        this.configUpdated = new Subject();
+        const alerts$ = this.configUpdated.pipe(map(() => [...this.alertsMap.values()]), startWith([...this.alertsMap.values()]));
+        this.activeAlerts$ = alerts$.pipe(switchMap$1(() => {
+            const alerts = [...this.alertsMap.values()];
+            const isAlertStreams = alerts.map(alert => alert.activeAlert$);
+            return combineLatest(isAlertStreams);
+        }), map(alertStates => alertStates.filter(notNullOrUndefined)));
+    }
+    configureAlert(config) {
+        this.hasSufficientPermissions(config.requiredPermissions)
+            .pipe(first())
+            .subscribe(hasPermissions => {
+            if (hasPermissions) {
+                this.alertsMap.set(config.id, new Alert(config, this.createContext()));
+                this.configUpdated.next();
+            }
+        });
+    }
+    hasSufficientPermissions(permissions) {
+        if (!permissions || permissions.length === 0) {
+            return of(true);
+        }
+        return this.permissionsService.currentUserPermissions$.pipe(filter(permissions => permissions.length > 0), map(() => this.permissionsService.userHasPermissions(permissions)));
+    }
+    refresh(id) {
+        if (id) {
+            this.alertsMap.get(id)?.runCheck();
+        }
+        else {
+            this.alertsMap.forEach(config => config.runCheck());
+        }
+    }
+    createContext() {
+        return {
+            injector: this.injector,
+            dataService: this.dataService,
+            notificationService: this.notificationService,
+            modalService: this.modalService,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AlertsService, deps: [{ token: PermissionsService }, { token: i0.Injector }, { token: DataService }, { token: NotificationService }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AlertsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AlertsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: PermissionsService }, { type: i0.Injector }, { type: DataService }, { type: NotificationService }, { type: ModalService }] });
+
+/**
+ * @description
+ * Used for building dropdown menus.
+ *
+ * @example
+ * ```HTML
+ * <vdr-dropdown>
+ *   <button class="btn btn-outline" vdrDropdownTrigger>
+ *       <clr-icon shape="plus"></clr-icon>
+ *       Select type
+ *   </button>
+ *   <vdr-dropdown-menu vdrPosition="bottom-left">
+ *     <button
+ *       *ngFor="let typeName of allTypes"
+ *       type="button"
+ *       vdrDropdownItem
+ *       (click)="selectType(typeName)"
+ *     >
+ *       typeName
+ *     </button>
+ *   </vdr-dropdown-menu>
+ * </vdr-dropdown>
+ * ```
+ * @docsCategory components
+ */
+class DropdownComponent {
+    constructor() {
+        this.isOpen = false;
+        this.onOpenChangeCallbacks = [];
+        this.manualToggle = false;
+    }
+    onClick() {
+        if (!this.manualToggle) {
+            this.toggleOpen();
+        }
+    }
+    toggleOpen() {
+        this.isOpen = !this.isOpen;
+        this.onOpenChangeCallbacks.forEach(fn => fn(this.isOpen));
+    }
+    onOpenChange(callback) {
+        this.onOpenChangeCallbacks.push(callback);
+    }
+    setTriggerElement(elementRef) {
+        this.trigger = elementRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DropdownComponent, selector: "vdr-dropdown", inputs: { manualToggle: "manualToggle" }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\r\n" }]
+        }], propDecorators: { manualToggle: [{
+                type: Input
+            }] } });
+
+/**
+ * A dropdown menu modelled on the Clarity Dropdown component (https://v1.clarity.design/dropdowns).
+ *
+ * This was created because the Clarity implementation (at this time) does not handle edge detection. Instead
+ * we make use of the Angular CDK's Overlay module to manage the positioning.
+ *
+ * The API of this component (and its related Components & Directives) are based on the Clarity version,
+ * albeit only a subset which is currently used in this application.
+ */
 class DropdownMenuComponent {
     onEscapeKeydown(event) {
         if (this.dropdown.isOpen) {
@@ -7014,7 +7473,7 @@ class DropdownMenuComponent {
         inverted.overlayY = pos.overlayY === 'top' ? 'bottom' : 'top';
         return inverted;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DropdownMenuComponent, deps: [{ token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: DropdownComponent }, { token: LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DropdownMenuComponent, deps: [{ token: i1$3.Overlay }, { token: i0.ViewContainerRef }, { token: DropdownComponent }, { token: LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: { position: ["vdrPosition", "position"], customClasses: "customClasses" }, host: { listeners: { "window:keydown.escape": "onEscapeKeydown($event)", "window:keydown": "onArrowKey($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: `
         <ng-template #menu>
             <div [dir]="direction$ | async">
@@ -7052,7 +7511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
             </div>
         </ng-template>
     `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".clear-backdrop{background-color:#ff69b4}::ng-deep .dropdown-menu{max-width:initial}::ng-deep .dropdown-menu .dropdown-item{display:flex;align-items:center;padding:3px 24px}::ng-deep .dropdown-menu .dropdown-item clr-icon{margin-inline-end:3px}::ng-deep .dropdown-menu .dropdown-item:focus{outline:var(--color-dropdown-item-focus-outline) solid 1px;outline-offset:1px 0}.dropdown.open>.dropdown-menu{position:relative;top:0;height:100%;overflow-y:auto}:host{opacity:1;transition:opacity .3s}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: DropdownComponent }, { type: LocalizationService }], propDecorators: { position: [{
+        }], ctorParameters: () => [{ type: i1$3.Overlay }, { type: i0.ViewContainerRef }, { type: DropdownComponent }, { type: LocalizationService }], propDecorators: { position: [{
                 type: Input,
                 args: ['vdrPosition']
             }], customClasses: [{
@@ -7136,7 +7595,7 @@ class AlertsComponent {
         this.activeAlerts$ = alertsService.activeAlerts$;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AlertsComponent, deps: [{ token: AlertsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AlertsComponent, selector: "vdr-alerts", ngImport: i0, 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"], 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: "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: "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: "17.2.4", type: AlertsComponent, selector: "vdr-alerts", ngImport: i0, 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"], 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$2.ClrIconCustomTag, selector: "clr-icon" }, { 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: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AlertsComponent, decorators: [{
             type: Component,
@@ -7144,7 +7603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
         }], ctorParameters: () => [{ type: AlertsService }] });
 
 // Auto-generated by the set-version.js script.
-const ADMIN_UI_VERSION = '2.2.0-next.6';
+const ADMIN_UI_VERSION = '2.2.0-next.7';
 
 /* eslint-disable @angular-eslint/directive-selector */
 class FormFieldControlDirective {
@@ -7225,7 +7684,7 @@ class FormFieldComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FormFieldComponent, selector: "vdr-form-field", inputs: { label: "label", for: "for", tooltip: "tooltip", errors: "errors", readOnlyToggle: "readOnlyToggle" }, outputs: { readOnlyToggleChange: "readOnlyToggleChange" }, queries: [{ propertyName: "formFieldControl", first: true, predicate: FormFieldControlDirective, descendants: true, static: true }], ngImport: i0, template: "<div\r\n    class=\"form-group\"\r\n    [class.no-label]=\"!label\"\r\n    [class.clr-error]=\"formFieldControl?.formControlName?.invalid\"\r\n>\r\n    <label *ngIf=\"label\" [for]=\"for\" class=\"\">\r\n        {{ label }}\r\n    </label>\r\n    <div *ngIf=\"tooltip\" class=\"tooltip-text\">\r\n        {{ tooltip }}\r\n    </div>\r\n    <div\r\n        class=\"input-row\"\r\n        [class.has-toggle]=\"readOnlyToggle\"\r\n        [class.readonly]=\"isReadOnly\"\r\n        [class.invalid]=\"formFieldControl?.touched && !formFieldControl?.valid\"\r\n    >\r\n        <ng-content></ng-content>\r\n        <button\r\n            *ngIf=\"readOnlyToggle\"\r\n            type=\"button\"\r\n            [title]=\"'common.edit-field' | translate\"\r\n            class=\"btn edit-button\"\r\n            [class.enabled]=\"!isReadOnly\"\r\n            (click)=\"setReadOnly(!isReadOnly)\"\r\n        >\r\n            <clr-icon shape=\"edit\"></clr-icon>\r\n        </button>\r\n    </div>\r\n    <div class=\"error-message\" *ngIf=\"getErrorMessage()\">{{ getErrorMessage() }}</div>\r\n</div>\r\n", styles: [":host{display:block}.form-group label{font-size:var(--font-size-sm);color:var(--color-weight-800);margin-bottom:4px;display:inline-block}.tooltip-text{font-size:var(--font-size-xs);line-height:var(--font-size-sm);margin-bottom:4px}.input-row{display:flex}::ng-deep .input-row input:not([type=checkbox]),::ng-deep .input-row select,::ng-deep .input-row textarea,::ng-deep .input-row ng-select,::ng-deep .input-row vdr-zone-selector,::ng-deep .input-row vdr-facet-value-selector,::ng-deep .input-row vdr-option-value-input,::ng-deep .input-row vdr-affixed-input,::ng-deep .input-row vdr-currency-input,::ng-deep .input-row vdr-rich-text-editor{width:100%}::ng-deep .input-row.readonly input:not([type=checkbox])[readonly],::ng-deep .input-row.readonly select[readonly],::ng-deep .input-row.readonly textarea[readonly],::ng-deep .input-row.readonly ng-select[readonly],::ng-deep .input-row.readonly vdr-zone-selector[readonly],::ng-deep .input-row.readonly vdr-facet-value-selector[readonly],::ng-deep .input-row.readonly vdr-option-value-input[readonly],::ng-deep .input-row.readonly vdr-affixed-input[readonly],::ng-deep .input-row.readonly vdr-currency-input[readonly],::ng-deep .input-row.readonly vdr-rich-text-editor[readonly]{cursor:not-allowed}.input-row input:not([type=checkbox]),.input-row select,.input-row textarea{width:100%}::ng-deep .input-row.has-toggle input:not([type=checkbox]):not([type=radio]){border-start-end-radius:0!important;border-end-end-radius:0!important}.edit-button{border:1px solid var(--color-weight-200);border-radius:var(--border-radius-input);border-inline-start-width:0;border-start-start-radius:0;border-end-start-radius:0}.edit-button.enabled{color:var(--color-primary-700);background-color:var(--color-primary-100)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FormFieldComponent, selector: "vdr-form-field", inputs: { label: "label", for: "for", tooltip: "tooltip", errors: "errors", readOnlyToggle: "readOnlyToggle" }, outputs: { readOnlyToggleChange: "readOnlyToggleChange" }, queries: [{ propertyName: "formFieldControl", first: true, predicate: FormFieldControlDirective, descendants: true, static: true }], ngImport: i0, template: "<div\r\n    class=\"form-group\"\r\n    [class.no-label]=\"!label\"\r\n    [class.clr-error]=\"formFieldControl?.formControlName?.invalid\"\r\n>\r\n    <label *ngIf=\"label\" [for]=\"for\" class=\"\">\r\n        {{ label }}\r\n    </label>\r\n    <div *ngIf=\"tooltip\" class=\"tooltip-text\">\r\n        {{ tooltip }}\r\n    </div>\r\n    <div\r\n        class=\"input-row\"\r\n        [class.has-toggle]=\"readOnlyToggle\"\r\n        [class.readonly]=\"isReadOnly\"\r\n        [class.invalid]=\"formFieldControl?.touched && !formFieldControl?.valid\"\r\n    >\r\n        <ng-content></ng-content>\r\n        <button\r\n            *ngIf=\"readOnlyToggle\"\r\n            type=\"button\"\r\n            [title]=\"'common.edit-field' | translate\"\r\n            class=\"btn edit-button\"\r\n            [class.enabled]=\"!isReadOnly\"\r\n            (click)=\"setReadOnly(!isReadOnly)\"\r\n        >\r\n            <clr-icon shape=\"edit\"></clr-icon>\r\n        </button>\r\n    </div>\r\n    <div class=\"error-message\" *ngIf=\"getErrorMessage()\">{{ getErrorMessage() }}</div>\r\n</div>\r\n", styles: [":host{display:block}.form-group label{font-size:var(--font-size-sm);color:var(--color-weight-800);margin-bottom:4px;display:inline-block}.tooltip-text{font-size:var(--font-size-xs);line-height:var(--font-size-sm);margin-bottom:4px}.input-row{display:flex}::ng-deep .input-row input:not([type=checkbox]),::ng-deep .input-row select,::ng-deep .input-row textarea,::ng-deep .input-row ng-select,::ng-deep .input-row vdr-zone-selector,::ng-deep .input-row vdr-facet-value-selector,::ng-deep .input-row vdr-option-value-input,::ng-deep .input-row vdr-affixed-input,::ng-deep .input-row vdr-currency-input,::ng-deep .input-row vdr-rich-text-editor{width:100%}::ng-deep .input-row.readonly input:not([type=checkbox])[readonly],::ng-deep .input-row.readonly select[readonly],::ng-deep .input-row.readonly textarea[readonly],::ng-deep .input-row.readonly ng-select[readonly],::ng-deep .input-row.readonly vdr-zone-selector[readonly],::ng-deep .input-row.readonly vdr-facet-value-selector[readonly],::ng-deep .input-row.readonly vdr-option-value-input[readonly],::ng-deep .input-row.readonly vdr-affixed-input[readonly],::ng-deep .input-row.readonly vdr-currency-input[readonly],::ng-deep .input-row.readonly vdr-rich-text-editor[readonly]{cursor:not-allowed}.input-row input:not([type=checkbox]),.input-row select,.input-row textarea{width:100%}::ng-deep .input-row.has-toggle input:not([type=checkbox]):not([type=radio]){border-start-end-radius:0!important;border-end-end-radius:0!important}.edit-button{border:1px solid var(--color-weight-200);border-radius:var(--border-radius-input);border-inline-start-width:0;border-start-start-radius:0;border-end-start-radius:0}.edit-button.enabled{color:var(--color-primary-700);background-color:var(--color-primary-100)}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -7247,134 +7706,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 args: [FormFieldControlDirective, { static: true }]
             }] } });
 
-/**
- * A helper component used to embed a component instance into the {@link ModalDialogComponent}
- */
-class DialogComponentOutletComponent {
-    constructor(viewContainerRef) {
-        this.viewContainerRef = viewContainerRef;
-        this.create = new EventEmitter();
-    }
-    ngOnInit() {
-        const componentRef = this.viewContainerRef.createComponent(this.component);
-        this.create.emit(componentRef.instance);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogComponentOutletComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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: "17.2.4", ngImport: i0, type: DialogComponentOutletComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'vdr-dialog-component-outlet',
-                    template: ``,
-                }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { component: [{
-                type: Input
-            }], create: [{
-                type: Output
-            }] } });
-
-/**
- * This component should only be instantiated dynamically by the ModalService. It should not be used
- * directly in templates. See {@link ModalService.fromComponent} method for more detail.
- */
-class ModalDialogComponent {
-    /**
-     *
-     */
-    constructor(localizationService) {
-        this.localizationService = localizationService;
-        this.titleTemplateRef$ = new Subject();
-        this.buttonsTemplateRef$ = new Subject();
-    }
-    ngOnInit() {
-        this.direction$ = this.localizationService.direction$;
-    }
-    /**
-     * This callback is invoked when the childComponentType is instantiated in the
-     * template by the {@link DialogComponentOutletComponent}.
-     * Once we have the instance, we can set the resolveWith function and any
-     * locals which were specified in the config.
-     */
-    onCreate(componentInstance) {
-        componentInstance.resolveWith = (result) => {
-            this.closeModal(result);
-        };
-        if (this.options && this.options.locals) {
-            // eslint-disable-next-line
-            for (const key in this.options.locals) {
-                componentInstance[key] = this.options.locals[key];
-            }
-        }
-    }
-    /**
-     * This should be called by the {@link DialogTitleDirective} only
-     */
-    registerTitleTemplate(titleTemplateRef) {
-        this.titleTemplateRef$.next(titleTemplateRef);
-    }
-    /**
-     * This should be called by the {@link DialogButtonsDirective} only
-     */
-    registerButtonsTemplate(buttonsTemplateRef) {
-        this.buttonsTemplateRef$.next(buttonsTemplateRef);
-    }
-    /**
-     * Called when the modal is closed by clicking the X or the mask.
-     */
-    modalOpenChange(status) {
-        if (status === false) {
-            this.closeModal();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ModalDialogComponent, deps: [{ token: LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ModalDialogComponent, selector: "vdr-modal-dialog", ngImport: i0, template: "<div [dir]=\"direction$ | async\">\r\n    <clr-modal [clrModalOpen]=\"true\" (clrModalOpenChange)=\"modalOpenChange($event)\"\r\n        [clrModalClosable]=\"options?.closable\" [clrModalSize]=\"options?.size\"\r\n        [ngClass]=\"'modal-valign-' + (options?.verticalAlign || 'center')\">\r\n        <h3 class=\"modal-title\"><ng-container *ngTemplateOutlet=\"(titleTemplateRef$ | async)\"></ng-container></h3>\r\n        <div class=\"modal-body\">\r\n            <vdr-dialog-component-outlet [component]=\"childComponentType\"\r\n                (create)=\"onCreate($event)\"></vdr-dialog-component-outlet>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <ng-container *ngTemplateOutlet=\"(buttonsTemplateRef$ | async)\"></ng-container>\r\n        </div>\r\n    </clr-modal>\r\n</div>", styles: ["::ng-deep clr-modal.modal-valign-top .modal{justify-content:flex-start}::ng-deep clr-modal.modal-valign-bottom .modal{justify-content:flex-end}::ng-deep clr-modal .modal-dialog{display:flex}::ng-deep clr-modal .modal-content-wrapper{flex:1;display:flex}::ng-deep clr-modal .modal-dialog .modal-content{flex:1;display:flex;flex-direction:column}@media screen and (max-height: 700px){::ng-deep clr-modal .modal-dialog .modal-content{padding:.8rem}::ng-deep clr-modal .modal-header,::ng-deep clr-modal .modal-header--accessible{padding-bottom:.8rem}::ng-deep clr-modal .modal-footer{padding-top:.8rem}}.modal-body{display:flex;flex-direction:column;container-type:inline-size}\n"], dependencies: [{ kind: "component", type: i1$3.ClrModal, selector: "clr-modal", inputs: ["clrModalOpen", "clrModalClosable", "clrModalCloseButtonAriaLabel", "clrModalSize", "clrModalStaticBackdrop", "clrModalSkipAnimation", "clrModalPreventClose", "clrModalLabelledById"], outputs: ["clrModalOpenChange", "clrModalAlternateClose"] }, { kind: "directive", type: i1$3.ClrModalBody, selector: ".modal-body" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: DialogComponentOutletComponent, selector: "vdr-dialog-component-outlet", inputs: ["component"], outputs: ["create"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ModalDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vdr-modal-dialog', template: "<div [dir]=\"direction$ | async\">\r\n    <clr-modal [clrModalOpen]=\"true\" (clrModalOpenChange)=\"modalOpenChange($event)\"\r\n        [clrModalClosable]=\"options?.closable\" [clrModalSize]=\"options?.size\"\r\n        [ngClass]=\"'modal-valign-' + (options?.verticalAlign || 'center')\">\r\n        <h3 class=\"modal-title\"><ng-container *ngTemplateOutlet=\"(titleTemplateRef$ | async)\"></ng-container></h3>\r\n        <div class=\"modal-body\">\r\n            <vdr-dialog-component-outlet [component]=\"childComponentType\"\r\n                (create)=\"onCreate($event)\"></vdr-dialog-component-outlet>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <ng-container *ngTemplateOutlet=\"(buttonsTemplateRef$ | async)\"></ng-container>\r\n        </div>\r\n    </clr-modal>\r\n</div>", styles: ["::ng-deep clr-modal.modal-valign-top .modal{justify-content:flex-start}::ng-deep clr-modal.modal-valign-bottom .modal{justify-content:flex-end}::ng-deep clr-modal .modal-dialog{display:flex}::ng-deep clr-modal .modal-content-wrapper{flex:1;display:flex}::ng-deep clr-modal .modal-dialog .modal-content{flex:1;display:flex;flex-direction:column}@media screen and (max-height: 700px){::ng-deep clr-modal .modal-dialog .modal-content{padding:.8rem}::ng-deep clr-modal .modal-header,::ng-deep clr-modal .modal-header--accessible{padding-bottom:.8rem}::ng-deep clr-modal .modal-footer{padding-top:.8rem}}.modal-body{display:flex;flex-direction:column;container-type:inline-size}\n"] }]
-        }], ctorParameters: () => [{ type: LocalizationService }] });
-
-/**
- * A helper directive used to correctly embed the modal buttons in the {@link ModalDialogComponent}.
- */
-class DialogButtonsDirective {
-    constructor(modal, templateRef) {
-        this.modal = modal;
-        this.templateRef = templateRef;
-    }
-    ngOnInit() {
-        // setTimeout due to https://github.com/angular/angular/issues/15634
-        setTimeout(() => this.modal.registerButtonsTemplate(this.templateRef));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogButtonsDirective, deps: [{ token: ModalDialogComponent }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: DialogButtonsDirective, selector: "[vdrDialogButtons]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogButtonsDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[vdrDialogButtons]' }]
-        }], ctorParameters: () => [{ type: ModalDialogComponent }, { type: i0.TemplateRef }] });
-
-/**
- * A helper directive used to correctly embed the modal title in the {@link ModalDialogComponent}.
- */
-class DialogTitleDirective {
-    constructor(modal, templateRef) {
-        this.modal = modal;
-        this.templateRef = templateRef;
-    }
-    ngOnInit() {
-        // setTimeout due to https://github.com/angular/angular/issues/15634
-        setTimeout(() => this.modal.registerTitleTemplate(this.templateRef));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogTitleDirective, deps: [{ token: ModalDialogComponent }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: DialogTitleDirective, selector: "[vdrDialogTitle]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogTitleDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[vdrDialogTitle]' }]
-        }], ctorParameters: () => [{ type: ModalDialogComponent }, { type: i0.TemplateRef }] });
-
 class LabeledDataComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LabeledDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: { label: "label" }, ngImport: i0, template: "<div class=\"label-title\">{{ label }}</div>\r\n<div class=\"content\">\r\n    <ng-content></ng-content>\r\n</div>\r\n", styles: [":host{display:block;margin-bottom:6px}.label-title{font-size:12px;color:var(--color-text-300);line-height:12px;margin-bottom:-4px}.content{display:inline-block;line-height:var(--font-size-sm);margin-top:6px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -7933,124 +8264,17 @@ class AuthService {
         return defaultChannel || userChannels[0];
     }
     setChannelToken(userChannels) {
-        this.localStorageService.set('activeChannelToken', this.getActiveChannel(userChannels).token);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AuthService, deps: [{ token: LocalStorageService }, { token: DataService }, { token: ServerConfigService }, { token: PermissionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AuthService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AuthService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: LocalStorageService }, { type: DataService }, { type: ServerConfigService }, { type: PermissionsService }] });
-
-/**
- * Used by ModalService.dialog() to host a generic configurable modal dialog.
- */
-class SimpleDialogComponent {
-    constructor() {
-        this.title = '';
-        this.body = '';
-        this.translationVars = {};
-        this.buttons = [];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SimpleDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SimpleDialogComponent, selector: "vdr-simple-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ title | translate:translationVars }}</ng-template>\r\n<div style=\"white-space: pre-wrap;\">{{ body | translate:translationVars }}</div>\r\n<ng-template vdrDialogButtons>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n        <button\r\n            class=\"button ml-2\"\r\n            [class.primary]=\"button.type === 'primary'\"\r\n            [class.danger]=\"button.type === 'danger'\"\r\n            (click)=\"resolveWith(button.returnValue)\"\r\n        >\r\n            {{ button.label | translate: (button.translationVars || {}) }}\r\n        </button>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "17.2.4", ngImport: i0, type: SimpleDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vdr-simple-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ title | translate:translationVars }}</ng-template>\r\n<div style=\"white-space: pre-wrap;\">{{ body | translate:translationVars }}</div>\r\n<ng-template vdrDialogButtons>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n        <button\r\n            class=\"button ml-2\"\r\n            [class.primary]=\"button.type === 'primary'\"\r\n            [class.danger]=\"button.type === 'danger'\"\r\n            (click)=\"resolveWith(button.returnValue)\"\r\n        >\r\n            {{ button.label | translate: (button.translationVars || {}) }}\r\n        </button>\r\n    </ng-container>\r\n</ng-template>\r\n" }]
-        }] });
-
-/**
- * @description
- * This service is responsible for instantiating a ModalDialog component and
- * embedding the specified component within.
- *
- * @docsCategory services
- * @docsPage ModalService
- * @docsWeight 0
- */
-class ModalService {
-    constructor(overlayHostService) {
-        this.overlayHostService = overlayHostService;
-    }
-    /**
-     * @description
-     * Create a modal from a component. The component must implement the {@link Dialog} interface.
-     * Additionally, the component should include templates for the title and the buttons to be
-     * displayed in the modal dialog. See example:
-     *
-     * @example
-     * ```HTML
-     * class MyDialog implements Dialog {
-     *  resolveWith: (result?: any) => void;
-     *
-     *  okay() {
-     *    doSomeWork().subscribe(result => {
-     *      this.resolveWith(result);
-     *    })
-     *  }
-     *
-     *  cancel() {
-     *    this.resolveWith(false);
-     *  }
-     * }
-     * ```
-     *
-     * @example
-     * ```HTML
-     * <ng-template vdrDialogTitle>Title of the modal</ng-template>
-     *
-     * <p>
-     *   My Content
-     * </p>
-     *
-     * <ng-template vdrDialogButtons>
-     *   <button type="button"
-     *           class="btn"
-     *           (click)="cancel()">Cancel</button>
-     *   <button type="button"
-     *           class="btn btn-primary"
-     *           (click)="okay()">Okay</button>
-     * </ng-template>
-     * ```
-     */
-    fromComponent(component, options) {
-        return from(this.overlayHostService.getHostView()).pipe(mergeMap(hostView => {
-            const modalComponentRef = hostView.createComponent(ModalDialogComponent);
-            const modalInstance = modalComponentRef.instance;
-            modalInstance.childComponentType = component;
-            modalInstance.options = options;
-            return new Observable(subscriber => {
-                modalInstance.closeModal = (result) => {
-                    modalComponentRef.destroy();
-                    subscriber.next(result);
-                    subscriber.complete();
-                };
-            });
-        }));
-    }
-    /**
-     * @description
-     * Displays a modal dialog with the provided title, body and buttons.
-     */
-    dialog(config) {
-        return this.fromComponent(SimpleDialogComponent, {
-            locals: config,
-            size: config.size,
-        });
+        this.localStorageService.set('activeChannelToken', this.getActiveChannel(userChannels).token);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ModalService, deps: [{ token: OverlayHostService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ModalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AuthService, deps: [{ token: LocalStorageService }, { token: DataService }, { token: ServerConfigService }, { token: PermissionsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AuthService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AuthService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: OverlayHostService }] });
+        }], ctorParameters: () => [{ type: LocalStorageService }, { type: DataService }, { type: ServerConfigService }, { type: PermissionsService }] });
 
 class BreadcrumbService {
     constructor(router, route, dataService) {
@@ -8279,7 +8503,7 @@ class ThemeSwitcherComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ThemeSwitcherComponent, deps: [{ token: DataService }, { token: LocalStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ThemeSwitcherComponent, selector: "vdr-theme-switcher", host: { listeners: { "click": "onHostClick($event)", "keydown.enter": "onHostClick($event)" } }, ngImport: i0, template: "<button *ngIf=\"activeTheme$ | async as activeTheme\" class=\"theme-toggle\">\r\n    <span>{{ 'common.theme' | translate }}</span>\r\n    <div class=\"theme-icon default\" [class.active]=\"activeTheme === 'default'\">\r\n        <clr-icon shape=\"sun\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n    <div class=\"theme-icon dark\" [class.active]=\"activeTheme === 'dark'\">\r\n        <clr-icon shape=\"moon\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n</button>\r\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center}button.theme-toggle{position:relative;padding-inline-start:20px;border:none;background:transparent;color:var(--color-text-200);cursor:pointer}.theme-icon{position:absolute;top:0;left:4px;z-index:0;opacity:.2;color:var(--color-text-300);transition:opacity .3s,left .3s}.theme-icon.active{z-index:1;left:-2px;opacity:1}.theme-icon.default.active{color:#d6ae3f}.theme-icon.dark.active{color:#ffdf3a}:host-context([dir=rtl]) .theme-icon{left:auto;right:6px}:host-context([dir=rtl]) .theme-icon.active{left:auto;right:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ThemeSwitcherComponent, selector: "vdr-theme-switcher", host: { listeners: { "click": "onHostClick($event)", "keydown.enter": "onHostClick($event)" } }, ngImport: i0, template: "<button *ngIf=\"activeTheme$ | async as activeTheme\" class=\"theme-toggle\">\r\n    <span>{{ 'common.theme' | translate }}</span>\r\n    <div class=\"theme-icon default\" [class.active]=\"activeTheme === 'default'\">\r\n        <clr-icon shape=\"sun\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n    <div class=\"theme-icon dark\" [class.active]=\"activeTheme === 'dark'\">\r\n        <clr-icon shape=\"moon\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n</button>\r\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center}button.theme-toggle{position:relative;padding-inline-start:20px;border:none;background:transparent;color:var(--color-text-200);cursor:pointer}.theme-icon{position:absolute;top:0;left:4px;z-index:0;opacity:.2;color:var(--color-text-300);transition:opacity .3s,left .3s}.theme-icon.active{z-index:1;left:-2px;opacity:1}.theme-icon.default.active{color:#d6ae3f}.theme-icon.dark.active{color:#ffdf3a}:host-context([dir=rtl]) .theme-icon{left:auto;right:6px}:host-context([dir=rtl]) .theme-icon.active{left:auto;right:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ThemeSwitcherComponent, decorators: [{
             type: Component,
@@ -8300,7 +8524,7 @@ class UserMenuComponent {
         this.selectUiLanguage = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: UserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: UserMenuComponent, selector: "vdr-user-menu", inputs: { userName: "userName", availableLanguages: "availableLanguages", uiLanguageAndLocale: "uiLanguageAndLocale" }, outputs: { logOut: "logOut", selectUiLanguage: "selectUiLanguage" }, ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"trigger user-menu-btn\" vdrDropdownTrigger>\r\n        <div class=\"user-circle\">\r\n            <clr-icon shape=\"user\" size=\"16\"></clr-icon>\r\n        </div>\r\n        <span class=\"user-name\">{{ userName }}</span>\r\n        <clr-icon class=\"md:hidden\" shape=\"caret down\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <a [routerLink]=\"['/settings', 'profile']\" vdrDropdownItem tabindex=\"0\">\r\n            <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon> {{ 'settings.profile' | translate }}\r\n        </a>\r\n        <ng-container *ngIf=\"1 < availableLanguages.length\">\r\n            <button\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"selectUiLanguage.emit()\"\r\n                [title]=\"'common.select-display-language' | translate\"\r\n            >\r\n                <clr-icon shape=\"language\"></clr-icon> {{ uiLanguageAndLocale?.[0] | localeLanguageName }}\r\n            </button>\r\n        </ng-container>\r\n        <vdr-theme-switcher vdrDropdownItem tabindex=\"0\"></vdr-theme-switcher>\r\n        <div class=\"dropdown-divider\"></div>\r\n        <button type=\"button\" vdrDropdownItem (click)=\"logOut.emit()\">\r\n            <clr-icon shape=\"logout\"></clr-icon> {{ 'common.log-out' | translate }}\r\n        </button>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:flex;align-items:center;height:2.5rem;width:100%;padding:var(--space-unit);padding-inline-start:0}@media screen and (max-width: 992px){:host{margin:0}}:host vdr-dropdown{width:100%}.user-menu-btn{display:flex;align-items:center;justify-content:space-between;border:none;font-size:var(--font-size-sm);width:100%;line-height:100%;height:40px;color:var(--color-text-100);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);cursor:pointer}.user-menu-btn:hover{color:var(--color-text-200)}@media screen and (min-width: 992px){.user-menu-btn{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5)}}.user-circle{display:inline-flex;align-items:center;justify-content:center;border-radius:100%;background-color:var(--color-primary-600);background-image:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-primary-700) 100%);width:24px;height:24px;margin-inline-end:6px}@media screen and (max-width: 992px){.user-circle{margin-inline-end:0}}.user-circle clr-icon{color:var(--color-text-inverse)}.user-name{margin-inline-end:var(--space-unit);overflow:hidden;max-width:100px;text-overflow:ellipsis}@media screen and (max-width: 992px){.user-name{display:none}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: ThemeSwitcherComponent, selector: "vdr-theme-switcher" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleLanguageNamePipe, name: "localeLanguageName" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: UserMenuComponent, selector: "vdr-user-menu", inputs: { userName: "userName", availableLanguages: "availableLanguages", uiLanguageAndLocale: "uiLanguageAndLocale" }, outputs: { logOut: "logOut", selectUiLanguage: "selectUiLanguage" }, ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"trigger user-menu-btn\" vdrDropdownTrigger>\r\n        <div class=\"user-circle\">\r\n            <clr-icon shape=\"user\" size=\"16\"></clr-icon>\r\n        </div>\r\n        <span class=\"user-name\">{{ userName }}</span>\r\n        <clr-icon class=\"md:hidden\" shape=\"caret down\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <a [routerLink]=\"['/settings', 'profile']\" vdrDropdownItem tabindex=\"0\">\r\n            <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon> {{ 'settings.profile' | translate }}\r\n        </a>\r\n        <ng-container *ngIf=\"1 < availableLanguages.length\">\r\n            <button\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"selectUiLanguage.emit()\"\r\n                [title]=\"'common.select-display-language' | translate\"\r\n            >\r\n                <clr-icon shape=\"language\"></clr-icon> {{ uiLanguageAndLocale?.[0] | localeLanguageName }}\r\n            </button>\r\n        </ng-container>\r\n        <vdr-theme-switcher vdrDropdownItem tabindex=\"0\"></vdr-theme-switcher>\r\n        <div class=\"dropdown-divider\"></div>\r\n        <button type=\"button\" vdrDropdownItem (click)=\"logOut.emit()\">\r\n            <clr-icon shape=\"logout\"></clr-icon> {{ 'common.log-out' | translate }}\r\n        </button>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:flex;align-items:center;height:2.5rem;width:100%;padding:var(--space-unit);padding-inline-start:0}@media screen and (max-width: 992px){:host{margin:0}}:host vdr-dropdown{width:100%}.user-menu-btn{display:flex;align-items:center;justify-content:space-between;border:none;font-size:var(--font-size-sm);width:100%;line-height:100%;height:40px;color:var(--color-text-100);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);cursor:pointer}.user-menu-btn:hover{color:var(--color-text-200)}@media screen and (min-width: 992px){.user-menu-btn{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5)}}.user-circle{display:inline-flex;align-items:center;justify-content:center;border-radius:100%;background-color:var(--color-primary-600);background-image:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-primary-700) 100%);width:24px;height:24px;margin-inline-end:6px}@media screen and (max-width: 992px){.user-circle{margin-inline-end:0}}.user-circle clr-icon{color:var(--color-text-inverse)}.user-name{margin-inline-end:var(--space-unit);overflow:hidden;max-width:100px;text-overflow:ellipsis}@media screen and (max-width: 992px){.user-name{display:none}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: ThemeSwitcherComponent, selector: "vdr-theme-switcher" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleLanguageNamePipe, name: "localeLanguageName" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: UserMenuComponent, decorators: [{
             type: Component,
@@ -8487,362 +8711,132 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
 
 /**
  * Returns the location of the server, e.g. "http://localhost:3000"
- */
-function getServerLocation() {
-    const { apiHost, apiPort, adminApiPath, tokenMethod } = getAppConfig();
-    const host = apiHost === 'auto' ? `${location.protocol}//${location.hostname}` : apiHost;
-    const port = apiPort
-        ? apiPort === 'auto'
-            ? location.port === ''
-                ? ''
-                : `:${location.port}`
-            : `:${apiPort}`
-        : '';
-    return `${host}${port}`;
-}
-
-class HealthCheckService {
-    constructor(httpClient) {
-        this.httpClient = httpClient;
-        this.pollingDelayMs = 60 * 1000;
-        this._refresh = new Subject();
-        this.healthCheckEndpoint = getServerLocation() + '/health';
-        const refresh$ = this._refresh.pipe(throttleTime(1000));
-        const result$ = merge(timer(0, this.pollingDelayMs), refresh$).pipe(switchMap(() => this.checkHealth()), shareReplay(1));
-        this.status$ = result$.pipe(map(res => res.status));
-        this.details$ = result$.pipe(map(res => Object.keys(res.details).map(key => ({ key, result: res.details[key] }))));
-        this.lastCheck$ = result$.pipe(map(res => res.lastChecked));
-    }
-    refresh() {
-        this._refresh.next();
-    }
-    checkHealth() {
-        return this.httpClient.get(this.healthCheckEndpoint).pipe(catchError(err => of(err.error)), map(res => ({ ...res, lastChecked: new Date() })));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HealthCheckService, deps: [{ token: i1$5.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HealthCheckService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HealthCheckService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1$5.HttpClient }] });
-
-class JobQueueService {
-    constructor(dataService) {
-        this.dataService = dataService;
-        this.updateJob$ = new Subject();
-        this.onCompleteHandlers = new Map();
-        this.checkForJobs();
-        this.activeJobs$ = this.updateJob$.pipe(scan((jobMap, job) => this.handleJob(jobMap, job), new Map()), map(jobMap => Array.from(jobMap.values())), debounceTime(500), shareReplay(1));
-        this.subscription = this.activeJobs$
-            .pipe(switchMap(jobs => {
-            if (jobs.length) {
-                return interval(2500).pipe(mapTo(jobs));
-            }
-            else {
-                return of([]);
-            }
-        }))
-            .subscribe(jobs => {
-            if (jobs.length) {
-                this.dataService.settings.pollJobs(jobs.map(j => j.id)).single$.subscribe(data => {
-                    data.jobsById.forEach(job => {
-                        this.updateJob$.next(job);
-                    });
-                });
-            }
-        });
-    }
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
-    /**
-     * After a given delay, checks the server for any active jobs.
-     */
-    checkForJobs(delay = 1000) {
-        timer(delay)
-            .pipe(switchMap(() => this.dataService.client.userStatus().mapSingle(data => data.userStatus)), switchMap(userStatus => {
-            if (userStatus.permissions.includes(Permission.ReadSettings) && userStatus.isLoggedIn) {
-                return this.dataService.settings.getRunningJobs().single$;
-            }
-            else {
-                return EMPTY;
-            }
-        }))
-            .subscribe(data => data.jobs.items.forEach(job => this.updateJob$.next(job)));
-    }
-    addJob(jobId, onComplete) {
-        this.dataService.settings.getJob(jobId).single$.subscribe(({ job }) => {
-            if (job) {
-                this.updateJob$.next(job);
-                if (onComplete) {
-                    this.onCompleteHandlers.set(jobId, onComplete);
-                }
-            }
-        });
-    }
-    handleJob(jobMap, job) {
-        switch (job.state) {
-            case JobState.RUNNING:
-            case JobState.PENDING:
-                jobMap.set(job.id, job);
-                break;
-            case JobState.COMPLETED:
-            case JobState.FAILED:
-            case JobState.CANCELLED:
-                jobMap.delete(job.id);
-                const handler = this.onCompleteHandlers.get(job.id);
-                if (handler) {
-                    handler(job);
-                    this.onCompleteHandlers.delete(job.id);
-                }
-                break;
-        }
-        return jobMap;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: JobQueueService, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: JobQueueService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: JobQueueService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: DataService }] });
-
-class NotificationComponent {
-    /**
-     *
-     */
-    constructor(localizationService) {
-        this.localizationService = localizationService;
-        this.offsetTop = 0;
-        this.message = '';
-        this.translationVars = {};
-        this.type = 'info';
-        this.isVisible = true;
-        this.onClickFn = () => {
-            /* */
-        };
-    }
-    ngOnInit() {
-        this.direction$ = this.localizationService.direction$;
-    }
-    registerOnClickFn(fn) {
-        this.onClickFn = fn;
-    }
-    onClick() {
-        if (this.isVisible) {
-            this.onClickFn();
-        }
-    }
-    /**
-     * Fade out the toast. When promise resolves, toast is invisible and
-     * can be removed.
-     */
-    fadeOut() {
-        this.isVisible = false;
-        return new Promise(resolve => setTimeout(resolve, 1000));
-    }
-    /**
-     * Returns the height of the toast element in px.
-     */
-    getHeight() {
-        if (!this.wrapper) {
-            return 0;
-        }
-        const el = this.wrapper.nativeElement;
-        return el.getBoundingClientRect().height;
-    }
-    getIcon() {
-        switch (this.type) {
-            case 'info':
-                return 'info-circle';
-            case 'success':
-                return 'check-circle';
-            case 'error':
-                return 'exclamation-circle';
-            case 'warning':
-                return 'exclamation-triangle';
-        }
-    }
-    stringifyMessage(message) {
-        if (typeof message === 'string') {
-            return message;
-        }
-        else {
-            return JSON.stringify(message, null, 2);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NotificationComponent, deps: [{ token: LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: NotificationComponent, selector: "vdr-notification", host: { listeners: { "click": "onClick()" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }], ngImport: i0, template: "<div [dir]=\"direction$ | async\" class=\"notification-wrapper\" #wrapper [style.top.px]=\"offsetTop\" [ngClass]=\"{\r\n            visible: isVisible,\r\n            info: type === 'info',\r\n            success: type === 'success',\r\n            error: type === 'error',\r\n            warning: type === 'warning'\r\n        }\">\r\n    <clr-icon [attr.shape]=\"getIcon()\" size=\"24\"></clr-icon>\r\n    {{ stringifyMessage(message) | translate: translationVars }}\r\n</div>", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:.95}}:host{position:relative;z-index:1050}:host>.notification-wrapper{display:block;position:fixed;z-index:1001;top:0;right:10px;border-radius:3px;max-width:98vw;word-wrap:break-word;padding:10px;background-color:var(--color-grey-500);color:#fff;transition:opacity 1s,top .3s;opacity:0;white-space:pre-line}:host>.notification-wrapper.success{background-color:var(--color-success-800)}:host>.notification-wrapper.error{background-color:var(--color-error-800)}:host>.notification-wrapper.warning{background-color:var(--color-warning-800)}:host>.notification-wrapper.info{background-color:var(--color-weight-500)}:host>.notification-wrapper.visible{opacity:.95;animation:fadeIn .3s .3s backwards}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NotificationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vdr-notification', template: "<div [dir]=\"direction$ | async\" class=\"notification-wrapper\" #wrapper [style.top.px]=\"offsetTop\" [ngClass]=\"{\r\n            visible: isVisible,\r\n            info: type === 'info',\r\n            success: type === 'success',\r\n            error: type === 'error',\r\n            warning: type === 'warning'\r\n        }\">\r\n    <clr-icon [attr.shape]=\"getIcon()\" size=\"24\"></clr-icon>\r\n    {{ stringifyMessage(message) | translate: translationVars }}\r\n</div>", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:.95}}:host{position:relative;z-index:1050}:host>.notification-wrapper{display:block;position:fixed;z-index:1001;top:0;right:10px;border-radius:3px;max-width:98vw;word-wrap:break-word;padding:10px;background-color:var(--color-grey-500);color:#fff;transition:opacity 1s,top .3s;opacity:0;white-space:pre-line}:host>.notification-wrapper.success{background-color:var(--color-success-800)}:host>.notification-wrapper.error{background-color:var(--color-error-800)}:host>.notification-wrapper.warning{background-color:var(--color-warning-800)}:host>.notification-wrapper.info{background-color:var(--color-weight-500)}:host>.notification-wrapper.visible{opacity:.95;animation:fadeIn .3s .3s backwards}\n"] }]
-        }], ctorParameters: () => [{ type: LocalizationService }], propDecorators: { wrapper: [{
-                type: ViewChild,
-                args: ['wrapper', { static: true }]
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-// How many ms before the toast is dismissed.
-const TOAST_DURATION = 3000;
-/**
- * @description
- * Provides toast notification functionality.
- *
- * @example
- * ```ts
- * class MyComponent {
- *   constructor(private notificationService: NotificationService) {}
- *
- *   save() {
- *     this.notificationService
- *         .success(_('asset.notify-create-assets-success'), {
- *           count: successCount,
- *         });
- *   }
- * }
- *
- * @docsCategory services
- * @docsPage NotificationService
- * @docsWeight 0
- */
-class NotificationService {
-    get hostView() {
-        return this.overlayHostService.getHostView();
-    }
-    constructor(i18nService, resolver, overlayHostService) {
-        this.i18nService = i18nService;
-        this.resolver = resolver;
-        this.overlayHostService = overlayHostService;
-        this.openToastRefs = [];
-    }
-    /**
-     * @description
-     * Display a success toast notification
-     */
-    success(message, translationVars) {
-        this.notify({
-            message,
-            translationVars,
-            type: 'success',
-        });
+ */
+function getServerLocation() {
+    const { apiHost, apiPort, adminApiPath, tokenMethod } = getAppConfig();
+    const host = apiHost === 'auto' ? `${location.protocol}//${location.hostname}` : apiHost;
+    const port = apiPort
+        ? apiPort === 'auto'
+            ? location.port === ''
+                ? ''
+                : `:${location.port}`
+            : `:${apiPort}`
+        : '';
+    return `${host}${port}`;
+}
+
+class HealthCheckService {
+    constructor(httpClient) {
+        this.httpClient = httpClient;
+        this.pollingDelayMs = 60 * 1000;
+        this._refresh = new Subject();
+        this.healthCheckEndpoint = getServerLocation() + '/health';
+        const refresh$ = this._refresh.pipe(throttleTime(1000));
+        const result$ = merge(timer(0, this.pollingDelayMs), refresh$).pipe(switchMap(() => this.checkHealth()), shareReplay(1));
+        this.status$ = result$.pipe(map(res => res.status));
+        this.details$ = result$.pipe(map(res => Object.keys(res.details).map(key => ({ key, result: res.details[key] }))));
+        this.lastCheck$ = result$.pipe(map(res => res.lastChecked));
     }
-    /**
-     * @description
-     * Display an info toast notification
-     */
-    info(message, translationVars) {
-        this.notify({
-            message,
-            translationVars,
-            type: 'info',
-        });
+    refresh() {
+        this._refresh.next();
     }
-    /**
-     * @description
-     * Display a warning toast notification
-     */
-    warning(message, translationVars) {
-        this.notify({
-            message,
-            translationVars,
-            type: 'warning',
-        });
+    checkHealth() {
+        return this.httpClient.get(this.healthCheckEndpoint).pipe(catchError(err => of(err.error)), map(res => ({ ...res, lastChecked: new Date() })));
     }
-    /**
-     * @description
-     * Display an error toast notification
-     */
-    error(message, translationVars) {
-        this.notify({
-            message,
-            translationVars,
-            type: 'error',
-            duration: 20000,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HealthCheckService, deps: [{ token: i1$5.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HealthCheckService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HealthCheckService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$5.HttpClient }] });
+
+class JobQueueService {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.updateJob$ = new Subject();
+        this.onCompleteHandlers = new Map();
+        this.checkForJobs();
+        this.activeJobs$ = this.updateJob$.pipe(scan((jobMap, job) => this.handleJob(jobMap, job), new Map()), map(jobMap => Array.from(jobMap.values())), debounceTime(500), shareReplay(1));
+        this.subscription = this.activeJobs$
+            .pipe(switchMap(jobs => {
+            if (jobs.length) {
+                return interval(2500).pipe(mapTo(jobs));
+            }
+            else {
+                return of([]);
+            }
+        }))
+            .subscribe(jobs => {
+            if (jobs.length) {
+                this.dataService.settings.pollJobs(jobs.map(j => j.id)).single$.subscribe(data => {
+                    data.jobsById.forEach(job => {
+                        this.updateJob$.next(job);
+                    });
+                });
+            }
         });
     }
-    /**
-     * @description
-     * Display a toast notification.
-     */
-    notify(config) {
-        this.createToast(config);
-    }
-    /**
-     * Load a ToastComponent into the DOM host location.
-     */
-    async createToast(config) {
-        const toastFactory = this.resolver.resolveComponentFactory(NotificationComponent);
-        const hostView = await this.hostView;
-        const ref = hostView.createComponent(toastFactory);
-        const toast = ref.instance;
-        const dismissFn = this.createDismissFunction(ref);
-        toast.type = config.type || 'info';
-        toast.message = config.message;
-        toast.translationVars = this.translateTranslationVars(config.translationVars || {});
-        toast.registerOnClickFn(dismissFn);
-        let timerId;
-        if (!config.duration || 0 < config.duration) {
-            timerId = setTimeout(dismissFn, config.duration || TOAST_DURATION);
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
         }
-        this.openToastRefs.unshift({ ref, timerId });
-        setTimeout(() => this.calculatePositions());
     }
     /**
-     * Returns a function which will destroy the toast component and
-     * remove it from the openToastRefs array.
+     * After a given delay, checks the server for any active jobs.
      */
-    createDismissFunction(ref) {
-        return () => {
-            const toast = ref.instance;
-            const index = this.openToastRefs.map(o => o.ref).indexOf(ref);
-            if (this.openToastRefs[index]) {
-                clearTimeout(this.openToastRefs[index].timerId);
+    checkForJobs(delay = 1000) {
+        timer(delay)
+            .pipe(switchMap(() => this.dataService.client.userStatus().mapSingle(data => data.userStatus)), switchMap(userStatus => {
+            if (userStatus.permissions.includes(Permission.ReadSettings) && userStatus.isLoggedIn) {
+                return this.dataService.settings.getRunningJobs().single$;
             }
-            toast.fadeOut().then(() => {
-                ref.destroy();
-                this.openToastRefs.splice(index, 1);
-                this.calculatePositions();
-            });
-        };
+            else {
+                return EMPTY;
+            }
+        }))
+            .subscribe(data => data.jobs.items.forEach(job => this.updateJob$.next(job)));
     }
-    /**
-     * Calculate and set the top offsets for each of the open toasts.
-     */
-    calculatePositions() {
-        let cumulativeHeight = 10;
-        this.openToastRefs.forEach(obj => {
-            const toast = obj.ref.instance;
-            toast.offsetTop = cumulativeHeight;
-            cumulativeHeight += toast.getHeight() + 6;
+    addJob(jobId, onComplete) {
+        this.dataService.settings.getJob(jobId).single$.subscribe(({ job }) => {
+            if (job) {
+                this.updateJob$.next(job);
+                if (onComplete) {
+                    this.onCompleteHandlers.set(jobId, onComplete);
+                }
+            }
         });
     }
-    translateTranslationVars(translationVars) {
-        for (const [key, val] of Object.entries(translationVars)) {
-            if (typeof val === 'string') {
-                translationVars[key] = this.i18nService.translate(val);
-            }
+    handleJob(jobMap, job) {
+        switch (job.state) {
+            case JobState.RUNNING:
+            case JobState.PENDING:
+                jobMap.set(job.id, job);
+                break;
+            case JobState.COMPLETED:
+            case JobState.FAILED:
+            case JobState.CANCELLED:
+                jobMap.delete(job.id);
+                const handler = this.onCompleteHandlers.get(job.id);
+                if (handler) {
+                    handler(job);
+                    this.onCompleteHandlers.delete(job.id);
+                }
+                break;
         }
-        return translationVars;
+        return jobMap;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NotificationService, deps: [{ token: I18nService }, { token: i0.ComponentFactoryResolver }, { token: OverlayHostService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NotificationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: JobQueueService, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: JobQueueService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: JobQueueService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: I18nService }, { type: i0.ComponentFactoryResolver }, { type: OverlayHostService }] });
+        }], ctorParameters: () => [{ type: DataService }] });
 
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 class BaseNavComponent {
@@ -9158,7 +9152,7 @@ class UiExtensionPointComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: UiExtensionPointComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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$2.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: "17.2.4", ngImport: i0, type: UiExtensionPointComponent, decorators: [{
             type: Component,
@@ -9297,7 +9291,7 @@ class MainNavComponent extends BaseNavComponent {
         this.itemClick.emit(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MainNavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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;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);font-size:var(--font-size-sm);line-height:14px}.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", "info", "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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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;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);font-size:var(--font-size-sm);line-height:14px}.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$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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: "17.2.4", ngImport: i0, type: MainNavComponent, decorators: [{
             type: Component,
@@ -9325,11 +9319,11 @@ class BreadcrumbComponent {
         this.parentBreadcrumb$ = this.breadcrumbService.breadcrumbs$.pipe(map(breadcrumbs => (1 < breadcrumbs.length ? breadcrumbs[breadcrumbs.length - 2] : undefined)));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: BreadcrumbComponent, selector: "vdr-breadcrumb", ngImport: i0, template: "<nav role=\"navigation\">\r\n    <ul class=\"breadcrumbs\">\r\n        <li *ngFor=\"let breadcrumb of breadcrumbs$ | async; let isLast = last\" [title]=\"breadcrumb.label\">\r\n            <a [routerLink]=\"breadcrumb.link\" *ngIf=\"!isLast\">{{ breadcrumb.label | translate }}</a>\r\n            <ng-container *ngIf=\"!isLast\"\r\n                ><clr-icon shape=\"caret right\" class=\"color-weight-400 mx-1\"></clr-icon\r\n            ></ng-container>\r\n            <ng-container *ngIf=\"isLast\">{{ breadcrumb.label | translate }}</ng-container>\r\n        </li>\r\n    </ul>\r\n    <ul class=\"breadcrumbs mobile\" *ngIf=\"parentBreadcrumb$ | async as parentBreadcrumb\">\r\n        <li>\r\n            <clr-icon shape=\"caret left\" class=\"color-weight-400 mr-1\"></clr-icon>\r\n            <a [routerLink]=\"parentBreadcrumb.link\">{{ parentBreadcrumb.label | translate }}</a>\r\n        </li>\r\n    </ul>\r\n</nav>\r\n", styles: [":host{display:block;padding:0;position:relative}.breadcrumbs{list-style-type:none;display:flex;flex-wrap:wrap;align-items:center;overflow-x:auto;max-width:100vw;line-height:100%;min-height:40px;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2.5);font-size:var(--font-size-sm);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg)}.breadcrumbs li{display:inline-flex;white-space:nowrap;line-height:14px;max-width:300px;overflow:hidden;text-overflow:ellipsis}.breadcrumbs li a:link,.breadcrumbs li a:visited{color:var(--color-weight-700);font-size:var(--font-size-sm)}.breadcrumbs li:last-child{font-weight:600;color:var(--color-weight-700)}@media screen and (max-width: 992px){.breadcrumbs:not(.mobile){display:none}}@media screen and (min-width: 992px){.breadcrumbs.mobile{display:none}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: BreadcrumbComponent, selector: "vdr-breadcrumb", ngImport: i0, template: "<nav role=\"navigation\">\r\n    <ul class=\"breadcrumbs\">\r\n        <li\r\n            *ngFor=\"let breadcrumb of breadcrumbs$ | async; let isLast = last\"\r\n            [title]=\"breadcrumb.label | translate\"\r\n        >\r\n            <a [routerLink]=\"breadcrumb.link\" *ngIf=\"!isLast\">{{ breadcrumb.label | translate }}</a>\r\n            <ng-container *ngIf=\"!isLast\"\r\n                ><clr-icon shape=\"caret right\" class=\"color-weight-400 mx-1\"></clr-icon\r\n            ></ng-container>\r\n            <ng-container *ngIf=\"isLast\">{{ breadcrumb.label | translate }}</ng-container>\r\n        </li>\r\n    </ul>\r\n    <ul class=\"breadcrumbs mobile\" *ngIf=\"parentBreadcrumb$ | async as parentBreadcrumb\">\r\n        <li>\r\n            <clr-icon shape=\"caret left\" class=\"color-weight-400 mr-1\"></clr-icon>\r\n            <a [routerLink]=\"parentBreadcrumb.link\">{{ parentBreadcrumb.label | translate }}</a>\r\n        </li>\r\n    </ul>\r\n</nav>\r\n", styles: [":host{display:block;padding:0;position:relative}.breadcrumbs{list-style-type:none;display:flex;flex-wrap:wrap;align-items:center;overflow-x:auto;max-width:100vw;line-height:100%;min-height:40px;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2.5);font-size:var(--font-size-sm);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg)}.breadcrumbs li{display:inline-flex;white-space:nowrap;line-height:14px;max-width:300px;overflow:hidden;text-overflow:ellipsis}.breadcrumbs li a:link,.breadcrumbs li a:visited{color:var(--color-weight-700);font-size:var(--font-size-sm)}.breadcrumbs li:last-child{font-weight:600;color:var(--color-weight-700)}@media screen and (max-width: 992px){.breadcrumbs:not(.mobile){display:none}}@media screen and (min-width: 992px){.breadcrumbs.mobile{display:none}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-breadcrumb', template: "<nav role=\"navigation\">\r\n    <ul class=\"breadcrumbs\">\r\n        <li *ngFor=\"let breadcrumb of breadcrumbs$ | async; let isLast = last\" [title]=\"breadcrumb.label\">\r\n            <a [routerLink]=\"breadcrumb.link\" *ngIf=\"!isLast\">{{ breadcrumb.label | translate }}</a>\r\n            <ng-container *ngIf=\"!isLast\"\r\n                ><clr-icon shape=\"caret right\" class=\"color-weight-400 mx-1\"></clr-icon\r\n            ></ng-container>\r\n            <ng-container *ngIf=\"isLast\">{{ breadcrumb.label | translate }}</ng-container>\r\n        </li>\r\n    </ul>\r\n    <ul class=\"breadcrumbs mobile\" *ngIf=\"parentBreadcrumb$ | async as parentBreadcrumb\">\r\n        <li>\r\n            <clr-icon shape=\"caret left\" class=\"color-weight-400 mr-1\"></clr-icon>\r\n            <a [routerLink]=\"parentBreadcrumb.link\">{{ parentBreadcrumb.label | translate }}</a>\r\n        </li>\r\n    </ul>\r\n</nav>\r\n", styles: [":host{display:block;padding:0;position:relative}.breadcrumbs{list-style-type:none;display:flex;flex-wrap:wrap;align-items:center;overflow-x:auto;max-width:100vw;line-height:100%;min-height:40px;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2.5);font-size:var(--font-size-sm);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg)}.breadcrumbs li{display:inline-flex;white-space:nowrap;line-height:14px;max-width:300px;overflow:hidden;text-overflow:ellipsis}.breadcrumbs li a:link,.breadcrumbs li a:visited{color:var(--color-weight-700);font-size:var(--font-size-sm)}.breadcrumbs li:last-child{font-weight:600;color:var(--color-weight-700)}@media screen and (max-width: 992px){.breadcrumbs:not(.mobile){display:none}}@media screen and (min-width: 992px){.breadcrumbs.mobile{display:none}}\n"] }]
+            args: [{ selector: 'vdr-breadcrumb', template: "<nav role=\"navigation\">\r\n    <ul class=\"breadcrumbs\">\r\n        <li\r\n            *ngFor=\"let breadcrumb of breadcrumbs$ | async; let isLast = last\"\r\n            [title]=\"breadcrumb.label | translate\"\r\n        >\r\n            <a [routerLink]=\"breadcrumb.link\" *ngIf=\"!isLast\">{{ breadcrumb.label | translate }}</a>\r\n            <ng-container *ngIf=\"!isLast\"\r\n                ><clr-icon shape=\"caret right\" class=\"color-weight-400 mx-1\"></clr-icon\r\n            ></ng-container>\r\n            <ng-container *ngIf=\"isLast\">{{ breadcrumb.label | translate }}</ng-container>\r\n        </li>\r\n    </ul>\r\n    <ul class=\"breadcrumbs mobile\" *ngIf=\"parentBreadcrumb$ | async as parentBreadcrumb\">\r\n        <li>\r\n            <clr-icon shape=\"caret left\" class=\"color-weight-400 mr-1\"></clr-icon>\r\n            <a [routerLink]=\"parentBreadcrumb.link\">{{ parentBreadcrumb.label | translate }}</a>\r\n        </li>\r\n    </ul>\r\n</nav>\r\n", styles: [":host{display:block;padding:0;position:relative}.breadcrumbs{list-style-type:none;display:flex;flex-wrap:wrap;align-items:center;overflow-x:auto;max-width:100vw;line-height:100%;min-height:40px;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2.5);font-size:var(--font-size-sm);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg)}.breadcrumbs li{display:inline-flex;white-space:nowrap;line-height:14px;max-width:300px;overflow:hidden;text-overflow:ellipsis}.breadcrumbs li a:link,.breadcrumbs li a:visited{color:var(--color-weight-700);font-size:var(--font-size-sm)}.breadcrumbs li:last-child{font-weight:600;color:var(--color-weight-700)}@media screen and (max-width: 992px){.breadcrumbs:not(.mobile){display:none}}@media screen and (min-width: 992px){.breadcrumbs.mobile{display:none}}\n"] }]
         }], ctorParameters: () => [{ type: BreadcrumbService }] });
 
 class ChannelService {
@@ -9420,7 +9414,7 @@ class ChannelBadgeComponent {
         return this.channelCode === DEFAULT_CHANNEL_CODE;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChannelBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: { channelCode: "channelCode" }, ngImport: i0, template: "<clr-icon shape=\"layers\" [style.color]=\"isDefaultChannel ? '#aaa' : (channelCode | stringToColor)\"></clr-icon>\r\n", styles: [":host{display:inline-block}@media screen and (max-width: 992px){clr-icon{margin-inline-end:0}}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "pipe", type: StringToColorPipe, name: "stringToColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: { channelCode: "channelCode" }, ngImport: i0, template: "<clr-icon shape=\"layers\" [style.color]=\"isDefaultChannel ? '#aaa' : (channelCode | stringToColor)\"></clr-icon>\r\n", styles: [":host{display:inline-block}@media screen and (max-width: 992px){clr-icon{margin-inline-end:0}}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "pipe", type: StringToColorPipe, name: "stringToColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChannelBadgeComponent, decorators: [{
             type: Component,
@@ -9472,7 +9466,7 @@ class ChannelSwitcherComponent {
         this.channelService.setActiveChannel(channelId).subscribe(() => this.filterControl.patchValue(''));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChannelSwitcherComponent, deps: [{ token: DataService }, { token: ChannelService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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, vdr-currency-input" }, { 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: "17.2.4", 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$2.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, vdr-currency-input" }, { 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: "17.2.4", ngImport: i0, type: ChannelSwitcherComponent, decorators: [{
             type: Component,
@@ -9549,7 +9543,7 @@ class AppShellComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AppShellComponent, deps: [{ token: AuthService }, { token: DataService }, { token: i1$1.Router }, { token: I18nService }, { token: ModalService }, { token: LocalStorageService }, { token: BreadcrumbService }, { token: LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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 flex center mb-1\" [class.mt-2]=\"hideVersion && !devMode\">\r\n            <div *ngIf=\"!hideVersion\" class=\"version\">\r\n                v{{ version }}\r\n            </div>\r\n            <vdr-dropdown *ngIf=\"devMode\">\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\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}}.version{color:var(--color-grey-300)}@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 -10px 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", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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 flex center mb-1\" [class.mt-2]=\"hideVersion && !devMode\">\r\n            <div *ngIf=\"!hideVersion\" class=\"version\">\r\n                v{{ version }}\r\n            </div>\r\n            <vdr-dropdown *ngIf=\"devMode\">\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\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}}.version{color:var(--color-grey-300)}@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 -10px 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$2.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", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.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: "17.2.4", ngImport: i0, type: AppShellComponent, decorators: [{
             type: Component,
@@ -9562,7 +9556,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: "17.2.4", ngImport: i0, type: SettingsNavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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", "info", "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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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: "17.2.4", ngImport: i0, type: SettingsNavComponent, decorators: [{
             type: Component,
@@ -10599,7 +10593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
 class BooleanFormInputComponent {
     static { this.id = 'boolean-form-input'; }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BooleanFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: BooleanFormInputComponent, selector: "vdr-boolean-form-input", ngImport: i0, template: "<clr-checkbox-wrapper>\r\n    <input\r\n        type=\"checkbox\"\r\n        clrCheckbox\r\n        [formControl]=\"formControl\"\r\n        [vdrDisabled]=\"!!readonly\"\r\n    />\r\n</clr-checkbox-wrapper>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1$3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i1$4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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, vdr-currency-input" }, { kind: "directive", type: DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: BooleanFormInputComponent, selector: "vdr-boolean-form-input", ngImport: i0, template: "<clr-checkbox-wrapper>\r\n    <input\r\n        type=\"checkbox\"\r\n        clrCheckbox\r\n        [formControl]=\"formControl\"\r\n        [vdrDisabled]=\"!!readonly\"\r\n    />\r\n</clr-checkbox-wrapper>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1$2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i1$4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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, vdr-currency-input" }, { kind: "directive", type: DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BooleanFormInputComponent, decorators: [{
             type: Component,
@@ -10945,7 +10939,7 @@ function interpolateDescription(operation, values, precisionFactor = 100) {
 
 class HelpTooltipComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HelpTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: { content: "content", position: "position" }, ngImport: i0, template: "<clr-tooltip>\r\n    <clr-icon clrTooltipTrigger shape=\"help\" size=\"14\"></clr-icon>\r\n    <clr-tooltip-content [clrPosition]=\"position\" clrSize=\"md\" *clrIfOpen>\r\n        <span>{{ content }}</span>\r\n    </clr-tooltip-content>\r\n</clr-tooltip>\r\n", styles: ["clr-tooltip{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i1$3.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$3.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$3.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: { content: "content", position: "position" }, ngImport: i0, template: "<clr-tooltip>\r\n    <clr-icon clrTooltipTrigger shape=\"help\" size=\"14\"></clr-icon>\r\n    <clr-tooltip-content [clrPosition]=\"position\" clrSize=\"md\" *clrIfOpen>\r\n        <span>{{ content }}</span>\r\n    </clr-tooltip-content>\r\n</clr-tooltip>\r\n", styles: ["clr-tooltip{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$2.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "component", type: i1$2.ClrTooltip, selector: "clr-tooltip" }, { kind: "directive", type: i1$2.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { kind: "component", type: i1$2.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HelpTooltipComponent, decorators: [{
             type: Component,
@@ -11188,7 +11182,7 @@ class DynamicFormInputComponent {
                 useExisting: DynamicFormInputComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "singleViewContainer", first: true, predicate: ["single"], descendants: true, read: ViewContainerRef }, { propertyName: "listItemContainers", predicate: ["listItem"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!renderAsList; else list\">\r\n    <ng-container #single></ng-container>\r\n</ng-container>\r\n<ng-template #list>\r\n    <div class=\"list-container\" cdkDropList (cdkDropListDropped)=\"moveListItem($event)\">\r\n        <div\r\n            class=\"list-item-row\"\r\n            *ngFor=\"let item of listItems; trackBy: trackById\"\r\n            cdkDrag\r\n            [cdkDragData]=\"item\"\r\n            [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"], 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: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "singleViewContainer", first: true, predicate: ["single"], descendants: true, read: ViewContainerRef }, { propertyName: "listItemContainers", predicate: ["listItem"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!renderAsList; else list\">\r\n    <ng-container #single></ng-container>\r\n</ng-container>\r\n<ng-template #list>\r\n    <div class=\"list-container\" cdkDropList (cdkDropListDropped)=\"moveListItem($event)\">\r\n        <div\r\n            class=\"list-item-row\"\r\n            *ngFor=\"let item of listItems; trackBy: trackById\"\r\n            cdkDrag\r\n            [cdkDragData]=\"item\"\r\n            [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"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DynamicFormInputComponent, decorators: [{
             type: Component,
@@ -11356,7 +11350,7 @@ class ConfigurableInputComponent {
                 useExisting: forwardRef(() => ConfigurableInputComponent),
                 multi: true,
             },
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"card\" *ngIf=\"operation\">\r\n    <div class=\"card-block\" *ngIf=\"hideDescription !== true\">{{ interpolateDescription() }}</div>\r\n    <div class=\"card-block\" *ngIf=\"operation.args?.length\">\r\n        <form [formGroup]=\"form\" *ngIf=\"operation\" class=\"operation-inputs\">\r\n            <div *ngFor=\"let arg of operation.args; trackBy: trackByName\" class=\"arg-row\">\r\n                <ng-container *ngIf=\"form.get(arg.name) && getArgDef(arg) as argDef\">\r\n                    <label class=\"clr-control-label\">{{ argDef.label || (arg.name | sentenceCase) }}</label>\r\n                    <vdr-help-tooltip\r\n                        class=\"mr3\"\r\n                        *ngIf=\"argDef.description\"\r\n                        [content]=\"argDef.description\"\r\n                    ></vdr-help-tooltip>\r\n                    <vdr-dynamic-form-input\r\n                        [def]=\"getArgDef(arg)\"\r\n                        [readonly]=\"readonly\"\r\n                        [control]=\"form.get(arg.name)\"\r\n                        [formControlName]=\"arg.name\"\r\n                    ></vdr-dynamic-form-input>\r\n                </ng-container>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"!readonly && removable\">\r\n        <button class=\"button-small warning\" (click)=\"remove.emit(operation)\">\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n            {{ 'common.remove' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;margin-bottom:12px}:host>.card{margin-top:6px}.operation-inputs{padding-top:0}.operation-inputs .arg-row:not(:last-child){margin-bottom:12px}.operation-inputs .arg-row{display:flex;flex-wrap:wrap;align-items:center}.operation-inputs .arg-row label{margin-inline-end:6px}.operation-inputs .hidden{display:none}.operation-inputs label{min-width:130px;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: ["content", "position"] }, { kind: "component", type: DynamicFormInputComponent, selector: "vdr-dynamic-form-input", inputs: ["def", "readonly", "control"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: SentenceCasePipe, name: "sentenceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"card\" *ngIf=\"operation\">\r\n    <div class=\"card-block\" *ngIf=\"hideDescription !== true\">{{ interpolateDescription() }}</div>\r\n    <div class=\"card-block\" *ngIf=\"operation.args?.length\">\r\n        <form [formGroup]=\"form\" *ngIf=\"operation\" class=\"operation-inputs\">\r\n            <div *ngFor=\"let arg of operation.args; trackBy: trackByName\" class=\"arg-row\">\r\n                <ng-container *ngIf=\"form.get(arg.name) && getArgDef(arg) as argDef\">\r\n                    <label class=\"clr-control-label\">{{ argDef.label || (arg.name | sentenceCase) }}</label>\r\n                    <vdr-help-tooltip\r\n                        class=\"mr3\"\r\n                        *ngIf=\"argDef.description\"\r\n                        [content]=\"argDef.description\"\r\n                    ></vdr-help-tooltip>\r\n                    <vdr-dynamic-form-input\r\n                        [def]=\"getArgDef(arg)\"\r\n                        [readonly]=\"readonly\"\r\n                        [control]=\"form.get(arg.name)\"\r\n                        [formControlName]=\"arg.name\"\r\n                    ></vdr-dynamic-form-input>\r\n                </ng-container>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"!readonly && removable\">\r\n        <button class=\"button-small warning\" (click)=\"remove.emit(operation)\">\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n            {{ 'common.remove' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;margin-bottom:12px}:host>.card{margin-top:6px}.operation-inputs{padding-top:0}.operation-inputs .arg-row:not(:last-child){margin-bottom:12px}.operation-inputs .arg-row{display:flex;flex-wrap:wrap;align-items:center}.operation-inputs .arg-row label{margin-inline-end:6px}.operation-inputs .hidden{display:none}.operation-inputs label{min-width:130px;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: ["content", "position"] }, { kind: "component", type: DynamicFormInputComponent, selector: "vdr-dynamic-form-input", inputs: ["def", "readonly", "control"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: SentenceCasePipe, name: "sentenceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ConfigurableInputComponent, decorators: [{
             type: Component,
@@ -11636,7 +11630,7 @@ class ChipComponent {
         this.iconClick = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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$2.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: "17.2.4", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
@@ -12080,7 +12074,7 @@ class DatetimePickerComponent {
                 useExisting: DatetimePickerComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "dropdownComponent", first: true, predicate: ["dropdownComponent"], descendants: true, static: true }, { propertyName: "datetimeInput", first: true, predicate: ["datetimeInput"], descendants: true, static: true }, { propertyName: "calendarTable", first: true, predicate: ["calendarTable"], descendants: true }], ngImport: i0, template: "<div class=\"input-wrapper\">\r\n    <input\r\n        readonly\r\n        [ngModel]=\"selected$ | async | localeDate : 'medium'\"\r\n        class=\"selected-datetime\"\r\n        (keydown.enter)=\"dropdownComponent.toggleOpen()\"\r\n        (keydown.space)=\"dropdownComponent.toggleOpen()\"\r\n        #datetimeInput\r\n    />\r\n    <button\r\n        class=\"clear-value-button\"\r\n        [class.visible]=\"!disabled && !readonly && (selected$ | async)\"\r\n        (click)=\"clearValue()\"\r\n    >\r\n        <clr-icon shape=\"times\"></clr-icon>\r\n    </button>\r\n</div>\r\n<vdr-dropdown #dropdownComponent>\r\n    <button class=\"calendar-button\" vdrDropdownTrigger [disabled]=\"readonly || disabled\">\r\n        <clr-icon shape=\"calendar\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu>\r\n        <div\r\n            class=\"datetime-picker\"\r\n            *ngIf=\"current$ | async as currentView\"\r\n            (keydown.escape)=\"closeDatepicker()\"\r\n        >\r\n            <div class=\"controls\">\r\n                <div class=\"selects\">\r\n                    <div class=\"month-select\">\r\n                        <select name=\"month\" [ngModel]=\"currentView.month\" (change)=\"setMonth($event)\">\r\n                            <option [value]=\"1\">{{ 'datetime.month-jan' | translate }}</option>\r\n                            <option [value]=\"2\">{{ 'datetime.month-feb' | translate }}</option>\r\n                            <option [value]=\"3\">{{ 'datetime.month-mar' | translate }}</option>\r\n                            <option [value]=\"4\">{{ 'datetime.month-apr' | translate }}</option>\r\n                            <option [value]=\"5\">{{ 'datetime.month-may' | translate }}</option>\r\n                            <option [value]=\"6\">{{ 'datetime.month-jun' | translate }}</option>\r\n                            <option [value]=\"7\">{{ 'datetime.month-jul' | translate }}</option>\r\n                            <option [value]=\"8\">{{ 'datetime.month-aug' | translate }}</option>\r\n                            <option [value]=\"9\">{{ 'datetime.month-sep' | translate }}</option>\r\n                            <option [value]=\"10\">{{ 'datetime.month-oct' | translate }}</option>\r\n                            <option [value]=\"11\">{{ 'datetime.month-nov' | translate }}</option>\r\n                            <option [value]=\"12\">{{ 'datetime.month-dec' | translate }}</option>\r\n                        </select>\r\n                    </div>\r\n                    <div class=\"year-select\">\r\n                        <select name=\"month\" [ngModel]=\"currentView.year\" (change)=\"setYear($event)\">\r\n                            <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\r\n                        </select>\r\n                    </div>\r\n                </div>\r\n                <div class=\"control-buttons\">\r\n                    <button\r\n                        class=\"btn btn-link btn-sm\"\r\n                        (click)=\"prevMonth()\"\r\n                        [title]=\"'common.view-previous-month' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"caret\" dir=\"left\"></clr-icon>\r\n                    </button>\r\n                    <button\r\n                        class=\"btn btn-link btn-sm\"\r\n                        (click)=\"selectToday()\"\r\n                        [title]=\"'common.select-today' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"event\"></clr-icon>\r\n                    </button>\r\n                    <button\r\n                        class=\"btn btn-link btn-sm\"\r\n                        (click)=\"nextMonth()\"\r\n                        [title]=\"'common.view-next-month' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"caret\" dir=\"right\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <table\r\n                class=\"calendar-table\"\r\n                #calendarTable\r\n                tabindex=\"0\"\r\n                (keydown)=\"handleCalendarKeydown($event)\"\r\n            >\r\n                <thead>\r\n                    <tr>\r\n                        <td *ngFor=\"let weekdayName of weekdays\">\r\n                            {{ weekdayName | translate }}\r\n                        </td>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let week of calendarView$ | async\">\r\n                        <td\r\n                            *ngFor=\"let day of week\"\r\n                            class=\"day-cell\"\r\n                            [class.selected]=\"day.selected\"\r\n                            [class.today]=\"day.isToday\"\r\n                            [class.viewing]=\"day.isViewing\"\r\n                            [class.current-month]=\"day.inCurrentMonth\"\r\n                            [class.disabled]=\"day.disabled\"\r\n                            (keydown.enter)=\"selectDay(day)\"\r\n                            (click)=\"selectDay(day)\"\r\n                        >\r\n                            {{ day.dayOfMonth }}\r\n                        </td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n            <div class=\"time-picker\">\r\n                <span class=\"flex-spacer\"> {{ 'datetime.time' | translate }}: </span>\r\n                <select name=\"hour\" [ngModel]=\"selectedHours$ | async\" (change)=\"setHour($event)\">\r\n                    <option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour | number : '2.0-0' }}</option>\r\n                </select>\r\n                <span>:</span>\r\n                <select name=\"hour\" [ngModel]=\"selectedMinutes$ | async\" (change)=\"setMinute($event)\">\r\n                    <option *ngFor=\"let minute of minutes\" [value]=\"minute\">\r\n                        {{ minute | number : '2.0-0' }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:flex;width:100%}.input-wrapper{flex:1;display:flex}input.selected-datetime{flex:1;border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-inline-end:none!important}button.clear-value-button{margin:0;border-radius:0;border-inline-start:none;border:none;border-top:1px solid var(--color-weight-200);border-bottom:1px solid var(--color-weight-200);border-inline-end:1px solid var(--color-weight-200);background-color:var(--color-button-bg);color:var(--color-text-100);display:none}button.clear-value-button.visible{display:block}button.calendar-button{margin:0;border-top-left-radius:0;border-bottom-left-radius:0;border:1px solid var(--color-weight-200);border-radius:var(--border-radius-sm);border-inline-start:none;height:100%;background-color:var(--color-button-bg);color:var(--color-text-100)}.datetime-picker{margin:0 12px}table.calendar-table{padding:6px}table.calendar-table:focus{outline:1px solid var(--color-primary-500);box-shadow:0 0 1px 2px var(--color-primary-100)}table.calendar-table td{width:24px;text-align:center;border:1px solid transparent;-webkit-user-select:none;user-select:none}table.calendar-table .day-cell{background-color:var(--color-component-bg-200);color:var(--color-text-100);cursor:pointer;transition:background-color .1s}table.calendar-table .day-cell.current-month{background-color:var(--color-weight-100);color:var(--color-text-100)}table.calendar-table .day-cell.selected{background-color:var(--color-primary-500);color:#fff}table.calendar-table .day-cell.viewing:not(.selected){background-color:var(--color-primary-200)}table.calendar-table .day-cell.today{border:1px solid var(--color-component-border-300)}table.calendar-table .day-cell:hover:not(.selected):not(.disabled){background-color:var(--color-primary-100)}table.calendar-table .day-cell.disabled{cursor:default;color:var(--color-text-200)}.selects{display:flex;justify-content:space-between;margin-bottom:12px}.control-buttons{display:flex}.time-picker{display:flex;align-items:baseline;margin-top:12px}\n"], 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$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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { 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" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "dropdownComponent", first: true, predicate: ["dropdownComponent"], descendants: true, static: true }, { propertyName: "datetimeInput", first: true, predicate: ["datetimeInput"], descendants: true, static: true }, { propertyName: "calendarTable", first: true, predicate: ["calendarTable"], descendants: true }], ngImport: i0, template: "<div class=\"input-wrapper\">\r\n    <input\r\n        readonly\r\n        [ngModel]=\"selected$ | async | localeDate : 'medium'\"\r\n        class=\"selected-datetime\"\r\n        (keydown.enter)=\"dropdownComponent.toggleOpen()\"\r\n        (keydown.space)=\"dropdownComponent.toggleOpen()\"\r\n        #datetimeInput\r\n    />\r\n    <button\r\n        class=\"clear-value-button\"\r\n        [class.visible]=\"!disabled && !readonly && (selected$ | async)\"\r\n        (click)=\"clearValue()\"\r\n    >\r\n        <clr-icon shape=\"times\"></clr-icon>\r\n    </button>\r\n</div>\r\n<vdr-dropdown #dropdownComponent>\r\n    <button class=\"calendar-button\" vdrDropdownTrigger [disabled]=\"readonly || disabled\">\r\n        <clr-icon shape=\"calendar\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu>\r\n        <div\r\n            class=\"datetime-picker\"\r\n            *ngIf=\"current$ | async as currentView\"\r\n            (keydown.escape)=\"closeDatepicker()\"\r\n        >\r\n            <div class=\"controls\">\r\n                <div class=\"selects\">\r\n                    <div class=\"month-select\">\r\n                        <select name=\"month\" [ngModel]=\"currentView.month\" (change)=\"setMonth($event)\">\r\n                            <option [value]=\"1\">{{ 'datetime.month-jan' | translate }}</option>\r\n                            <option [value]=\"2\">{{ 'datetime.month-feb' | translate }}</option>\r\n                            <option [value]=\"3\">{{ 'datetime.month-mar' | translate }}</option>\r\n                            <option [value]=\"4\">{{ 'datetime.month-apr' | translate }}</option>\r\n                            <option [value]=\"5\">{{ 'datetime.month-may' | translate }}</option>\r\n                            <option [value]=\"6\">{{ 'datetime.month-jun' | translate }}</option>\r\n                            <option [value]=\"7\">{{ 'datetime.month-jul' | translate }}</option>\r\n                            <option [value]=\"8\">{{ 'datetime.month-aug' | translate }}</option>\r\n                            <option [value]=\"9\">{{ 'datetime.month-sep' | translate }}</option>\r\n                            <option [value]=\"10\">{{ 'datetime.month-oct' | translate }}</option>\r\n                            <option [value]=\"11\">{{ 'datetime.month-nov' | translate }}</option>\r\n                            <option [value]=\"12\">{{ 'datetime.month-dec' | translate }}</option>\r\n                        </select>\r\n                    </div>\r\n                    <div class=\"year-select\">\r\n                        <select name=\"month\" [ngModel]=\"currentView.year\" (change)=\"setYear($event)\">\r\n                            <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\r\n                        </select>\r\n                    </div>\r\n                </div>\r\n                <div class=\"control-buttons\">\r\n                    <button\r\n                        class=\"btn btn-link btn-sm\"\r\n                        (click)=\"prevMonth()\"\r\n                        [title]=\"'common.view-previous-month' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"caret\" dir=\"left\"></clr-icon>\r\n                    </button>\r\n                    <button\r\n                        class=\"btn btn-link btn-sm\"\r\n                        (click)=\"selectToday()\"\r\n                        [title]=\"'common.select-today' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"event\"></clr-icon>\r\n                    </button>\r\n                    <button\r\n                        class=\"btn btn-link btn-sm\"\r\n                        (click)=\"nextMonth()\"\r\n                        [title]=\"'common.view-next-month' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"caret\" dir=\"right\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <table\r\n                class=\"calendar-table\"\r\n                #calendarTable\r\n                tabindex=\"0\"\r\n                (keydown)=\"handleCalendarKeydown($event)\"\r\n            >\r\n                <thead>\r\n                    <tr>\r\n                        <td *ngFor=\"let weekdayName of weekdays\">\r\n                            {{ weekdayName | translate }}\r\n                        </td>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let week of calendarView$ | async\">\r\n                        <td\r\n                            *ngFor=\"let day of week\"\r\n                            class=\"day-cell\"\r\n                            [class.selected]=\"day.selected\"\r\n                            [class.today]=\"day.isToday\"\r\n                            [class.viewing]=\"day.isViewing\"\r\n                            [class.current-month]=\"day.inCurrentMonth\"\r\n                            [class.disabled]=\"day.disabled\"\r\n                            (keydown.enter)=\"selectDay(day)\"\r\n                            (click)=\"selectDay(day)\"\r\n                        >\r\n                            {{ day.dayOfMonth }}\r\n                        </td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n            <div class=\"time-picker\">\r\n                <span class=\"flex-spacer\"> {{ 'datetime.time' | translate }}: </span>\r\n                <select name=\"hour\" [ngModel]=\"selectedHours$ | async\" (change)=\"setHour($event)\">\r\n                    <option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour | number : '2.0-0' }}</option>\r\n                </select>\r\n                <span>:</span>\r\n                <select name=\"hour\" [ngModel]=\"selectedMinutes$ | async\" (change)=\"setMinute($event)\">\r\n                    <option *ngFor=\"let minute of minutes\" [value]=\"minute\">\r\n                        {{ minute | number : '2.0-0' }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:flex;width:100%}.input-wrapper{flex:1;display:flex}input.selected-datetime{flex:1;border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-inline-end:none!important}button.clear-value-button{margin:0;border-radius:0;border-inline-start:none;border:none;border-top:1px solid var(--color-weight-200);border-bottom:1px solid var(--color-weight-200);border-inline-end:1px solid var(--color-weight-200);background-color:var(--color-button-bg);color:var(--color-text-100);display:none}button.clear-value-button.visible{display:block}button.calendar-button{margin:0;border-top-left-radius:0;border-bottom-left-radius:0;border:1px solid var(--color-weight-200);border-radius:var(--border-radius-sm);border-inline-start:none;height:100%;background-color:var(--color-button-bg);color:var(--color-text-100)}.datetime-picker{margin:0 12px}table.calendar-table{padding:6px}table.calendar-table:focus{outline:1px solid var(--color-primary-500);box-shadow:0 0 1px 2px var(--color-primary-100)}table.calendar-table td{width:24px;text-align:center;border:1px solid transparent;-webkit-user-select:none;user-select:none}table.calendar-table .day-cell{background-color:var(--color-component-bg-200);color:var(--color-text-100);cursor:pointer;transition:background-color .1s}table.calendar-table .day-cell.current-month{background-color:var(--color-weight-100);color:var(--color-text-100)}table.calendar-table .day-cell.selected{background-color:var(--color-primary-500);color:#fff}table.calendar-table .day-cell.viewing:not(.selected){background-color:var(--color-primary-200)}table.calendar-table .day-cell.today{border:1px solid var(--color-component-border-300)}table.calendar-table .day-cell:hover:not(.selected):not(.disabled){background-color:var(--color-primary-100)}table.calendar-table .day-cell.disabled{cursor:default;color:var(--color-text-200)}.selects{display:flex;justify-content:space-between;margin-bottom:12px}.control-buttons{display:flex}.time-picker{display:flex;align-items:baseline;margin-top:12px}\n"], dependencies: [{ kind: "directive", type: i1$2.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$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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { 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" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatetimePickerComponent, decorators: [{
             type: Component,
@@ -12492,7 +12486,7 @@ class ItemsPerPageControlsComponent {
         this.itemsPerPageChange = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ItemsPerPageControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: { itemsPerPage: "itemsPerPage" }, outputs: { itemsPerPageChange: "itemsPerPageChange" }, ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"button\" vdrDropdownTrigger>\r\n        <span>{{ 'common.items-per-page-option' | translate : { count: itemsPerPage } }}</span>\r\n        <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <button vdrDropdownItem (click)=\"itemsPerPageChange.emit(10)\">\r\n            {{ 'common.items-per-page-option' | translate : { count: 10 } }}\r\n        </button>\r\n        <button vdrDropdownItem (click)=\"itemsPerPageChange.emit(25)\">\r\n            {{ 'common.items-per-page-option' | translate : { count: 25 } }}\r\n        </button>\r\n        <button vdrDropdownItem (click)=\"itemsPerPageChange.emit(50)\">\r\n            {{ 'common.items-per-page-option' | translate : { count: 50 } }}\r\n        </button>\r\n        <button vdrDropdownItem (click)=\"itemsPerPageChange.emit(100)\">\r\n            {{ 'common.items-per-page-option' | translate : { count: 100 } }}\r\n        </button>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { 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: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: { itemsPerPage: "itemsPerPage" }, outputs: { itemsPerPageChange: "itemsPerPageChange" }, ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"button\" vdrDropdownTrigger>\r\n        <span>{{ 'common.items-per-page-option' | translate : { count: itemsPerPage } }}</span>\r\n        <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <button vdrDropdownItem (click)=\"itemsPerPageChange.emit(10)\">\r\n            {{ 'common.items-per-page-option' | translate : { count: 10 } }}\r\n        </button>\r\n        <button vdrDropdownItem (click)=\"itemsPerPageChange.emit(25)\">\r\n            {{ 'common.items-per-page-option' | translate : { count: 25 } }}\r\n        </button>\r\n        <button vdrDropdownItem (click)=\"itemsPerPageChange.emit(50)\">\r\n            {{ 'common.items-per-page-option' | translate : { count: 50 } }}\r\n        </button>\r\n        <button vdrDropdownItem (click)=\"itemsPerPageChange.emit(100)\">\r\n            {{ 'common.items-per-page-option' | translate : { count: 100 } }}\r\n        </button>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { 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: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ItemsPerPageControlsComponent, decorators: [{
             type: Component,
@@ -12537,7 +12531,7 @@ class SelectToggleComponent {
         this.selectedChange = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SelectToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: { size: "size", selected: "selected", hiddenWhenOff: "hiddenWhenOff", disabled: "disabled", label: "label" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<div\r\n    class=\"toggle\"\r\n    [class.hide-when-off]=\"hiddenWhenOff\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.small]=\"size === 'small'\"\r\n    [attr.tabindex]=\"disabled ? null : 0\"\r\n    [class.selected]=\"selected\"\r\n    (keydown.enter)=\"selectedChange.emit(!selected)\"\r\n    (keydown.space)=\"$event.preventDefault(); selectedChange.emit(!selected)\"\r\n    (click)=\"selectedChange.emit(!selected)\"\r\n>\r\n    <clr-icon\r\n        shape=\"check-circle\"\r\n        [class.is-solid]=\"selected\"\r\n        [attr.size]=\"size === 'small' ? 24 : 32\"\r\n    ></clr-icon>\r\n</div>\r\n<div\r\n    class=\"toggle-label\"\r\n    [class.selected]=\"selected\"\r\n    [class.disabled]=\"disabled\"\r\n    *ngIf=\"label\"\r\n    (click)=\"selectedChange.emit(!selected)\"\r\n>\r\n    {{ label }}\r\n</div>\r\n", styles: [":host{display:flex;align-items:center;justify-content:center}.toggle{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;color:var(--color-grey-300);background-color:var(--color-component-bg-100);border-radius:50%;top:-12px;left:-12px;transition:opacity .1s,color .1s}.toggle.hide-when-off{opacity:0}.toggle.small{width:24px;height:24px}.toggle:not(.disabled):hover{color:var(--color-success-600);opacity:.9}.toggle.selected{opacity:1;color:var(--color-success-700)}.toggle.selected:not(.disabled):hover{color:var(--color-success-600);opacity:.9}.toggle:focus{outline:none;box-shadow:0 0 2px 2px var(--color-primary-700)}.toggle.disabled{cursor:default}.toggle-label{flex:1;margin-inline-start:6px;text-align:start;font-size:12px}.toggle-label:not(.disabled){cursor:pointer}.toggle-label.selected{color:var(--color-success-800)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: { size: "size", selected: "selected", hiddenWhenOff: "hiddenWhenOff", disabled: "disabled", label: "label" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<div\r\n    class=\"toggle\"\r\n    [class.hide-when-off]=\"hiddenWhenOff\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.small]=\"size === 'small'\"\r\n    [attr.tabindex]=\"disabled ? null : 0\"\r\n    [class.selected]=\"selected\"\r\n    (keydown.enter)=\"selectedChange.emit(!selected)\"\r\n    (keydown.space)=\"$event.preventDefault(); selectedChange.emit(!selected)\"\r\n    (click)=\"selectedChange.emit(!selected)\"\r\n>\r\n    <clr-icon\r\n        shape=\"check-circle\"\r\n        [class.is-solid]=\"selected\"\r\n        [attr.size]=\"size === 'small' ? 24 : 32\"\r\n    ></clr-icon>\r\n</div>\r\n<div\r\n    class=\"toggle-label\"\r\n    [class.selected]=\"selected\"\r\n    [class.disabled]=\"disabled\"\r\n    *ngIf=\"label\"\r\n    (click)=\"selectedChange.emit(!selected)\"\r\n>\r\n    {{ label }}\r\n</div>\r\n", styles: [":host{display:flex;align-items:center;justify-content:center}.toggle{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;color:var(--color-grey-300);background-color:var(--color-component-bg-100);border-radius:50%;top:-12px;left:-12px;transition:opacity .1s,color .1s}.toggle.hide-when-off{opacity:0}.toggle.small{width:24px;height:24px}.toggle:not(.disabled):hover{color:var(--color-success-600);opacity:.9}.toggle.selected{opacity:1;color:var(--color-success-700)}.toggle.selected:not(.disabled):hover{color:var(--color-success-600);opacity:.9}.toggle:focus{outline:none;box-shadow:0 0 2px 2px var(--color-primary-700)}.toggle.disabled{cursor:default}.toggle-label{flex:1;margin-inline-start:6px;text-align:start;font-size:12px}.toggle-label:not(.disabled){cursor:pointer}.toggle-label.selected{color:var(--color-success-800)}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SelectToggleComponent, decorators: [{
             type: Component,
@@ -12854,7 +12848,7 @@ class ProductMultiSelectorDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProductMultiSelectorDialogComponent, deps: [{ token: DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ProductMultiSelectorDialogComponent, selector: "vdr-product-multi-selector-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span *ngIf=\"mode === 'product'\">{{ 'common.select-products' | translate }}</span>\r\n        <span *ngIf=\"mode === 'variant'\">{{ 'common.select-variants' | translate }}</span>\r\n    </div>\r\n</ng-template>\r\n<vdr-product-search-input\r\n    #productSearchInputComponent\r\n    [facetValueResults]=\"facetValues$ | async\"\r\n    (searchTermChange)=\"setSearchTerm($event)\"\r\n    (facetValueChange)=\"setFacetValueIds($event)\"\r\n></vdr-product-search-input>\r\n<div class=\"flex-wrapper\">\r\n    <div class=\"gallery\">\r\n        <div\r\n            class=\"card\"\r\n            *ngFor=\"let item of (items$ | async) || [] | paginate: paginationConfig; trackBy: trackByFn\"\r\n            (click)=\"toggleSelection(item, $event)\"\r\n            [class.selected]=\"isSelected(item)\"\r\n        >\r\n            <div class=\"card-img\">\r\n                <vdr-select-toggle\r\n                    [selected]=\"isSelected(item)\"\r\n                    [disabled]=\"true\"\r\n                    [hiddenWhenOff]=\"true\"\r\n                ></vdr-select-toggle>\r\n                <img\r\n                    [src]=\"\r\n                        (mode === 'product'\r\n                            ? item.productAsset\r\n                            : item.productVariantAsset || item.productAsset\r\n                        ) | assetPreview: 'thumb'\r\n                    \"\r\n                />\r\n            </div>\r\n            <div class=\"detail\">\r\n                <span [title]=\"mode === 'product' ? item.productName : item.productVariantName\">{{\r\n                    mode === 'product' ? item.productName : item.productVariantName\r\n                }}</span>\r\n                <div *ngIf=\"mode === 'product'\">\r\n                    <small>\r\n                        <span class=\"mr-1\">{{ 'common.slug' | translate }}:</span>\r\n                        <code>{{ item.slug }}</code>\r\n                    </small>\r\n                </div>\r\n                <div *ngIf=\"mode === 'variant'\"><small>{{ item.sku }}</small></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"selection\">\r\n        <div class=\"m-2 flex center\">\r\n            <div>\r\n                {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"clearSelection()\">\r\n                <cds-icon shape=\"times\"></cds-icon> {{ 'common.clear-selection' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"selected-items\">\r\n            <div *ngFor=\"let item of selectionManager.selection\" class=\"flex item-row\">\r\n                <div class=\"\">{{ mode === 'product' ? item.productName : item.productVariantName }}</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button class=\"icon-button\" (click)=\"toggleSelection(item, $event)\">\r\n                        <cds-icon shape=\"times\"></cds-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"selectionManager.selection.length === 0\"\r\n    >\r\n        {{ 'common.select-items-with-count' | translate: { count: selectionManager.selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-direction:1;height:70vh}.flex-wrapper{display:flex;overflow-y:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,125px);grid-template-rows:repeat(auto-fill,200px);grid-gap:10px 20px;padding-inline-start:12px;padding-top:12px;padding-bottom:64px;overflow-y:auto}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.detail{margin:0 3px;font-size:12px;line-height:.8rem}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.selection{width:23vw;max-width:400px;padding:6px;display:flex;flex-direction:column}.selection .selected-items{flex:1;overflow-y:auto}.selection .selected-items .item-row{padding-inline-start:3px}.selection .selected-items .item-row:hover{background-color:var(--color-component-bg-200)}.paging-controls{display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$3.CdsIconCustomTag, selector: "cds-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: "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: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: ["facetValueResults"], outputs: ["searchTermChange", "facetValueChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ProductMultiSelectorDialogComponent, selector: "vdr-product-multi-selector-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span *ngIf=\"mode === 'product'\">{{ 'common.select-products' | translate }}</span>\r\n        <span *ngIf=\"mode === 'variant'\">{{ 'common.select-variants' | translate }}</span>\r\n    </div>\r\n</ng-template>\r\n<vdr-product-search-input\r\n    #productSearchInputComponent\r\n    [facetValueResults]=\"facetValues$ | async\"\r\n    (searchTermChange)=\"setSearchTerm($event)\"\r\n    (facetValueChange)=\"setFacetValueIds($event)\"\r\n></vdr-product-search-input>\r\n<div class=\"flex-wrapper\">\r\n    <div class=\"gallery\">\r\n        <div\r\n            class=\"card\"\r\n            *ngFor=\"let item of (items$ | async) || [] | paginate: paginationConfig; trackBy: trackByFn\"\r\n            (click)=\"toggleSelection(item, $event)\"\r\n            [class.selected]=\"isSelected(item)\"\r\n        >\r\n            <div class=\"card-img\">\r\n                <vdr-select-toggle\r\n                    [selected]=\"isSelected(item)\"\r\n                    [disabled]=\"true\"\r\n                    [hiddenWhenOff]=\"true\"\r\n                ></vdr-select-toggle>\r\n                <img\r\n                    [src]=\"\r\n                        (mode === 'product'\r\n                            ? item.productAsset\r\n                            : item.productVariantAsset || item.productAsset\r\n                        ) | assetPreview: 'thumb'\r\n                    \"\r\n                />\r\n            </div>\r\n            <div class=\"detail\">\r\n                <span [title]=\"mode === 'product' ? item.productName : item.productVariantName\">{{\r\n                    mode === 'product' ? item.productName : item.productVariantName\r\n                }}</span>\r\n                <div *ngIf=\"mode === 'product'\">\r\n                    <small>\r\n                        <span class=\"mr-1\">{{ 'common.slug' | translate }}:</span>\r\n                        <code>{{ item.slug }}</code>\r\n                    </small>\r\n                </div>\r\n                <div *ngIf=\"mode === 'variant'\"><small>{{ item.sku }}</small></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"selection\">\r\n        <div class=\"m-2 flex center\">\r\n            <div>\r\n                {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"clearSelection()\">\r\n                <cds-icon shape=\"times\"></cds-icon> {{ 'common.clear-selection' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"selected-items\">\r\n            <div *ngFor=\"let item of selectionManager.selection\" class=\"flex item-row\">\r\n                <div class=\"\">{{ mode === 'product' ? item.productName : item.productVariantName }}</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button class=\"icon-button\" (click)=\"toggleSelection(item, $event)\">\r\n                        <cds-icon shape=\"times\"></cds-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"selectionManager.selection.length === 0\"\r\n    >\r\n        {{ 'common.select-items-with-count' | translate: { count: selectionManager.selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-direction:1;height:70vh}.flex-wrapper{display:flex;overflow-y:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,125px);grid-template-rows:repeat(auto-fill,200px);grid-gap:10px 20px;padding-inline-start:12px;padding-top:12px;padding-bottom:64px;overflow-y:auto}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.detail{margin:0 3px;font-size:12px;line-height:.8rem}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.selection{width:23vw;max-width:400px;padding:6px;display:flex;flex-direction:column}.selection .selected-items{flex:1;overflow-y:auto}.selection .selected-items .item-row{padding-inline-start:3px}.selection .selected-items .item-row:hover{background-color:var(--color-component-bg-200)}.paging-controls{display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$2.CdsIconCustomTag, selector: "cds-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: "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: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: ["facetValueResults"], outputs: ["searchTermChange", "facetValueChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProductMultiSelectorDialogComponent, decorators: [{
             type: Component,
@@ -13005,7 +12999,7 @@ class ProductSelectorFormInputComponent {
         return typeof value === 'string' ? value : value.id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProductSelectorFormInputComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ProductSelectorFormInputComponent, selector: "vdr-product-selector-form-input", ngImport: i0, template: "<ul class=\"list-unstyled\">\r\n    <li *ngFor=\"let variant of selection$ | async\" class=\"variant\">\r\n        <div class=\"thumb\">\r\n            <img [src]=\"variant.product.featuredAsset | assetPreview: 32\" />\r\n        </div>\r\n        <div class=\"detail\">\r\n            <div>{{ variant.name }}</div>\r\n            <div class=\"sku\">{{ variant.sku }}</div>\r\n        </div>\r\n        <div class=\"flex-spacer\"></div>\r\n        <button\r\n            class=\"button-small\"\r\n            (click)=\"removeProductVariant(variant.id)\"\r\n            [title]=\"'common.remove-item-from-list' | translate\"\r\n        >\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n        </button>\r\n    </li>\r\n</ul>\r\n<vdr-product-variant-selector (productSelected)=\"addProductVariant($event)\"></vdr-product-variant-selector>\r\n", styles: [".variant{margin-bottom:6px;display:flex;align-items:center;transition:background-color .2s}.variant:hover{background-color:var(--color-component-bg-200)}.thumb{margin-inline-end:6px}.thumb img{border-radius:var(--border-radius)}.sku{color:var(--color-grey-400);font-size:smaller;line-height:1em}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ProductSelectorFormInputComponent, selector: "vdr-product-selector-form-input", ngImport: i0, template: "<ul class=\"list-unstyled\">\r\n    <li *ngFor=\"let variant of selection$ | async\" class=\"variant\">\r\n        <div class=\"thumb\">\r\n            <img [src]=\"variant.product.featuredAsset | assetPreview: 32\" />\r\n        </div>\r\n        <div class=\"detail\">\r\n            <div>{{ variant.name }}</div>\r\n            <div class=\"sku\">{{ variant.sku }}</div>\r\n        </div>\r\n        <div class=\"flex-spacer\"></div>\r\n        <button\r\n            class=\"button-small\"\r\n            (click)=\"removeProductVariant(variant.id)\"\r\n            [title]=\"'common.remove-item-from-list' | translate\"\r\n        >\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n        </button>\r\n    </li>\r\n</ul>\r\n<vdr-product-variant-selector (productSelected)=\"addProductVariant($event)\"></vdr-product-variant-selector>\r\n", styles: [".variant{margin-bottom:6px;display:flex;align-items:center;transition:background-color .2s}.variant:hover{background-color:var(--color-component-bg-200)}.thumb{margin-inline-end:6px}.thumb img{border-radius:var(--border-radius)}.sku{color:var(--color-grey-400);font-size:smaller;line-height:1em}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProductSelectorFormInputComponent, decorators: [{
             type: Component,
@@ -13088,7 +13082,7 @@ class AssetSearchInputComponent {
         return { label: item };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssetSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AssetSearchInputComponent, selector: "vdr-asset-search-input", inputs: { tags: "tags" }, outputs: { searchTermChange: "searchTermChange", tagsChange: "tagsChange" }, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true, static: true }], ngImport: i0, template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-asset-name-or-tag' | translate\"\r\n    [items]=\"tags\"\r\n    [searchFn]=\"filterTagResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.value\">\r\n            <vdr-chip [colorFrom]=\"item.value\" icon=\"close\" (iconClick)=\"clear(item)\"\r\n            >\r\n                <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                {{ item.value }}</vdr-chip\r\n            >\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.value\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label || item }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.value\">\r\n            <vdr-chip [colorFrom]=\"item.value\"\r\n            >\r\n                <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                {{ item.value }}</vdr-chip\r\n            >\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n<ng-content></ng-content>\r\n", styles: [":host{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}@media screen and (min-width: 992px){:host{flex-direction:row;min-width:300px}}ng-select{width:100%}@media screen and (min-width: 992px){ng-select{min-width:300px}}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AssetSearchInputComponent, selector: "vdr-asset-search-input", inputs: { tags: "tags" }, outputs: { searchTermChange: "searchTermChange", tagsChange: "tagsChange" }, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true, static: true }], ngImport: i0, template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-asset-name-or-tag' | translate\"\r\n    [items]=\"tags\"\r\n    [searchFn]=\"filterTagResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.value\">\r\n            <vdr-chip [colorFrom]=\"item.value\" icon=\"close\" (iconClick)=\"clear(item)\"\r\n            >\r\n                <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                {{ item.value }}</vdr-chip\r\n            >\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.value\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label || item }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.value\">\r\n            <vdr-chip [colorFrom]=\"item.value\"\r\n            >\r\n                <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                {{ item.value }}</vdr-chip\r\n            >\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n<ng-content></ng-content>\r\n", styles: [":host{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}@media screen and (min-width: 992px){:host{flex-direction:row;min-width:300px}}ng-select{width:100%}@media screen and (min-width: 992px){ng-select{min-width:300px}}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssetSearchInputComponent, decorators: [{
             type: Component,
@@ -13174,7 +13168,7 @@ class AssetFileInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssetFileInputComponent, deps: [{ token: ServerConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AssetFileInputComponent, selector: "vdr-asset-file-input", inputs: { dropZoneTarget: "dropZoneTarget", uploading: "uploading" }, outputs: { selectFiles: "selectFiles" }, host: { listeners: { "document:dragenter": "onDragEnter()", "document:dragleave": "onDragLeave($event)" } }, ngImport: i0, template: "<input type=\"file\" class=\"file-input\" #fileInput (change)=\"select($event)\" multiple [accept]=\"accept\" />\r\n<button class=\"btn btn-primary\" (click)=\"fileInput.click()\" [disabled]=\"uploading\">\r\n    <ng-container *ngIf=\"uploading; else selectable\">\r\n        <clr-spinner clrInline></clr-spinner>\r\n        {{ 'asset.uploading' | translate }}\r\n    </ng-container>\r\n    <ng-template #selectable>\r\n        <clr-icon shape=\"upload-cloud\"></clr-icon>\r\n        {{ 'asset.upload-assets' | translate }}\r\n    </ng-template>\r\n</button>\r\n<div\r\n    class=\"drop-zone\"\r\n    [ngStyle]=\"dropZoneStyle\"\r\n    [class.visible]=\"dragging\"\r\n    [class.dragging-over]=\"overDropZone\"\r\n    (dragenter)=\"overDropZone = true\"\r\n    (dragleave)=\"overDropZone = false\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n    #dropZone\r\n>\r\n    <div class=\"drop-label\" (dragenter)=\"overDropZone = true\">\r\n        <clr-icon shape=\"upload-cloud\" size=\"32\"></clr-icon>\r\n        {{ 'catalog.drop-files-to-upload' | translate }}\r\n    </div>\r\n</div>\r\n", styles: [".file-input{display:none}.drop-zone{position:fixed;background-color:var(--color-primary-500);border:3px dashed var(--color-component-border-300);opacity:0;visibility:hidden;z-index:1000;transition:opacity .2s,background-color .2s,visibility 0s .2s;display:flex;align-items:center;justify-content:center}.drop-zone.visible{opacity:.3;visibility:visible;transition:opacity .2s,background-color .2s,border .2s,visibility 0s}.drop-zone .drop-label{background-color:#fffc;border-radius:3px;padding:24px;font-size:32px;pointer-events:none;opacity:.5;transition:opacity .2s}.drop-zone.dragging-over{border-color:#fff;background-color:var(--color-primary-500);opacity:.7;transition:background-color .2s,border .2s}.drop-zone.dragging-over .drop-label{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "component", type: i1$3.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AssetFileInputComponent, selector: "vdr-asset-file-input", inputs: { dropZoneTarget: "dropZoneTarget", uploading: "uploading" }, outputs: { selectFiles: "selectFiles" }, host: { listeners: { "document:dragenter": "onDragEnter()", "document:dragleave": "onDragLeave($event)" } }, ngImport: i0, template: "<input type=\"file\" class=\"file-input\" #fileInput (change)=\"select($event)\" multiple [accept]=\"accept\" />\r\n<button class=\"btn btn-primary\" (click)=\"fileInput.click()\" [disabled]=\"uploading\">\r\n    <ng-container *ngIf=\"uploading; else selectable\">\r\n        <clr-spinner clrInline></clr-spinner>\r\n        {{ 'asset.uploading' | translate }}\r\n    </ng-container>\r\n    <ng-template #selectable>\r\n        <clr-icon shape=\"upload-cloud\"></clr-icon>\r\n        {{ 'asset.upload-assets' | translate }}\r\n    </ng-template>\r\n</button>\r\n<div\r\n    class=\"drop-zone\"\r\n    [ngStyle]=\"dropZoneStyle\"\r\n    [class.visible]=\"dragging\"\r\n    [class.dragging-over]=\"overDropZone\"\r\n    (dragenter)=\"overDropZone = true\"\r\n    (dragleave)=\"overDropZone = false\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n    #dropZone\r\n>\r\n    <div class=\"drop-label\" (dragenter)=\"overDropZone = true\">\r\n        <clr-icon shape=\"upload-cloud\" size=\"32\"></clr-icon>\r\n        {{ 'catalog.drop-files-to-upload' | translate }}\r\n    </div>\r\n</div>\r\n", styles: [".file-input{display:none}.drop-zone{position:fixed;background-color:var(--color-primary-500);border:3px dashed var(--color-component-border-300);opacity:0;visibility:hidden;z-index:1000;transition:opacity .2s,background-color .2s,visibility 0s .2s;display:flex;align-items:center;justify-content:center}.drop-zone.visible{opacity:.3;visibility:visible;transition:opacity .2s,background-color .2s,border .2s,visibility 0s}.drop-zone .drop-label{background-color:#fffc;border-radius:3px;padding:24px;font-size:32px;pointer-events:none;opacity:.5;transition:opacity .2s}.drop-zone.dragging-over{border-color:#fff;background-color:var(--color-primary-500);opacity:.7;transition:background-color .2s,border .2s}.drop-zone.dragging-over .drop-label{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "component", type: i1$2.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssetFileInputComponent, decorators: [{
             type: Component,
@@ -13236,7 +13230,7 @@ class ManageTagsDialogComponent {
         return forkJoin(operations).subscribe(() => this.resolveWith(true));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ManageTagsDialogComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ManageTagsDialogComponent, selector: "vdr-manage-tags-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <span>{{ 'common.manage-tags' | translate }}</span>\r\n</ng-template>\r\n<p class=\"mt0 mb-4\">{{ 'common.manage-tags-description' | translate }}</p>\r\n<ul class=\"tag-list\" *ngFor=\"let tag of allTags$ | async\">\r\n    <li class=\"mb-2 p-1\" [class.to-delete]=\"markedAsDeleted(tag.id)\">\r\n        <clr-icon shape=\"tag\" class=\"is-solid mr2\" [style.color]=\"tag.value | stringToColor\"></clr-icon>\r\n        <input type=\"text\" (input)=\"updateTagValue(tag.id, $event.target.value)\" [value]=\"tag.value\" />\r\n        <button class=\"icon-button\" (click)=\"toggleDelete(tag.id)\">\r\n            <clr-icon shape=\"trash\" class=\"is-danger\" [class.is-solid]=\"markedAsDeleted(tag.id)\"></clr-icon>\r\n        </button>\r\n    </li>\r\n</ul>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"resolveWith(false)\" class=\"btn btn-secondary\">\r\n        {{ 'common.cancel' | translate }}\r\n    </button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"saveChanges()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"!toUpdate.length && !toDelete.length\"\r\n    >\r\n        {{ 'common.update' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".tag-list{list-style-type:none}.tag-list li{display:flex;align-items:center}.tag-list li input{max-width:170px}.tag-list li.to-delete{opacity:.7;background-color:var(--color-component-bg-300)}.tag-list li.to-delete input{background-color:transparent!important}\n"], 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: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: StringToColorPipe, name: "stringToColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ManageTagsDialogComponent, selector: "vdr-manage-tags-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <span>{{ 'common.manage-tags' | translate }}</span>\r\n</ng-template>\r\n<p class=\"mt0 mb-4\">{{ 'common.manage-tags-description' | translate }}</p>\r\n<ul class=\"tag-list\" *ngFor=\"let tag of allTags$ | async\">\r\n    <li class=\"mb-2 p-1\" [class.to-delete]=\"markedAsDeleted(tag.id)\">\r\n        <clr-icon shape=\"tag\" class=\"is-solid mr2\" [style.color]=\"tag.value | stringToColor\"></clr-icon>\r\n        <input type=\"text\" (input)=\"updateTagValue(tag.id, $event.target.value)\" [value]=\"tag.value\" />\r\n        <button class=\"icon-button\" (click)=\"toggleDelete(tag.id)\">\r\n            <clr-icon shape=\"trash\" class=\"is-danger\" [class.is-solid]=\"markedAsDeleted(tag.id)\"></clr-icon>\r\n        </button>\r\n    </li>\r\n</ul>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"resolveWith(false)\" class=\"btn btn-secondary\">\r\n        {{ 'common.cancel' | translate }}\r\n    </button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"saveChanges()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"!toUpdate.length && !toDelete.length\"\r\n    >\r\n        {{ 'common.update' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".tag-list{list-style-type:none}.tag-list li{display:flex;align-items:center}.tag-list li input{max-width:170px}.tag-list li.to-delete{opacity:.7;background-color:var(--color-component-bg-300)}.tag-list li.to-delete input{background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: StringToColorPipe, name: "stringToColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ManageTagsDialogComponent, decorators: [{
             type: Component,
@@ -13347,7 +13341,7 @@ class TagSelectorComponent {
                 useExisting: TagSelectorComponent,
                 multi: true,
             },
-        ], ngImport: i0, template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [multiple]=\"true\"\r\n    [ngModel]=\"_value\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"true\"\r\n    [disabled]=\"disabled\"\r\n    [placeholder]=\"placeholder\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-tag=\"item\" let-clear=\"clear\">\r\n        <vdr-chip [colorFrom]=\"tag\" icon=\"close\" (iconClick)=\"clear(tag)\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let tag of allTags$ | async\" [value]=\"tag\">\r\n        <vdr-chip [colorFrom]=\"tag\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag }}</vdr-chip>\r\n    </ng-option>\r\n</ng-select>\r\n", styles: [":host{display:block;margin-top:12px;position:relative}\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: 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: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i3$1.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { kind: "directive", type: i3$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [multiple]=\"true\"\r\n    [ngModel]=\"_value\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"true\"\r\n    [disabled]=\"disabled\"\r\n    [placeholder]=\"placeholder\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-tag=\"item\" let-clear=\"clear\">\r\n        <vdr-chip [colorFrom]=\"tag\" icon=\"close\" (iconClick)=\"clear(tag)\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let tag of allTags$ | async\" [value]=\"tag\">\r\n        <vdr-chip [colorFrom]=\"tag\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag }}</vdr-chip>\r\n    </ng-option>\r\n</ng-select>\r\n", styles: [":host{display:block;margin-top:12px;position:relative}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i3$1.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { kind: "directive", type: i3$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TagSelectorComponent, decorators: [{
             type: Component,
@@ -13517,7 +13511,7 @@ class CustomFieldControlComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CustomFieldControlComponent, deps: [{ token: DataService }, { token: CustomFieldComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: { entityName: "entityName", formGroup: ["customFieldsFormGroup", "formGroup"], customField: "customField", compact: "compact", showLabel: "showLabel", readonly: "readonly" }, ngImport: i0, template: "<div class=\"clr-form-control\" *ngIf=\"compact\">\r\n    <div class=\"flex\">\r\n        <label for=\"basic\" class=\"clr-control-label\"\r\n            >{{ customField | customFieldLabel: (uiLanguage$ | async) }}\r\n            <vdr-help-tooltip\r\n                *ngIf=\"customField | customFieldDescription: (uiLanguage$ | async) as description\"\r\n                [content]=\"description\"\r\n            ></vdr-help-tooltip>\r\n        </label>\r\n    </div>\r\n    <div class=\"clr-control-container\">\r\n        <div class=\"clr-input-wrapper\">\r\n            <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n<vdr-form-field\r\n    [label]=\"customField | customFieldLabel: (uiLanguage$ | async)\"\r\n    [tooltip]=\"customField | customFieldDescription: (uiLanguage$ | async)\"\r\n    [for]=\"customField.name\"\r\n    *ngIf=\"!compact\"\r\n>\r\n    <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n</vdr-form-field>\r\n\r\n<ng-template #inputs>\r\n    <ng-container [formGroup]=\"formGroup\">\r\n        <vdr-dynamic-form-input\r\n            [formControlName]=\"customField.name\"\r\n            [readonly]=\"readonly || customField.readonly\"\r\n            [control]=\"formGroup.get(customField.name)\"\r\n            [def]=\"getFieldDefinition()\"\r\n        >\r\n        </vdr-dynamic-form-input>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%}:host .toggle-switch{margin-top:0;margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "component", type: HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: ["content", "position"] }, { kind: "component", type: DynamicFormInputComponent, selector: "vdr-dynamic-form-input", inputs: ["def", "readonly", "control"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: CustomFieldLabelPipe, name: "customFieldLabel" }, { kind: "pipe", type: CustomFieldDescriptionPipe, name: "customFieldDescription" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: { entityName: "entityName", formGroup: ["customFieldsFormGroup", "formGroup"], customField: "customField", compact: "compact", showLabel: "showLabel", readonly: "readonly" }, ngImport: i0, template: "<div class=\"clr-form-control\" *ngIf=\"compact\">\r\n    <div class=\"flex\">\r\n        <label for=\"basic\" class=\"clr-control-label\"\r\n            >{{ customField | customFieldLabel: (uiLanguage$ | async) }}\r\n            <vdr-help-tooltip\r\n                *ngIf=\"customField | customFieldDescription: (uiLanguage$ | async) as description\"\r\n                [content]=\"description\"\r\n            ></vdr-help-tooltip>\r\n        </label>\r\n    </div>\r\n    <div class=\"clr-control-container\">\r\n        <div class=\"clr-input-wrapper\">\r\n            <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n<vdr-form-field\r\n    [label]=\"customField | customFieldLabel: (uiLanguage$ | async)\"\r\n    [tooltip]=\"customField | customFieldDescription: (uiLanguage$ | async)\"\r\n    [for]=\"customField.name\"\r\n    *ngIf=\"!compact\"\r\n>\r\n    <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n</vdr-form-field>\r\n\r\n<ng-template #inputs>\r\n    <ng-container [formGroup]=\"formGroup\">\r\n        <vdr-dynamic-form-input\r\n            [formControlName]=\"customField.name\"\r\n            [readonly]=\"readonly || customField.readonly\"\r\n            [control]=\"formGroup.get(customField.name)\"\r\n            [def]=\"getFieldDefinition()\"\r\n        >\r\n        </vdr-dynamic-form-input>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%}:host .toggle-switch{margin-top:0;margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "component", type: HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: ["content", "position"] }, { kind: "component", type: DynamicFormInputComponent, selector: "vdr-dynamic-form-input", inputs: ["def", "readonly", "control"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: CustomFieldLabelPipe, name: "customFieldLabel" }, { kind: "pipe", type: CustomFieldDescriptionPipe, name: "customFieldDescription" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CustomFieldControlComponent, decorators: [{
             type: Component,
@@ -13582,7 +13576,7 @@ class TabbedCustomFieldsComponent {
             .map(([tabName, customFields]) => ({ tabName, customFields }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TabbedCustomFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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: "17.2.4", 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$2.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }, { kind: "component", type: i1$2.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { kind: "component", type: i1$2.ClrTab, selector: "clr-tab" }, { kind: "component", type: i1$2.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { kind: "directive", type: i1$2.ClrTabLink, selector: "[clrTabLink]", inputs: ["id", "clrTabLinkInOverflow"] }, { kind: "directive", type: i1$2.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { kind: "directive", type: i1$2.Ç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: "17.2.4", ngImport: i0, type: TabbedCustomFieldsComponent, decorators: [{
             type: Component,
@@ -13606,7 +13600,7 @@ class AssetPreviewLinksComponent {
         this.sizes = ['tiny', 'thumb', 'small', 'medium', 'large', 'full'];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssetPreviewLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: { asset: "asset" }, ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"button\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"link\"></clr-icon> {{ 'catalog.asset-preview-links' | translate\r\n        }}<clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <a\r\n            *ngFor=\"let size of sizes\"\r\n            [href]=\"asset | assetPreview : size\"\r\n            [title]=\"asset | assetPreview : size\"\r\n            target=\"_blank\"\r\n            class=\"asset-preview-link\"\r\n            vdrDropdownItem\r\n        >\r\n            <vdr-chip\r\n                ><clr-icon shape=\"link\"></clr-icon> {{ 'asset.preview' | translate }}: {{ size }}</vdr-chip\r\n            >\r\n        </a>\r\n    </vdr-dropdown-menu></vdr-dropdown\r\n>\r\n", styles: [".asset-preview-link{font-size:12px;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { 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: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: { asset: "asset" }, ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"button\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"link\"></clr-icon> {{ 'catalog.asset-preview-links' | translate\r\n        }}<clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <a\r\n            *ngFor=\"let size of sizes\"\r\n            [href]=\"asset | assetPreview : size\"\r\n            [title]=\"asset | assetPreview : size\"\r\n            target=\"_blank\"\r\n            class=\"asset-preview-link\"\r\n            vdrDropdownItem\r\n        >\r\n            <vdr-chip\r\n                ><clr-icon shape=\"link\"></clr-icon> {{ 'asset.preview' | translate }}: {{ size }}</vdr-chip\r\n            >\r\n        </a>\r\n    </vdr-dropdown-menu></vdr-dropdown\r\n>\r\n", styles: [".asset-preview-link{font-size:12px;display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { 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: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssetPreviewLinksComponent, decorators: [{
             type: Component,
@@ -13946,7 +13940,7 @@ class AssetPreviewComponent {
         this.disablePreviousButton = this.assets?.[this.previewAssetIndex - 1]?.id ? false : true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssetPreviewComponent, deps: [{ token: i1$4.FormBuilder }, { token: DataService }, { token: NotificationService }, { token: i0.ChangeDetectorRef }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: { asset: "asset", assets: "assets", editable: "editable", customFields: "customFields", customFieldsForm: "customFieldsForm" }, outputs: { assetChange: "assetChange", editClick: "editClick" }, viewQueries: [{ propertyName: "imageElementRef", first: true, predicate: ["imageElement"], descendants: true, static: true }, { propertyName: "previewDivRef", first: true, predicate: ["previewDiv"], descendants: true, static: true }], ngImport: i0, template: "<vdr-page-detail-layout>\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <div *ngIf=\"!editable\" class=\"mb-2\">\r\n                <a\r\n                    class=\"button-ghost\"\r\n                    [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n                    (click)=\"editClick.emit()\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                    {{ 'common.edit' | translate }}\r\n                    <clr-icon shape=\"arrow right\"></clr-icon>\r\n                </a>\r\n            </div>\r\n            <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n                <input\r\n                    type=\"text\"\r\n                    [formControl]=\"form.get('name')\"\r\n                    [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n                <span class=\"elide\">\r\n                    {{ asset.name }}\r\n                </span>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n                <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                    getSourceFileName()\r\n                }}</a>\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n                {{ asset.fileSize | filesize }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n                {{ asset.width }} x {{ asset.height }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n                <span *ngIf=\"fpx\"\r\n                    ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n                    {{ fpy | number : '1.2-2' }}</span\r\n                >\r\n                <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n                <div class=\"flex mt-1\">\r\n                    <button\r\n                        class=\"button-small mr-1\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        (click)=\"setFocalPointStart()\"\r\n                    >\r\n                        <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                        <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n                    </button>\r\n                    <button\r\n                        class=\"button-small\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        *ngIf=\"!!fpx\"\r\n                        (click)=\"removeFocalPoint()\"\r\n                    >\r\n                        {{ 'asset.unset-focal-point' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n                <ng-container *ngIf=\"editable\">\r\n                    <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n                    <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n                        <clr-icon shape=\"tags\"></clr-icon>\r\n                        {{ 'common.manage-tags' | translate }}\r\n                    </button>\r\n                </ng-container>\r\n                <div *ngIf=\"!editable\">\r\n                    <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                        <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                        {{ tag.value }}</vdr-chip\r\n                    >\r\n                </div>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Asset\"\r\n                [compact]=\"true\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"customFieldsForm\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'asset.preview' | translate\">\r\n            <vdr-form-field>\r\n                <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                    <option value=\"tiny\">tiny</option>\r\n                    <option value=\"thumb\">thumb</option>\r\n                    <option value=\"small\">small</option>\r\n                    <option value=\"medium\">medium</option>\r\n                    <option value=\"large\">large</option>\r\n                    <option value=\"\">full size</option>\r\n                </select>\r\n            </vdr-form-field>\r\n            <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n            <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <div class=\"carousel-container\">\r\n        <button *ngIf=\"showSlideButtons\" (click)=\"previousImage()\" class=\"carousel-button\" [class.disabled]=\"disablePreviousButton\">\r\n            <clr-icon shape=\"caret left\" class=\"color-weight-800\"></clr-icon>\r\n        </button>\r\n        <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n            <div class=\"image-wrapper\">\r\n                <vdr-focal-point-control\r\n                    [width]=\"width\"\r\n                    [height]=\"height\"\r\n                    [fpx]=\"fpx\"\r\n                    [fpy]=\"fpy\"\r\n                    [editable]=\"settingFocalPoint\"\r\n                    (focalPointChange)=\"onFocalPointChange($event)\"\r\n                >\r\n                    <img\r\n                        class=\"asset-image\"\r\n                        [src]=\"asset | assetPreview : size\"\r\n                        [ngClass]=\"size\"\r\n                        #imageElement\r\n                        (load)=\"onImageLoad()\"\r\n                    />\r\n                </vdr-focal-point-control>\r\n                <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n                    <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                        <clr-icon shape=\"times\"></clr-icon>\r\n                    </button>\r\n                    <button\r\n                        class=\"btn btn-primary btn-sm\"\r\n                        (click)=\"setFocalPointEnd()\"\r\n                        [disabled]=\"!lastFocalPoint\"\r\n                    >\r\n                        <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                        {{ 'asset.set-focal-point' | translate }}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <button *ngIf=\"showSlideButtons\" (click)=\"nextImage()\" class=\"carousel-button\" [class.disabled]=\"disableNextButton\">\r\n            <clr-icon shape=\"caret right\" class=\"color-weight-800\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</vdr-page-detail-layout>\r\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:750px;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);margin-top:var(--space-unit);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-inline-start:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-inline-end:12px}.carousel-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.carousel-container button.carousel-button{cursor:pointer;width:30px;height:30px;border:none;border-radius:50%;text-align:center;background-color:var(--color-grey-300)}.carousel-container button.carousel-button:hover{background-color:var(--color-grey-400)}.carousel-container .disabled{pointer-events:none;opacity:.4}\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$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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: ["visible", "editable", "width", "height", "fpx", "fpy"], outputs: ["focalPointChange"] }, { kind: "component", type: TagSelectorComponent, selector: "vdr-tag-selector", inputs: ["placeholder"] }, { kind: "component", type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "component", type: PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }, { kind: "pipe", type: HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: { asset: "asset", assets: "assets", editable: "editable", customFields: "customFields", customFieldsForm: "customFieldsForm" }, outputs: { assetChange: "assetChange", editClick: "editClick" }, viewQueries: [{ propertyName: "imageElementRef", first: true, predicate: ["imageElement"], descendants: true, static: true }, { propertyName: "previewDivRef", first: true, predicate: ["previewDiv"], descendants: true, static: true }], ngImport: i0, template: "<vdr-page-detail-layout>\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <div *ngIf=\"!editable\" class=\"mb-2\">\r\n                <a\r\n                    class=\"button-ghost\"\r\n                    [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n                    (click)=\"editClick.emit()\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                    {{ 'common.edit' | translate }}\r\n                    <clr-icon shape=\"arrow right\"></clr-icon>\r\n                </a>\r\n            </div>\r\n            <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n                <input\r\n                    type=\"text\"\r\n                    [formControl]=\"form.get('name')\"\r\n                    [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n                <span class=\"elide\">\r\n                    {{ asset.name }}\r\n                </span>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n                <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                    getSourceFileName()\r\n                }}</a>\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n                {{ asset.fileSize | filesize }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n                {{ asset.width }} x {{ asset.height }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n                <span *ngIf=\"fpx\"\r\n                    ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n                    {{ fpy | number : '1.2-2' }}</span\r\n                >\r\n                <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n                <div class=\"flex mt-1\">\r\n                    <button\r\n                        class=\"button-small mr-1\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        (click)=\"setFocalPointStart()\"\r\n                    >\r\n                        <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                        <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n                    </button>\r\n                    <button\r\n                        class=\"button-small\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        *ngIf=\"!!fpx\"\r\n                        (click)=\"removeFocalPoint()\"\r\n                    >\r\n                        {{ 'asset.unset-focal-point' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n                <ng-container *ngIf=\"editable\">\r\n                    <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n                    <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n                        <clr-icon shape=\"tags\"></clr-icon>\r\n                        {{ 'common.manage-tags' | translate }}\r\n                    </button>\r\n                </ng-container>\r\n                <div *ngIf=\"!editable\">\r\n                    <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                        <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                        {{ tag.value }}</vdr-chip\r\n                    >\r\n                </div>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Asset\"\r\n                [compact]=\"true\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"customFieldsForm\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'asset.preview' | translate\">\r\n            <vdr-form-field>\r\n                <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                    <option value=\"tiny\">tiny</option>\r\n                    <option value=\"thumb\">thumb</option>\r\n                    <option value=\"small\">small</option>\r\n                    <option value=\"medium\">medium</option>\r\n                    <option value=\"large\">large</option>\r\n                    <option value=\"\">full size</option>\r\n                </select>\r\n            </vdr-form-field>\r\n            <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n            <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <div class=\"carousel-container\">\r\n        <button *ngIf=\"showSlideButtons\" (click)=\"previousImage()\" class=\"carousel-button\" [class.disabled]=\"disablePreviousButton\">\r\n            <clr-icon shape=\"caret left\" class=\"color-weight-800\"></clr-icon>\r\n        </button>\r\n        <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n            <div class=\"image-wrapper\">\r\n                <vdr-focal-point-control\r\n                    [width]=\"width\"\r\n                    [height]=\"height\"\r\n                    [fpx]=\"fpx\"\r\n                    [fpy]=\"fpy\"\r\n                    [editable]=\"settingFocalPoint\"\r\n                    (focalPointChange)=\"onFocalPointChange($event)\"\r\n                >\r\n                    <img\r\n                        class=\"asset-image\"\r\n                        [src]=\"asset | assetPreview : size\"\r\n                        [ngClass]=\"size\"\r\n                        #imageElement\r\n                        (load)=\"onImageLoad()\"\r\n                    />\r\n                </vdr-focal-point-control>\r\n                <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n                    <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                        <clr-icon shape=\"times\"></clr-icon>\r\n                    </button>\r\n                    <button\r\n                        class=\"btn btn-primary btn-sm\"\r\n                        (click)=\"setFocalPointEnd()\"\r\n                        [disabled]=\"!lastFocalPoint\"\r\n                    >\r\n                        <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                        {{ 'asset.set-focal-point' | translate }}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <button *ngIf=\"showSlideButtons\" (click)=\"nextImage()\" class=\"carousel-button\" [class.disabled]=\"disableNextButton\">\r\n            <clr-icon shape=\"caret right\" class=\"color-weight-800\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</vdr-page-detail-layout>\r\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:750px;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);margin-top:var(--space-unit);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-inline-start:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-inline-end:12px}.carousel-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.carousel-container button.carousel-button{cursor:pointer;width:30px;height:30px;border:none;border-radius:50%;text-align:center;background-color:var(--color-grey-300)}.carousel-container button.carousel-button:hover{background-color:var(--color-grey-400)}.carousel-container .disabled{pointer-events:none;opacity:.4}\n"], dependencies: [{ kind: "directive", type: i1$2.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$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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: ["visible", "editable", "width", "height", "fpx", "fpy"], outputs: ["focalPointChange"] }, { kind: "component", type: TagSelectorComponent, selector: "vdr-tag-selector", inputs: ["placeholder"] }, { kind: "component", type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "component", type: PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }, { kind: "pipe", type: HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssetPreviewComponent, decorators: [{
             type: Component,
@@ -14017,7 +14011,7 @@ class EntityInfoComponent {
         this.small = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: EntityInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: EntityInfoComponent, selector: "vdr-entity-info", inputs: { small: "small", entity: "entity" }, ngImport: i0, template: "<vdr-dropdown *ngIf=\"entity.id\">\r\n    <button class=\"button-small\" [class.btn-sm]=\"small\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"info-standard\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu>\r\n        <div class=\"entity-info\">\r\n            <vdr-labeled-data [label]=\"'common.ID' | translate\">\r\n                {{ entity.id }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"entity.createdAt\" [label]=\"'common.created-at' | translate\">\r\n                {{ entity.createdAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"entity.updatedAt\" [label]=\"'common.updated-at' | translate\">\r\n                {{ entity.updatedAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".info-button{color:var(--color-icon-button)}.entity-info{margin:0 12px}\n"], 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: "component", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: EntityInfoComponent, selector: "vdr-entity-info", inputs: { small: "small", entity: "entity" }, ngImport: i0, template: "<vdr-dropdown *ngIf=\"entity.id\">\r\n    <button class=\"button-small\" [class.btn-sm]=\"small\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"info-standard\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu>\r\n        <div class=\"entity-info\">\r\n            <vdr-labeled-data [label]=\"'common.ID' | translate\">\r\n                {{ entity.id }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"entity.createdAt\" [label]=\"'common.created-at' | translate\">\r\n                {{ entity.createdAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"entity.updatedAt\" [label]=\"'common.updated-at' | translate\">\r\n                {{ entity.updatedAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".info-button{color:var(--color-icon-button)}.entity-info{margin:0 12px}\n"], dependencies: [{ kind: "directive", type: i1$2.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: "component", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: EntityInfoComponent, decorators: [{
             type: Component,
@@ -14090,7 +14084,7 @@ class AssetGalleryComponent {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssetGalleryComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: { assets: "assets", multiSelect: "multiSelect", canDelete: "canDelete" }, outputs: { selectionChange: "selectionChange", deleteAssets: "deleteAssets", editAssetClick: "editAssetClick" }, 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]=\"['/catalog/assets/', lastSelected().id]\" (click)=\"editAssetClick.emit()\" 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", "info", "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: "17.2.4", type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: { assets: "assets", multiSelect: "multiSelect", canDelete: "canDelete" }, outputs: { selectionChange: "selectionChange", deleteAssets: "deleteAssets", editAssetClick: "editAssetClick" }, 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]=\"['/catalog/assets/', lastSelected().id]\" (click)=\"editAssetClick.emit()\" 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$2.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", "info", "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: "17.2.4", ngImport: i0, type: AssetGalleryComponent, decorators: [{
             type: Component,
@@ -14263,7 +14257,7 @@ class RelationCardComponent {
         this.remove = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RelationCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RelationCardComponent, selector: "vdr-relation-card", inputs: { entity: "entity", placeholderIcon: "placeholderIcon", selectLabel: "selectLabel", readonly: "readonly", removable: "removable" }, outputs: { select: "select", remove: "remove" }, queries: [{ propertyName: "previewTemplate", first: true, predicate: RelationCardPreviewDirective, descendants: true, read: TemplateRef }, { propertyName: "detailTemplate", first: true, predicate: RelationCardDetailDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<div class=\"flex\">\r\n    <ng-container *ngIf=\"entity; else placeholder\">\r\n        <div class=\"preview\">\r\n            <ng-container *ngTemplateOutlet=\"previewTemplate; context: { entity: entity }\"></ng-container>\r\n        </div>\r\n        <div class=\"detail\">\r\n            <div class=\"pl-1\">\r\n                <ng-container *ngTemplateOutlet=\"detailTemplate; context: { entity: entity }\"></ng-container>\r\n            </div>\r\n            <button *ngIf=\"!readonly\" class=\"button-small m-1\" (click)=\"select.emit()\">\r\n                <clr-icon shape=\"link\"></clr-icon> {{ 'common.change-selection' | translate }}\r\n            </button>\r\n            <button *ngIf=\"!readonly && removable\" class=\"button-small m-1\" (click)=\"remove.emit()\">\r\n                <clr-icon shape=\"times\"></clr-icon> {{ 'common.remove' | translate }}\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n    <ng-template #placeholder>\r\n        <div class=\"preview\">\r\n            <div class=\"placeholder\" (click)=\"!readonly && select.emit()\">\r\n                <clr-icon [attr.shape]=\"placeholderIcon\" size=\"50\"></clr-icon>\r\n            </div>\r\n        </div>\r\n        <div class=\"detail\">\r\n            <div class=\"pl3 not-set\">{{ 'common.not-set' | translate }}</div>\r\n            <button *ngIf=\"!readonly\" class=\"button-small m-1\" (click)=\"select.emit()\">\r\n                <clr-icon shape=\"link\"></clr-icon> {{ selectLabel }}\r\n            </button>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n", styles: [":host{display:block;min-width:300px}.placeholder,.not-set{color:var(--color-grey-300)}.detail{flex:1;overflow:hidden}.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RelationCardComponent, selector: "vdr-relation-card", inputs: { entity: "entity", placeholderIcon: "placeholderIcon", selectLabel: "selectLabel", readonly: "readonly", removable: "removable" }, outputs: { select: "select", remove: "remove" }, queries: [{ propertyName: "previewTemplate", first: true, predicate: RelationCardPreviewDirective, descendants: true, read: TemplateRef }, { propertyName: "detailTemplate", first: true, predicate: RelationCardDetailDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<div class=\"flex\">\r\n    <ng-container *ngIf=\"entity; else placeholder\">\r\n        <div class=\"preview\">\r\n            <ng-container *ngTemplateOutlet=\"previewTemplate; context: { entity: entity }\"></ng-container>\r\n        </div>\r\n        <div class=\"detail\">\r\n            <div class=\"pl-1\">\r\n                <ng-container *ngTemplateOutlet=\"detailTemplate; context: { entity: entity }\"></ng-container>\r\n            </div>\r\n            <button *ngIf=\"!readonly\" class=\"button-small m-1\" (click)=\"select.emit()\">\r\n                <clr-icon shape=\"link\"></clr-icon> {{ 'common.change-selection' | translate }}\r\n            </button>\r\n            <button *ngIf=\"!readonly && removable\" class=\"button-small m-1\" (click)=\"remove.emit()\">\r\n                <clr-icon shape=\"times\"></clr-icon> {{ 'common.remove' | translate }}\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n    <ng-template #placeholder>\r\n        <div class=\"preview\">\r\n            <div class=\"placeholder\" (click)=\"!readonly && select.emit()\">\r\n                <clr-icon [attr.shape]=\"placeholderIcon\" size=\"50\"></clr-icon>\r\n            </div>\r\n        </div>\r\n        <div class=\"detail\">\r\n            <div class=\"pl3 not-set\">{{ 'common.not-set' | translate }}</div>\r\n            <button *ngIf=\"!readonly\" class=\"button-small m-1\" (click)=\"select.emit()\">\r\n                <clr-icon shape=\"link\"></clr-icon> {{ selectLabel }}\r\n            </button>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n", styles: [":host{display:block;min-width:300px}.placeholder,.not-set{color:var(--color-grey-300)}.detail{flex:1;overflow:hidden}.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RelationCardComponent, decorators: [{
             type: Component,
@@ -14424,7 +14418,7 @@ class RelationProductInputComponent {
         this.parentFormControl.markAsDirty();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RelationProductInputComponent, deps: [{ token: ModalService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RelationProductInputComponent, selector: "vdr-relation-product-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectProduct()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"library\"\r\n    [entity]=\"product$ | async\"\r\n    [selectLabel]=\"'catalog.select-product' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-product=\"entity\">\r\n        <div>\r\n        <img class=\"thumb\" *ngIf=\"product.featuredAsset\" [src]=\"product.featuredAsset | assetPreview: 'tiny'\" />\r\n        </div>\r\n        <div class=\"placeholder\" *ngIf=\"!product.featuredAsset\">\r\n            <clr-icon shape=\"image\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-product=\"entity\">\r\n        <a [routerLink]=\"['/catalog/inventory', product.id]\">{{ product.name }}</a>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <img [src]=\"item.featuredAsset | assetPreview: 32\" />\r\n            {{ item.name }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [".placeholder{color:var(--color-grey-300)}.thumb{min-width:50px;object-fit:contain;border-radius:var(--border-radius)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { 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", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { kind: "directive", type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { kind: "directive", type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RelationProductInputComponent, selector: "vdr-relation-product-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectProduct()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"library\"\r\n    [entity]=\"product$ | async\"\r\n    [selectLabel]=\"'catalog.select-product' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-product=\"entity\">\r\n        <div>\r\n        <img class=\"thumb\" *ngIf=\"product.featuredAsset\" [src]=\"product.featuredAsset | assetPreview: 'tiny'\" />\r\n        </div>\r\n        <div class=\"placeholder\" *ngIf=\"!product.featuredAsset\">\r\n            <clr-icon shape=\"image\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-product=\"entity\">\r\n        <a [routerLink]=\"['/catalog/inventory', product.id]\">{{ product.name }}</a>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <img [src]=\"item.featuredAsset | assetPreview: 32\" />\r\n            {{ item.name }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [".placeholder{color:var(--color-grey-300)}.thumb{min-width:50px;object-fit:contain;border-radius:var(--border-radius)}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { 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", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { kind: "directive", type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { kind: "directive", type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RelationProductInputComponent, decorators: [{
             type: Component,
@@ -14495,7 +14489,7 @@ class RelationProductVariantInputComponent {
         this.parentFormControl.markAsDirty();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RelationProductVariantInputComponent, deps: [{ token: ModalService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RelationProductVariantInputComponent, selector: "vdr-relation-product-variant-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectProductVariant()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"library\"\r\n    [entity]=\"productVariant$ | async\"\r\n    [selectLabel]=\"'catalog.select-product-variant' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-variant=\"entity\">\r\n        <div>\r\n            <img\r\n                class=\"thumb\"\r\n                *ngIf=\"variant.featuredAsset || variant.product.featuredAsset as asset; else placeholder\"\r\n                [src]=\"asset | assetPreview : 'tiny'\"\r\n            />\r\n        </div>\r\n        <ng-template #placeholder>\r\n            <div class=\"placeholder\" *ngIf=\"!variant.featuredAsset\">\r\n                <clr-icon shape=\"image\" size=\"50\"></clr-icon>\r\n            </div>\r\n        </ng-template>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-variant=\"entity\">\r\n        <a [routerLink]=\"['/catalog/inventory', variant.product.id, { tab: 'variants' }]\">{{\r\n            variant.name\r\n        }}</a>\r\n        <div class=\"\">{{ variant.sku }}</div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <img\r\n                *ngIf=\"item.featuredAsset || item.product.featuredAsset as asset\"\r\n                [src]=\"asset | assetPreview : 32\"\r\n            />\r\n            {{ item.name }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [".placeholder{color:var(--color-grey-300)}.thumb{min-width:50px;object-fit:contain;border-radius:var(--border-radius)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { 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", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { kind: "directive", type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { kind: "directive", type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RelationProductVariantInputComponent, selector: "vdr-relation-product-variant-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectProductVariant()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"library\"\r\n    [entity]=\"productVariant$ | async\"\r\n    [selectLabel]=\"'catalog.select-product-variant' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-variant=\"entity\">\r\n        <div>\r\n            <img\r\n                class=\"thumb\"\r\n                *ngIf=\"variant.featuredAsset || variant.product.featuredAsset as asset; else placeholder\"\r\n                [src]=\"asset | assetPreview : 'tiny'\"\r\n            />\r\n        </div>\r\n        <ng-template #placeholder>\r\n            <div class=\"placeholder\" *ngIf=\"!variant.featuredAsset\">\r\n                <clr-icon shape=\"image\" size=\"50\"></clr-icon>\r\n            </div>\r\n        </ng-template>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-variant=\"entity\">\r\n        <a [routerLink]=\"['/catalog/inventory', variant.product.id, { tab: 'variants' }]\">{{\r\n            variant.name\r\n        }}</a>\r\n        <div class=\"\">{{ variant.sku }}</div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <img\r\n                *ngIf=\"item.featuredAsset || item.product.featuredAsset as asset\"\r\n                [src]=\"asset | assetPreview : 32\"\r\n            />\r\n            {{ item.name }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [".placeholder{color:var(--color-grey-300)}.thumb{min-width:50px;object-fit:contain;border-radius:var(--border-radius)}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { 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", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { kind: "directive", type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { kind: "directive", type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RelationProductVariantInputComponent, decorators: [{
             type: Component,
@@ -14547,7 +14541,7 @@ class RelationCustomerInputComponent {
         this.parentFormControl.markAsDirty();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RelationCustomerInputComponent, deps: [{ token: ModalService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RelationCustomerInputComponent, selector: "vdr-relation-customer-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectCustomer()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"user\"\r\n    [entity]=\"customer\"\r\n    [selectLabel]=\"'customer.select-customer' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview>\r\n        <div class=\"placeholder\">\r\n            <clr-icon shape=\"user\" class=\"is-solid\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-c=\"entity\">\r\n        <div class=\"\">\r\n            <a [routerLink]=\"['/customer/customers', c.id]\">{{ c.firstName }} {{ c.lastName }}</a>\r\n        </div>\r\n        <div class=\"\">{{ c.emailAddress }}</div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <b>{{ item.emailAddress }}</b>\r\n            {{ item.firstName }} {{ item.lastName }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { kind: "directive", type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { kind: "directive", type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RelationCustomerInputComponent, selector: "vdr-relation-customer-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectCustomer()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"user\"\r\n    [entity]=\"customer\"\r\n    [selectLabel]=\"'customer.select-customer' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview>\r\n        <div class=\"placeholder\">\r\n            <clr-icon shape=\"user\" class=\"is-solid\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-c=\"entity\">\r\n        <div class=\"\">\r\n            <a [routerLink]=\"['/customer/customers', c.id]\">{{ c.firstName }} {{ c.lastName }}</a>\r\n        </div>\r\n        <div class=\"\">{{ c.emailAddress }}</div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <b>{{ item.emailAddress }}</b>\r\n            {{ item.firstName }} {{ item.lastName }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { kind: "directive", type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { kind: "directive", type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RelationCustomerInputComponent, decorators: [{
             type: Component,
@@ -14599,7 +14593,7 @@ class ObjectTreeComponent {
         return Object.entries(inputValue).map(([key, value]) => ({ key, value }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ObjectTreeComponent, deps: [{ token: ObjectTreeComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: { value: "value", isArrayItem: "isArrayItem" }, usesOnChanges: true, ngImport: i0, template: "<button class=\"icon-button\" (click)=\"expanded = !expanded\" *ngIf=\"depth !== 0 && !isArrayItem\">\r\n    <clr-icon shape=\"caret\" size=\"12\" [dir]=\"expanded ? 'down' : 'right'\"></clr-icon>\r\n</button>\r\n<ul\r\n    class=\"object-tree-node\"\r\n    [ngClass]=\"'depth-' + depth\"\r\n    [class.array-value]=\"valueIsArray\"\r\n    [class.array-item]=\"isArrayItem\"\r\n    [class.expanded]=\"expanded\"\r\n>\r\n    <li *ngFor=\"let entry of entries\">\r\n        <span class=\"key\" *ngIf=\"entry.key\">{{ entry.key }}:</span>\r\n        <ng-container *ngIf=\"isObject(entry.value); else primitive\">\r\n            <vdr-object-tree [value]=\"entry.value\" [isArrayItem]=\"valueIsArray\"></vdr-object-tree>\r\n        </ng-container>\r\n        <ng-template #primitive>\r\n            {{ entry.value }}\r\n        </ng-template>\r\n    </li>\r\n</ul>\r\n", styles: [".object-tree-node{list-style-type:none;line-height:16px;font-size:12px;overflow:hidden;max-height:0}.object-tree-node.depth-0{margin-inline-start:0;margin-top:8px}.object-tree-node.depth-1,.object-tree-node.depth-2,.object-tree-node.depth-3,.object-tree-node.depth-4,.object-tree-node.depth-5,.object-tree-node.depth-6{margin-inline-start:6px}.object-tree-node.expanded{max-height:5000px}.object-tree-node.array-item{margin-top:-16px;margin-inline-start:16px}.object-tree-node.array-value.expanded>li+li{margin-top:6px}.key{color:var(--color-text-300)}\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: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: { value: "value", isArrayItem: "isArrayItem" }, usesOnChanges: true, ngImport: i0, template: "<button class=\"icon-button\" (click)=\"expanded = !expanded\" *ngIf=\"depth !== 0 && !isArrayItem\">\r\n    <clr-icon shape=\"caret\" size=\"12\" [dir]=\"expanded ? 'down' : 'right'\"></clr-icon>\r\n</button>\r\n<ul\r\n    class=\"object-tree-node\"\r\n    [ngClass]=\"'depth-' + depth\"\r\n    [class.array-value]=\"valueIsArray\"\r\n    [class.array-item]=\"isArrayItem\"\r\n    [class.expanded]=\"expanded\"\r\n>\r\n    <li *ngFor=\"let entry of entries\">\r\n        <span class=\"key\" *ngIf=\"entry.key\">{{ entry.key }}:</span>\r\n        <ng-container *ngIf=\"isObject(entry.value); else primitive\">\r\n            <vdr-object-tree [value]=\"entry.value\" [isArrayItem]=\"valueIsArray\"></vdr-object-tree>\r\n        </ng-container>\r\n        <ng-template #primitive>\r\n            {{ entry.value }}\r\n        </ng-template>\r\n    </li>\r\n</ul>\r\n", styles: [".object-tree-node{list-style-type:none;line-height:16px;font-size:12px;overflow:hidden;max-height:0}.object-tree-node.depth-0{margin-inline-start:0;margin-top:8px}.object-tree-node.depth-1,.object-tree-node.depth-2,.object-tree-node.depth-3,.object-tree-node.depth-4,.object-tree-node.depth-5,.object-tree-node.depth-6{margin-inline-start:6px}.object-tree-node.expanded{max-height:5000px}.object-tree-node.array-item{margin-top:-16px;margin-inline-start:16px}.object-tree-node.array-value.expanded>li+li{margin-top:6px}.key{color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i1$2.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: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ObjectTreeComponent, decorators: [{
             type: Component,
@@ -14640,7 +14634,7 @@ class RelationGenericInputComponent {
         this.parentFormControl.markAsDirty();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RelationGenericInputComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RelationGenericInputComponent, selector: "vdr-relation-generic-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectRelationId()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"objects\"\r\n    [entity]=\"parentFormControl.value\"\r\n    [selectLabel]=\"'common.select-relation-id' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    {{ parentFormControl.value | json }}\r\n    <ng-template vdrRelationCardPreview>\r\n        <div class=\"placeholder\">\r\n            <clr-icon shape=\"objects\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-entity=\"entity\">\r\n        <div class=\"\">\r\n            {{ config.entity }}: <strong>{{ entity.id }}</strong>\r\n        </div>\r\n        <vdr-object-tree [value]=\"{ properties: parentFormControl.value }\"></vdr-object-tree>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <div class=\"id-select-wrapper\">\r\n        <clr-input-container>\r\n            <input [(ngModel)]=\"relationId\" type=\"text\" clrInput [readonly]=\"readonly\" />\r\n        </clr-input-container>\r\n        <div>\r\n            <button class=\"btn btn-primary m0\" (click)=\"select(relationId)\">\r\n                {{ 'common.confirm' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [".id-select-wrapper{display:flex;align-items:flex-end}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$3.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i1$3.ClrInputContainer, selector: "clr-input-container" }, { 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: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { kind: "directive", type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { kind: "directive", type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RelationGenericInputComponent, selector: "vdr-relation-generic-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectRelationId()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"objects\"\r\n    [entity]=\"parentFormControl.value\"\r\n    [selectLabel]=\"'common.select-relation-id' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    {{ parentFormControl.value | json }}\r\n    <ng-template vdrRelationCardPreview>\r\n        <div class=\"placeholder\">\r\n            <clr-icon shape=\"objects\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-entity=\"entity\">\r\n        <div class=\"\">\r\n            {{ config.entity }}: <strong>{{ entity.id }}</strong>\r\n        </div>\r\n        <vdr-object-tree [value]=\"{ properties: parentFormControl.value }\"></vdr-object-tree>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <div class=\"id-select-wrapper\">\r\n        <clr-input-container>\r\n            <input [(ngModel)]=\"relationId\" type=\"text\" clrInput [readonly]=\"readonly\" />\r\n        </clr-input-container>\r\n        <div>\r\n            <button class=\"btn btn-primary m0\" (click)=\"select(relationId)\">\r\n                {{ 'common.confirm' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [".id-select-wrapper{display:flex;align-items:flex-end}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$2.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i1$2.ClrInputContainer, selector: "clr-input-container" }, { 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: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { kind: "directive", type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { kind: "directive", type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RelationGenericInputComponent, decorators: [{
             type: Component,
@@ -15008,7 +15002,7 @@ class ExternalImageDialogComponent {
         this.previewLoaded = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ExternalImageDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ExternalImageDialogComponent, selector: "vdr-external-image-dialog", ngImport: i0, template: "<div class=\"flex\">\r\n    <form [formGroup]=\"form\" class=\"flex-spacer\" clrForm clrLayout=\"vertical\">\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-src' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"src\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-title' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"title\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-alt' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"alt\" />\r\n        </clr-input-container>\r\n    </form>\r\n    <div class=\"preview\">\r\n        <img\r\n            [src]=\"form.get('src')?.value\"\r\n            [class.visible]=\"previewLoaded\"\r\n            (load)=\"onImageLoad($event)\"\r\n            (error)=\"onImageError($event)\"\r\n        />\r\n        <div class=\"placeholder\" *ngIf=\"!previewLoaded\">\r\n            <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || !previewLoaded\">\r\n        <ng-container *ngIf=\"existing; else doesNotExist\">{{ 'common.update' | translate }}</ng-container>\r\n        <ng-template #doesNotExist>{{ 'editor.insert-image' | translate }}</ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: [".preview{display:flex;align-items:center;justify-content:center;max-width:150px;margin-inline-start:12px}.preview img{max-width:100%;display:none}.preview img.visible{display:block}.preview .placeholder{color:var(--color-grey-300)}\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.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { kind: "directive", type: i1$3.ClrLayout, selector: "[clrForm][clrLayout]", inputs: ["clrLayout"] }, { kind: "directive", type: i1$3.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i1$3.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[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: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ExternalImageDialogComponent, selector: "vdr-external-image-dialog", ngImport: i0, template: "<div class=\"flex\">\r\n    <form [formGroup]=\"form\" class=\"flex-spacer\" clrForm clrLayout=\"vertical\">\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-src' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"src\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-title' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"title\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-alt' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"alt\" />\r\n        </clr-input-container>\r\n    </form>\r\n    <div class=\"preview\">\r\n        <img\r\n            [src]=\"form.get('src')?.value\"\r\n            [class.visible]=\"previewLoaded\"\r\n            (load)=\"onImageLoad($event)\"\r\n            (error)=\"onImageError($event)\"\r\n        />\r\n        <div class=\"placeholder\" *ngIf=\"!previewLoaded\">\r\n            <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || !previewLoaded\">\r\n        <ng-container *ngIf=\"existing; else doesNotExist\">{{ 'common.update' | translate }}</ng-container>\r\n        <ng-template #doesNotExist>{{ 'editor.insert-image' | translate }}</ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: [".preview{display:flex;align-items:center;justify-content:center;max-width:150px;margin-inline-start:12px}.preview img{max-width:100%;display:none}.preview img.visible{display:block}.preview .placeholder{color:var(--color-grey-300)}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$2.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { kind: "directive", type: i1$2.ClrLayout, selector: "[clrForm][clrLayout]", inputs: ["clrLayout"] }, { kind: "directive", type: i1$2.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i1$2.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[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: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ExternalImageDialogComponent, decorators: [{
             type: Component,
@@ -15327,7 +15321,7 @@ class LinkDialogComponent {
         this.resolveWith(this.form.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LinkDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: LinkDialogComponent, selector: "vdr-link-dialog", ngImport: i0, template: "<form [formGroup]=\"form\">\r\n    <div class=\"form-grid\">\r\n        <vdr-form-field [label]=\"'editor.link-href' | translate\" for=\"href\" class=\"form-grid-span\">\r\n            <input id=\"href\" type=\"text\" formControlName=\"href\"/>\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'editor.link-title' | translate\" for=\"title\">\r\n            <input id=\"title\" type=\"text\" formControlName=\"title\"/>\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'editor.link-target' | translate\" for=\"target\">\r\n            <select id=\"target\" formControlName=\"target\">\r\n                <option value=\"\"></option>\r\n                <option value=\"_self\">_self</option>\r\n                <option value=\"_blank\">_blank</option>\r\n                <option value=\"_parent\">_parent</option>\r\n                <option value=\"_top\">_top</option>\r\n            </select>\r\n        </vdr-form-field>\r\n    </div>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn btn-secondary\" (click)=\"remove()\" *ngIf=\"existing\">\r\n        <clr-icon shape=\"unlink\"></clr-icon>\r\n        {{ 'editor.remove-link' | translate }}\r\n    </button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid\">\r\n        {{ 'editor.set-link' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: LinkDialogComponent, selector: "vdr-link-dialog", ngImport: i0, template: "<form [formGroup]=\"form\">\r\n    <div class=\"form-grid\">\r\n        <vdr-form-field [label]=\"'editor.link-href' | translate\" for=\"href\" class=\"form-grid-span\">\r\n            <input id=\"href\" type=\"text\" formControlName=\"href\"/>\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'editor.link-title' | translate\" for=\"title\">\r\n            <input id=\"title\" type=\"text\" formControlName=\"title\"/>\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'editor.link-target' | translate\" for=\"target\">\r\n            <select id=\"target\" formControlName=\"target\">\r\n                <option value=\"\"></option>\r\n                <option value=\"_self\">_self</option>\r\n                <option value=\"_blank\">_blank</option>\r\n                <option value=\"_parent\">_parent</option>\r\n                <option value=\"_top\">_top</option>\r\n            </select>\r\n        </vdr-form-field>\r\n    </div>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn btn-secondary\" (click)=\"remove()\" *ngIf=\"existing\">\r\n        <clr-icon shape=\"unlink\"></clr-icon>\r\n        {{ 'editor.remove-link' | translate }}\r\n    </button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid\">\r\n        {{ 'editor.set-link' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LinkDialogComponent, decorators: [{
             type: Component,
@@ -16094,13 +16088,13 @@ class ContextMenuComponent {
         inverted.overlayY = pos.overlayY === 'top' ? 'bottom' : 'top';
         return inverted;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ContextMenuComponent, deps: [{ token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: ContextMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ContextMenuComponent, selector: "vdr-context-menu", inputs: { editorMenuElement: "editorMenuElement" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["contextMenu"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #contextMenu>\r\n    <vdr-dropdown>\r\n        <button class=\"context-menu-trigger\" vdrDropdownTrigger [class.hidden]=\"hideTrigger$ | async\" (click)=\"triggerClick()\">\r\n            <clr-icon\r\n                *ngIf=\"menuConfig?.iconShape as shape\"\r\n                [attr.shape]=\"shape\"\r\n                size=\"16\"\r\n                class=\"mr2\"\r\n            ></clr-icon>\r\n            <span class=\"title-label\">{{ menuConfig?.title }}</span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\" customClasses=\"context-menu\">\r\n            <ng-container *ngFor=\"let item of menuConfig?.items\">\r\n                <button\r\n                    class=\"context-menu-item\"\r\n                    *ngIf=\"item.enabled && item.separator !== true\"\r\n                    type=\"button\"\r\n                    (click)=\"clickItem(item)\"\r\n                >\r\n                    <div *ngIf=\"item.iconClass\" class=\"cm-icon\" [ngClass]=\"item.iconClass\"></div>\r\n                    <clr-icon\r\n                        *ngIf=\"item.iconShape as shape\"\r\n                        [attr.shape]=\"shape\"\r\n                        size=\"16\"\r\n                        class=\"mr2\"\r\n                    ></clr-icon>\r\n                    {{ item.label }}\r\n                </button>\r\n                <div *ngIf=\"item.enabled && item.separator\" class=\"dropdown-divider\" role=\"separator\"></div>\r\n            </ng-container>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-template>\r\n", styles: [".context-menu-trigger{margin:0;display:flex;align-items:center;border:1px solid var(--color-component-border-200);font-size:90%;color:var(--color-text-200);border-radius:var(--border-radius-input);background-color:var(--color-component-bg-100)}.title-label{padding-inline-end:15px;position:relative}.title-label: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)}.context-menu-item{display:flex;align-items:center;width:100%;text-align:start;font-size:90%;color:var(--color-text-200);background-color:var(--color-component-bg-100);cursor:pointer;border:none}.context-menu-item:hover{background-color:var(--color-component-bg-200)}::ng-deep .dropdown-menu.context-menu{padding:0;background-color:var(--color-component-bg-100)}::ng-deep .context-menu-trigger{min-height:16px}::ng-deep .context-menu-trigger.hidden{visibility:hidden}::ng-deep .cm-icon.add-column{height:14px;width:4px;border:1px solid;margin:0 6px 0 8px;position:relative}::ng-deep .cm-icon.add-column:before{content:\"+\";position:absolute;font-size:16px;line-height:14px;left:-10px}::ng-deep .cm-icon.add-row{height:4px;width:14px;border:1px solid;margin:6px 4px 2px 0;position:relative}::ng-deep .cm-icon.add-row:before{content:\"+\";position:absolute;font-size:16px;line-height:14px;left:-2px;top:-10px}\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: "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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ContextMenuComponent, deps: [{ token: i1$3.Overlay }, { token: i0.ViewContainerRef }, { token: ContextMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ContextMenuComponent, selector: "vdr-context-menu", inputs: { editorMenuElement: "editorMenuElement" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["contextMenu"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #contextMenu>\r\n    <vdr-dropdown>\r\n        <button class=\"context-menu-trigger\" vdrDropdownTrigger [class.hidden]=\"hideTrigger$ | async\" (click)=\"triggerClick()\">\r\n            <clr-icon\r\n                *ngIf=\"menuConfig?.iconShape as shape\"\r\n                [attr.shape]=\"shape\"\r\n                size=\"16\"\r\n                class=\"mr2\"\r\n            ></clr-icon>\r\n            <span class=\"title-label\">{{ menuConfig?.title }}</span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\" customClasses=\"context-menu\">\r\n            <ng-container *ngFor=\"let item of menuConfig?.items\">\r\n                <button\r\n                    class=\"context-menu-item\"\r\n                    *ngIf=\"item.enabled && item.separator !== true\"\r\n                    type=\"button\"\r\n                    (click)=\"clickItem(item)\"\r\n                >\r\n                    <div *ngIf=\"item.iconClass\" class=\"cm-icon\" [ngClass]=\"item.iconClass\"></div>\r\n                    <clr-icon\r\n                        *ngIf=\"item.iconShape as shape\"\r\n                        [attr.shape]=\"shape\"\r\n                        size=\"16\"\r\n                        class=\"mr2\"\r\n                    ></clr-icon>\r\n                    {{ item.label }}\r\n                </button>\r\n                <div *ngIf=\"item.enabled && item.separator\" class=\"dropdown-divider\" role=\"separator\"></div>\r\n            </ng-container>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-template>\r\n", styles: [".context-menu-trigger{margin:0;display:flex;align-items:center;border:1px solid var(--color-component-border-200);font-size:90%;color:var(--color-text-200);border-radius:var(--border-radius-input);background-color:var(--color-component-bg-100)}.title-label{padding-inline-end:15px;position:relative}.title-label: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)}.context-menu-item{display:flex;align-items:center;width:100%;text-align:start;font-size:90%;color:var(--color-text-200);background-color:var(--color-component-bg-100);cursor:pointer;border:none}.context-menu-item:hover{background-color:var(--color-component-bg-200)}::ng-deep .dropdown-menu.context-menu{padding:0;background-color:var(--color-component-bg-100)}::ng-deep .context-menu-trigger{min-height:16px}::ng-deep .context-menu-trigger.hidden{visibility:hidden}::ng-deep .cm-icon.add-column{height:14px;width:4px;border:1px solid;margin:0 6px 0 8px;position:relative}::ng-deep .cm-icon.add-column:before{content:\"+\";position:absolute;font-size:16px;line-height:14px;left:-10px}::ng-deep .cm-icon.add-row{height:4px;width:14px;border:1px solid;margin:6px 4px 2px 0;position:relative}::ng-deep .cm-icon.add-row:before{content:\"+\";position:absolute;font-size:16px;line-height:14px;left:-2px;top:-10px}\n"], dependencies: [{ kind: "directive", type: i1$2.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: "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: "17.2.4", ngImport: i0, type: ContextMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #contextMenu>\r\n    <vdr-dropdown>\r\n        <button class=\"context-menu-trigger\" vdrDropdownTrigger [class.hidden]=\"hideTrigger$ | async\" (click)=\"triggerClick()\">\r\n            <clr-icon\r\n                *ngIf=\"menuConfig?.iconShape as shape\"\r\n                [attr.shape]=\"shape\"\r\n                size=\"16\"\r\n                class=\"mr2\"\r\n            ></clr-icon>\r\n            <span class=\"title-label\">{{ menuConfig?.title }}</span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\" customClasses=\"context-menu\">\r\n            <ng-container *ngFor=\"let item of menuConfig?.items\">\r\n                <button\r\n                    class=\"context-menu-item\"\r\n                    *ngIf=\"item.enabled && item.separator !== true\"\r\n                    type=\"button\"\r\n                    (click)=\"clickItem(item)\"\r\n                >\r\n                    <div *ngIf=\"item.iconClass\" class=\"cm-icon\" [ngClass]=\"item.iconClass\"></div>\r\n                    <clr-icon\r\n                        *ngIf=\"item.iconShape as shape\"\r\n                        [attr.shape]=\"shape\"\r\n                        size=\"16\"\r\n                        class=\"mr2\"\r\n                    ></clr-icon>\r\n                    {{ item.label }}\r\n                </button>\r\n                <div *ngIf=\"item.enabled && item.separator\" class=\"dropdown-divider\" role=\"separator\"></div>\r\n            </ng-container>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-template>\r\n", styles: [".context-menu-trigger{margin:0;display:flex;align-items:center;border:1px solid var(--color-component-border-200);font-size:90%;color:var(--color-text-200);border-radius:var(--border-radius-input);background-color:var(--color-component-bg-100)}.title-label{padding-inline-end:15px;position:relative}.title-label: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)}.context-menu-item{display:flex;align-items:center;width:100%;text-align:start;font-size:90%;color:var(--color-text-200);background-color:var(--color-component-bg-100);cursor:pointer;border:none}.context-menu-item:hover{background-color:var(--color-component-bg-200)}::ng-deep .dropdown-menu.context-menu{padding:0;background-color:var(--color-component-bg-100)}::ng-deep .context-menu-trigger{min-height:16px}::ng-deep .context-menu-trigger.hidden{visibility:hidden}::ng-deep .cm-icon.add-column{height:14px;width:4px;border:1px solid;margin:0 6px 0 8px;position:relative}::ng-deep .cm-icon.add-column:before{content:\"+\";position:absolute;font-size:16px;line-height:14px;left:-10px}::ng-deep .cm-icon.add-row{height:4px;width:14px;border:1px solid;margin:6px 4px 2px 0;position:relative}::ng-deep .cm-icon.add-row:before{content:\"+\";position:absolute;font-size:16px;line-height:14px;left:-2px;top:-10px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: ContextMenuService }], propDecorators: { editorMenuElement: [{
+        }], ctorParameters: () => [{ type: i1$3.Overlay }, { type: i0.ViewContainerRef }, { type: ContextMenuService }], propDecorators: { editorMenuElement: [{
                 type: Input
             }], menuTemplate: [{
                 type: ViewChild,
@@ -16178,7 +16172,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;-webkit-font-variant-ligatures:none;font-variant-ligatures:none}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid var(--color-primary-500)}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{content:\"\";position:absolute;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:-webkit-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;-moz-box-sizing:border-box;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:#fff;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:#afdaf355;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 }); }
+        ], 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;-webkit-font-variant-ligatures:none;font-variant-ligatures:none}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid var(--color-primary-500)}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{content:\"\";position:absolute;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:-webkit-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;-moz-box-sizing:border-box;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:#fff;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:#afdaf355;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$2.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: "17.2.4", ngImport: i0, type: RichTextEditorComponent, decorators: [{
             type: Component,
@@ -16476,7 +16470,7 @@ class ActionBarItemsComponent extends ActionBarBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ActionBarItemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ActionBarItemsComponent, selector: "vdr-action-bar-items", usesInheritance: 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        <ng-container *ngIf=\"buttonStates[item.id] | async as buttonState\">\r\n            <button\r\n                *vdrIfPermissions=\"item.requiresPermission\"\r\n                [routerLink]=\"getRouterLink(item)\"\r\n                [class.hidden]=\"buttonState.visible === false\"\r\n                [disabled]=\"buttonState.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    </ng-container>\r\n</vdr-ui-extension-point>\r\n", styles: [":host{display:inline-block}button.hidden{display: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.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", "info", "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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ActionBarItemsComponent, selector: "vdr-action-bar-items", usesInheritance: 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        <ng-container *ngIf=\"buttonStates[item.id] | async as buttonState\">\r\n            <button\r\n                *vdrIfPermissions=\"item.requiresPermission\"\r\n                [routerLink]=\"getRouterLink(item)\"\r\n                [class.hidden]=\"buttonState.visible === false\"\r\n                [disabled]=\"buttonState.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    </ng-container>\r\n</vdr-ui-extension-point>\r\n", styles: [":host{display:inline-block}button.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.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", "info", "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: "17.2.4", ngImport: i0, type: ActionBarItemsComponent, decorators: [{
             type: Component,
@@ -16631,13 +16625,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 type: Input
             }] } });
 
+/**
+ * A component which displays the Assets, and allows assets to be removed and
+ * added, and for the featured asset to be set.
+ *
+ * Note: rather complex code for drag drop is due to a limitation of the default CDK implementation
+ * which is addressed by a work-around from here: https://github.com/angular/components/issues/13372#issuecomment-483998378
+ */
+class AssetsComponent {
+    set assetsSetter(val) {
+        // create a new non-readonly array of assets
+        this.assets = (val || []).slice();
+    }
+    constructor(modalService, changeDetector) {
+        this.modalService = modalService;
+        this.changeDetector = changeDetector;
+        this.compact = false;
+        // eslint-disable-next-line @angular-eslint/no-output-native
+        this.change = new EventEmitter();
+        this.assets = [];
+    }
+    selectAssets() {
+        this.modalService
+            .fromComponent(AssetPickerDialogComponent, {
+            size: 'xl',
+        })
+            .subscribe(result => {
+            if (result && result.length) {
+                this.assets = unique(this.assets.concat(result), 'id');
+                if (!this.featuredAsset) {
+                    this.featuredAsset = result[0];
+                }
+                this.emitChangeEvent(this.assets, this.featuredAsset);
+                this.changeDetector.markForCheck();
+            }
+        });
+    }
+    setAsFeatured(asset) {
+        this.featuredAsset = asset;
+        this.emitChangeEvent(this.assets, asset);
+    }
+    isFeatured(asset) {
+        return !!this.featuredAsset && this.featuredAsset.id === asset.id;
+    }
+    previewAsset(asset) {
+        this.modalService
+            .fromComponent(AssetPreviewDialogComponent, {
+            size: 'xl',
+            closable: true,
+            locals: { asset, assets: this.assets },
+        })
+            .subscribe();
+    }
+    removeAsset(asset) {
+        this.assets = this.assets.filter(a => a.id !== asset.id);
+        if (this.featuredAsset && this.featuredAsset.id === asset.id) {
+            this.featuredAsset = this.assets.length > 0 ? this.assets[0] : undefined;
+        }
+        this.emitChangeEvent(this.assets, this.featuredAsset);
+    }
+    emitChangeEvent(assets, featuredAsset) {
+        this.change.emit({
+            assets,
+            featuredAsset,
+        });
+    }
+    dropListDropped(event) {
+        moveItemInArray(this.assets, event.previousContainer.data, event.container.data);
+        this.emitChangeEvent(this.assets, this.featuredAsset);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssetsComponent, deps: [{ token: ModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AssetsComponent, selector: "vdr-assets", inputs: { assetsSetter: ["assets", "assetsSetter"], featuredAsset: "featuredAsset", compact: "compact", updatePermissions: "updatePermissions" }, outputs: { change: "change" }, host: { properties: { "class.compact": "this.compact" } }, ngImport: i0, template: "<div *ngIf=\"!compact; else compactView\" class=\"standard-view-container\">\r\n    <div class=\"featured-asset\">\r\n        <img\r\n            *ngIf=\"featuredAsset\"\r\n            [src]=\"featuredAsset | assetPreview : 'small'\"\r\n            (click)=\"previewAsset(featuredAsset)\"\r\n        />\r\n        <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\">\r\n            <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n            <div>{{ 'catalog.no-featured-asset' | translate }}</div>\r\n        </div>\r\n    </div>\r\n    <div class=\"all-assets-container\">\r\n    <ng-container *ngTemplateOutlet=\"assetList\"></ng-container>\r\n    <div *vdrIfPermissions=\"updatePermissions\">\r\n        <button class=\"btn\" (click)=\"selectAssets()\">\r\n            <clr-icon shape=\"attachment\"></clr-icon>\r\n            {{ 'asset.add-asset' | translate }}\r\n        </button>\r\n    </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #compactView>\r\n    <div class=\"featured-asset compact\">\r\n        <img\r\n            *ngIf=\"featuredAsset\"\r\n            [src]=\"featuredAsset | assetPreview : 'thumb'\"\r\n            (click)=\"previewAsset(featuredAsset)\"\r\n        />\r\n\r\n        <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\">\r\n            <clr-icon shape=\"image\" size=\"150\"></clr-icon>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"assetList\"></ng-container>\r\n    <button\r\n        *vdrIfPermissions=\"updatePermissions\"\r\n        class=\"compact-select btn btn-icon btn-sm btn-block\"\r\n        [title]=\"'asset.add-asset' | translate\"\r\n        (click)=\"selectAssets()\"\r\n    >\r\n        <clr-icon shape=\"attachment\"></clr-icon>\r\n        {{ 'asset.add-asset' | translate }}\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template #assetList>\r\n    <div class=\"all-assets\" [class.compact]=\"compact\" cdkDropListGroup>\r\n        <div\r\n            *ngFor=\"let asset of assets; let index = index\"\r\n            class=\"drop-list\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListData]=\"index\"\r\n            [cdkDropListDisabled]=\"!(updatePermissions | hasPermission)\"\r\n            (cdkDropListDropped)=\"dropListDropped($event)\"\r\n        >\r\n            <vdr-dropdown cdkDrag>\r\n                <div\r\n                    class=\"asset-thumb\"\r\n                    vdrDropdownTrigger\r\n                    [class.featured]=\"isFeatured(asset)\"\r\n                    [title]=\"\"\r\n                    tabindex=\"0\"\r\n                >\r\n                    <img [src]=\"asset | assetPreview : 'tiny'\" />\r\n                </div>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"previewAsset(asset)\">\r\n                        {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        [disabled]=\"isFeatured(asset) || !(updatePermissions | hasPermission)\"\r\n                        vdrDropdownItem\r\n                        (click)=\"setAsFeatured(asset)\"\r\n                    >\r\n                        {{ 'asset.set-as-featured-asset' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"remove-asset\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"!(updatePermissions | hasPermission)\"\r\n                        (click)=\"removeAsset(asset)\"\r\n                    >\r\n                        {{ 'asset.remove-asset' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:block;container-type:inline-size}:host.compact{width:162px}.standard-view-container{display:flex;gap:calc(var(--space-unit) * 2)}.all-assets-container{display:flex;max-width:50%;flex-direction:column;justify-content:space-between}@container (max-width: 500px){.standard-view-container{flex-direction:column}.all-assets-container{max-width:100%}}.placeholder{text-align:center;color:var(--color-grey-300)}.featured-asset{text-align:center;background:var(--color-component-bg-200);padding:6px;cursor:pointer;border-radius:var(--border-radius-img)}.featured-asset img{border-radius:var(--border-radius-img);max-height:400px;max-width:100%;object-fit:contain}.featured-asset.compact{width:100%;min-height:40px;position:relative;padding:6px}.featured-asset .compact-select{position:absolute;bottom:6px;right:6px;margin:0}.all-assets{display:flex;flex-wrap:wrap}.all-assets .drop-list{min-width:60px}.all-assets .asset-thumb{margin:3px;padding:0;border:2px solid var(--color-component-border-100);border-radius:var(--border-radius-img);cursor:pointer}.all-assets .asset-thumb img{width:50px;height:50px;border-radius:var(--border-radius-img)}.all-assets .asset-thumb.featured{border-color:var(--color-primary-500);border-radius:calc(var(--border-radius-img) + 2px)}.all-assets .remove-asset{color:var(--color-warning-500)}.all-assets.compact .drop-list{min-width:54px}.all-assets.compact .asset-thumb{margin:1px;border-width:1px}.all-assets.compact .cdk-drag-placeholder,.all-assets.compact .cdk-drag-placeholder .asset-thumb{width:50px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.all-assets.cdk-drop-list-dragging vdr-dropdown:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging>*:not(.cdk-drag-placeholder){display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.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: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "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: "directive", type: IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssetsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-assets', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!compact; else compactView\" class=\"standard-view-container\">\r\n    <div class=\"featured-asset\">\r\n        <img\r\n            *ngIf=\"featuredAsset\"\r\n            [src]=\"featuredAsset | assetPreview : 'small'\"\r\n            (click)=\"previewAsset(featuredAsset)\"\r\n        />\r\n        <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\">\r\n            <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n            <div>{{ 'catalog.no-featured-asset' | translate }}</div>\r\n        </div>\r\n    </div>\r\n    <div class=\"all-assets-container\">\r\n    <ng-container *ngTemplateOutlet=\"assetList\"></ng-container>\r\n    <div *vdrIfPermissions=\"updatePermissions\">\r\n        <button class=\"btn\" (click)=\"selectAssets()\">\r\n            <clr-icon shape=\"attachment\"></clr-icon>\r\n            {{ 'asset.add-asset' | translate }}\r\n        </button>\r\n    </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #compactView>\r\n    <div class=\"featured-asset compact\">\r\n        <img\r\n            *ngIf=\"featuredAsset\"\r\n            [src]=\"featuredAsset | assetPreview : 'thumb'\"\r\n            (click)=\"previewAsset(featuredAsset)\"\r\n        />\r\n\r\n        <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\">\r\n            <clr-icon shape=\"image\" size=\"150\"></clr-icon>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"assetList\"></ng-container>\r\n    <button\r\n        *vdrIfPermissions=\"updatePermissions\"\r\n        class=\"compact-select btn btn-icon btn-sm btn-block\"\r\n        [title]=\"'asset.add-asset' | translate\"\r\n        (click)=\"selectAssets()\"\r\n    >\r\n        <clr-icon shape=\"attachment\"></clr-icon>\r\n        {{ 'asset.add-asset' | translate }}\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template #assetList>\r\n    <div class=\"all-assets\" [class.compact]=\"compact\" cdkDropListGroup>\r\n        <div\r\n            *ngFor=\"let asset of assets; let index = index\"\r\n            class=\"drop-list\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListData]=\"index\"\r\n            [cdkDropListDisabled]=\"!(updatePermissions | hasPermission)\"\r\n            (cdkDropListDropped)=\"dropListDropped($event)\"\r\n        >\r\n            <vdr-dropdown cdkDrag>\r\n                <div\r\n                    class=\"asset-thumb\"\r\n                    vdrDropdownTrigger\r\n                    [class.featured]=\"isFeatured(asset)\"\r\n                    [title]=\"\"\r\n                    tabindex=\"0\"\r\n                >\r\n                    <img [src]=\"asset | assetPreview : 'tiny'\" />\r\n                </div>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"previewAsset(asset)\">\r\n                        {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        [disabled]=\"isFeatured(asset) || !(updatePermissions | hasPermission)\"\r\n                        vdrDropdownItem\r\n                        (click)=\"setAsFeatured(asset)\"\r\n                    >\r\n                        {{ 'asset.set-as-featured-asset' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"remove-asset\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"!(updatePermissions | hasPermission)\"\r\n                        (click)=\"removeAsset(asset)\"\r\n                    >\r\n                        {{ 'asset.remove-asset' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:block;container-type:inline-size}:host.compact{width:162px}.standard-view-container{display:flex;gap:calc(var(--space-unit) * 2)}.all-assets-container{display:flex;max-width:50%;flex-direction:column;justify-content:space-between}@container (max-width: 500px){.standard-view-container{flex-direction:column}.all-assets-container{max-width:100%}}.placeholder{text-align:center;color:var(--color-grey-300)}.featured-asset{text-align:center;background:var(--color-component-bg-200);padding:6px;cursor:pointer;border-radius:var(--border-radius-img)}.featured-asset img{border-radius:var(--border-radius-img);max-height:400px;max-width:100%;object-fit:contain}.featured-asset.compact{width:100%;min-height:40px;position:relative;padding:6px}.featured-asset .compact-select{position:absolute;bottom:6px;right:6px;margin:0}.all-assets{display:flex;flex-wrap:wrap}.all-assets .drop-list{min-width:60px}.all-assets .asset-thumb{margin:3px;padding:0;border:2px solid var(--color-component-border-100);border-radius:var(--border-radius-img);cursor:pointer}.all-assets .asset-thumb img{width:50px;height:50px;border-radius:var(--border-radius-img)}.all-assets .asset-thumb.featured{border-color:var(--color-primary-500);border-radius:calc(var(--border-radius-img) + 2px)}.all-assets .remove-asset{color:var(--color-warning-500)}.all-assets.compact .drop-list{min-width:54px}.all-assets.compact .asset-thumb{margin:1px;border-width:1px}.all-assets.compact .cdk-drag-placeholder,.all-assets.compact .cdk-drag-placeholder .asset-thumb{width:50px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.all-assets.cdk-drop-list-dragging vdr-dropdown:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging>*:not(.cdk-drag-placeholder){display:none}\n"] }]
+        }], ctorParameters: () => [{ type: ModalService }, { type: i0.ChangeDetectorRef }], propDecorators: { assetsSetter: [{
+                type: Input,
+                args: ['assets']
+            }], featuredAsset: [{
+                type: Input
+            }], compact: [{
+                type: HostBinding,
+                args: ['class.compact']
+            }, {
+                type: Input
+            }], change: [{
+                type: Output
+            }], updatePermissions: [{
+                type: Input
+            }] } });
+
 /**
  * Like the {@link FormFieldComponent} but for content which is not a form control. Used
  * to keep a consistent layout with other form fields in the form.
  */
 class FormItemComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FormItemComponent, selector: "vdr-form-item", inputs: { label: "label", tooltip: "tooltip" }, ngImport: i0, template: "<div class=\"form-group\">\r\n    <label class=\"\">{{ label }}</label>\r\n    <div *ngIf=\"tooltip\" class=\"tooltip-text\">\r\n        {{ tooltip }}\r\n    </div>\r\n    <div class=\"content\"><ng-content></ng-content></div>\r\n</div>\r\n", styles: [":host{display:block}.form-group label{font-size:var(--font-size-sm);color:var(--color-weight-800)}.tooltip-text{font-size:var(--font-size-xs);line-height:var(--font-size-sm)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FormItemComponent, selector: "vdr-form-item", inputs: { label: "label", tooltip: "tooltip" }, ngImport: i0, template: "<div class=\"form-group\">\r\n    <label class=\"\">{{ label }}</label>\r\n    <div *ngIf=\"tooltip\" class=\"tooltip-text\">\r\n        {{ tooltip }}\r\n    </div>\r\n    <div class=\"content\"><ng-content></ng-content></div>\r\n</div>\r\n", styles: [":host{display:block}.form-group label{font-size:var(--font-size-sm);color:var(--color-weight-800)}.tooltip-text{font-size:var(--font-size-xs);line-height:var(--font-size-sm)}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormItemComponent, decorators: [{
             type: Component,
@@ -16785,7 +16870,7 @@ class AssignToChannelDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssignToChannelDialogComponent, deps: [{ token: DataService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AssignToChannelDialogComponent, selector: "vdr-assign-to-channel-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.confirm-bulk-assign-to-channel' | translate }}\r\n</ng-template>\r\n<div class=\"form-grid\">\r\n    <vdr-form-item>\r\n        <div *ngIf=\"0 < nMore\">\r\n            {{\r\n                'common.list-items-and-n-more'\r\n                    | translate\r\n                        : {\r\n                              items: itemNames,\r\n                              nMore: nMore\r\n                          }\r\n            }}\r\n        </div>\r\n        <div *ngIf=\"nMore === 0\">\r\n            {{ itemNames }}\r\n        </div>\r\n    </vdr-form-item>\r\n    <vdr-form-field [label]=\"'common.channel' | translate\" class=\"mb-4\">\r\n        <vdr-channel-assignment-control\r\n            clrInput\r\n            [multiple]=\"true\"\r\n            [includeDefaultChannel]=\"false\"\r\n            [formControl]=\"selectedChannelIdControl\"\r\n        ></vdr-channel-assignment-control>\r\n    </vdr-form-field>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"assign()\"\r\n        [disabled]=\"selectedChannels.length <= 0\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        <ng-template [ngIf]=\"selectedChannels.length > 0\" [ngIfElse]=\"noSelection\">\r\n            {{ 'common.assign-to-channels' | translate : { count: selectedChannels.length } }}\r\n        </ng-template>\r\n        <ng-template #noSelection>\r\n            {{ 'common.no-channel-selected' | translate : { count: selectedChannels.length } }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: ["vdr-channel-assignment-control{min-width:200px}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrInput, selector: "[clrInput]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "component", type: FormItemComponent, selector: "vdr-form-item", inputs: ["label", "tooltip"] }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: ChannelAssignmentControlComponent, selector: "vdr-channel-assignment-control", inputs: ["multiple", "includeDefaultChannel", "disableChannelIds"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AssignToChannelDialogComponent, selector: "vdr-assign-to-channel-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.confirm-bulk-assign-to-channel' | translate }}\r\n</ng-template>\r\n<div class=\"form-grid\">\r\n    <vdr-form-item>\r\n        <div *ngIf=\"0 < nMore\">\r\n            {{\r\n                'common.list-items-and-n-more'\r\n                    | translate\r\n                        : {\r\n                              items: itemNames,\r\n                              nMore: nMore\r\n                          }\r\n            }}\r\n        </div>\r\n        <div *ngIf=\"nMore === 0\">\r\n            {{ itemNames }}\r\n        </div>\r\n    </vdr-form-item>\r\n    <vdr-form-field [label]=\"'common.channel' | translate\" class=\"mb-4\">\r\n        <vdr-channel-assignment-control\r\n            clrInput\r\n            [multiple]=\"true\"\r\n            [includeDefaultChannel]=\"false\"\r\n            [formControl]=\"selectedChannelIdControl\"\r\n        ></vdr-channel-assignment-control>\r\n    </vdr-form-field>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"assign()\"\r\n        [disabled]=\"selectedChannels.length <= 0\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        <ng-template [ngIf]=\"selectedChannels.length > 0\" [ngIfElse]=\"noSelection\">\r\n            {{ 'common.assign-to-channels' | translate : { count: selectedChannels.length } }}\r\n        </ng-template>\r\n        <ng-template #noSelection>\r\n            {{ 'common.no-channel-selected' | translate : { count: selectedChannels.length } }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: ["vdr-channel-assignment-control{min-width:200px}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrInput, selector: "[clrInput]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "component", type: FormItemComponent, selector: "vdr-form-item", inputs: ["label", "tooltip"] }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: ChannelAssignmentControlComponent, selector: "vdr-channel-assignment-control", inputs: ["multiple", "includeDefaultChannel", "disableChannelIds"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssignToChannelDialogComponent, decorators: [{
             type: Component,
@@ -16892,7 +16977,7 @@ class BulkActionMenuComponent {
         this.onClearSelectionFns.push(callback);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: BulkActionMenuComponent, deps: [{ token: BulkActionRegistryService }, { token: i0.Injector }, { token: i1$1.ActivatedRoute }, { token: DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: { locationId: "locationId", selectionManager: "selectionManager", hostComponent: "hostComponent" }, ngImport: i0, template: "<vdr-dropdown *ngIf=\"actions$ | async as actions\">\r\n    <button\r\n        *ngIf=\"actions.length\"\r\n        class=\"btn btn-sm btn-outline mr-2\"\r\n        vdrDropdownTrigger\r\n        [disabled]=\"!selectionManager.selection?.length\"\r\n        [class.hidden]=\"!selectionManager.selection?.length\"\r\n    >\r\n        <clr-icon shape=\"file-group\"></clr-icon>\r\n        {{ 'common.with-selected' | translate: { count:selectionManager.selection.length } }}\r\n        <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <ng-container *ngIf=\"actions.length; else noActions\">\r\n            <ng-container *ngFor=\"let action of actions\">\r\n                <button\r\n                    *ngIf=\"action.display\"\r\n                    [disabled]=\"!hasPermissions(action)\"\r\n                    type=\"button\"\r\n                    vdrDropdownItem\r\n                    (click)=\"actionClick($event, action)\"\r\n                >\r\n                    <clr-icon\r\n                        *ngIf=\"action.icon\"\r\n                        [attr.shape]=\"action.icon\"\r\n                        [ngClass]=\"action.iconClass || ''\"\r\n                    ></clr-icon>\r\n                    {{ action.label | translate: action.translationVars }}\r\n                </button>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #noActions>\r\n            <button type=\"button\" disabled vdrDropdownItem>{{ 'common.no-bulk-actions-available' | translate }}</button>\r\n        </ng-template>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n<button\r\n    class=\"button-small\"\r\n    (click)=\"clearSelection()\"\r\n    [class.hidden]=\"!selectionManager.selection?.length\"\r\n>\r\n    <span>{{ 'common.clear-selection' | translate }}</span>\r\n    <clr-icon shape=\"times\"></clr-icon>\r\n</button>\r\n", styles: [":host{display:inline-flex;align-items:center}button.hidden{display: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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "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: "17.2.4", type: BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: { locationId: "locationId", selectionManager: "selectionManager", hostComponent: "hostComponent" }, ngImport: i0, template: "<vdr-dropdown *ngIf=\"actions$ | async as actions\">\r\n    <button\r\n        *ngIf=\"actions.length\"\r\n        class=\"btn btn-sm btn-outline mr-2\"\r\n        vdrDropdownTrigger\r\n        [disabled]=\"!selectionManager.selection?.length\"\r\n        [class.hidden]=\"!selectionManager.selection?.length\"\r\n    >\r\n        <clr-icon shape=\"file-group\"></clr-icon>\r\n        {{ 'common.with-selected' | translate: { count:selectionManager.selection.length } }}\r\n        <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <ng-container *ngIf=\"actions.length; else noActions\">\r\n            <ng-container *ngFor=\"let action of actions\">\r\n                <button\r\n                    *ngIf=\"action.display\"\r\n                    [disabled]=\"!hasPermissions(action)\"\r\n                    type=\"button\"\r\n                    vdrDropdownItem\r\n                    (click)=\"actionClick($event, action)\"\r\n                >\r\n                    <clr-icon\r\n                        *ngIf=\"action.icon\"\r\n                        [attr.shape]=\"action.icon\"\r\n                        [ngClass]=\"action.iconClass || ''\"\r\n                    ></clr-icon>\r\n                    {{ action.label | translate: action.translationVars }}\r\n                </button>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #noActions>\r\n            <button type=\"button\" disabled vdrDropdownItem>{{ 'common.no-bulk-actions-available' | translate }}</button>\r\n        </ng-template>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n<button\r\n    class=\"button-small\"\r\n    (click)=\"clearSelection()\"\r\n    [class.hidden]=\"!selectionManager.selection?.length\"\r\n>\r\n    <span>{{ 'common.clear-selection' | translate }}</span>\r\n    <clr-icon shape=\"times\"></clr-icon>\r\n</button>\r\n", styles: [":host{display:inline-flex;align-items:center}button.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.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: "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: "17.2.4", ngImport: i0, type: BulkActionMenuComponent, decorators: [{
             type: Component,
@@ -16972,7 +17057,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
 
 class CustomerLabelComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CustomerLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CustomerLabelComponent, selector: "vdr-customer-label", inputs: { customer: "customer" }, ngImport: i0, template: "<a *ngIf=\"customer\" class=\"button-ghost\" [routerLink]=\"['/customer', 'customers', customer.id]\">\r\n    <clr-icon shape=\"user\" [class.is-solid]=\"customer\"></clr-icon>\r\n    <span>{{ customer.firstName }} {{ customer.lastName }}</span>\r\n    <clr-icon shape=\"arrow right\"></clr-icon>\r\n</a>\r\n<div *ngIf=\"!customer\">{{ 'common.guest' | translate }}</div>\r\n", styles: [":host{display:flex;align-items:center}clr-icon{margin-inline-end:6px}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { 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", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CustomerLabelComponent, selector: "vdr-customer-label", inputs: { customer: "customer" }, ngImport: i0, template: "<a *ngIf=\"customer\" class=\"button-ghost\" [routerLink]=\"['/customer', 'customers', customer.id]\">\r\n    <clr-icon shape=\"user\" [class.is-solid]=\"customer\"></clr-icon>\r\n    <span>{{ customer.firstName }} {{ customer.lastName }}</span>\r\n    <clr-icon shape=\"arrow right\"></clr-icon>\r\n</a>\r\n<div *ngIf=\"!customer\">{{ 'common.guest' | translate }}</div>\r\n", styles: [":host{display:flex;align-items:center}clr-icon{margin-inline-end:6px}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { 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", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CustomerLabelComponent, decorators: [{
             type: Component,
@@ -17067,7 +17152,7 @@ class DataTableCustomFieldColumnComponent extends DataTable2ColumnComponent {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataTableCustomFieldColumnComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: { customField: "customField", sorts: "sorts" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["row"], usesInheritance: true, ngImport: i0, template: "<ng-template let-item=\"item\">\r\n    <ng-container\r\n        *ngIf=\"item.customFields[customField.name] == null || item.customFields[customField.name] === ''\"\r\n    >\r\n        <span class=\"empty\">-</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"item.customFields[customField.name] != null\">\r\n        <ng-container [ngSwitch]=\"customField.type\">\r\n            <ng-container *ngSwitchCase=\"'boolean'\">\r\n                <clr-icon\r\n                    *ngIf=\"item.customFields[customField.name]\"\r\n                    shape=\"check\"\r\n                    class=\"color-success-700\"\r\n                ></clr-icon>\r\n                <clr-icon *ngIf=\"!item.customFields[customField.name]\" shape=\"times\"></clr-icon>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetime'\">\r\n                {{ item.customFields[customField.name] | localeDate }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'text'\">\r\n                {{ item.customFields[customField.name] | slice : 0 : 50 }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'relation'\">\r\n                <vdr-dropdown>\r\n                    <button\r\n                        class=\"btn btn-link btn-icon\"\r\n                        vdrDropdownTrigger\r\n                        [title]=\"'common.details' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"details\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"result-detail\">\r\n                            <vdr-object-tree [value]=\"item.customFields[customField.name]\"></vdr-object-tree>\r\n                        </div>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                {{ item.customFields[customField.name] }}\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [".empty{color:var(--color-weight-300)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { 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: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: "component", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: { customField: "customField", sorts: "sorts" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["row"], usesInheritance: true, ngImport: i0, template: "<ng-template let-item=\"item\">\r\n    <ng-container\r\n        *ngIf=\"item.customFields[customField.name] == null || item.customFields[customField.name] === ''\"\r\n    >\r\n        <span class=\"empty\">-</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"item.customFields[customField.name] != null\">\r\n        <ng-container [ngSwitch]=\"customField.type\">\r\n            <ng-container *ngSwitchCase=\"'boolean'\">\r\n                <clr-icon\r\n                    *ngIf=\"item.customFields[customField.name]\"\r\n                    shape=\"check\"\r\n                    class=\"color-success-700\"\r\n                ></clr-icon>\r\n                <clr-icon *ngIf=\"!item.customFields[customField.name]\" shape=\"times\"></clr-icon>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'datetime'\">\r\n                {{ item.customFields[customField.name] | localeDate }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'text'\">\r\n                {{ item.customFields[customField.name] | slice : 0 : 50 }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"'relation'\">\r\n                <vdr-dropdown>\r\n                    <button\r\n                        class=\"btn btn-link btn-icon\"\r\n                        vdrDropdownTrigger\r\n                        [title]=\"'common.details' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"details\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"result-detail\">\r\n                            <vdr-object-tree [value]=\"item.customFields[customField.name]\"></vdr-object-tree>\r\n                        </div>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                {{ item.customFields[customField.name] }}\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [".empty{color:var(--color-weight-300)}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { 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: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: "component", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataTableCustomFieldColumnComponent, decorators: [{
             type: Component,
@@ -17083,7 +17168,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
 
 class DataTable2SearchComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataTable2SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: { searchTermControl: "searchTermControl", searchTermPlaceholder: "searchTermPlaceholder" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template #vdrDt2Search>\r\n    <div class=\"search-wrapper\">\r\n        <clr-icon shape=\"search\" class=\"search-icon\"></clr-icon>\r\n        <input [formControl]=\"searchTermControl\" [placeholder]=\"searchTermPlaceholder\" />\r\n    </div>\r\n</ng-template>\r\n", styles: [".search-wrapper{position:relative}.search-wrapper .search-icon{position:absolute;top:50%;transform:translateY(-50%);left:8px;color:var(--color-weight-600)}.search-wrapper>input{padding-inline-start:32px!important;width:100%}\n"], dependencies: [{ 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, vdr-currency-input" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: { searchTermControl: "searchTermControl", searchTermPlaceholder: "searchTermPlaceholder" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template #vdrDt2Search>\r\n    <div class=\"search-wrapper\">\r\n        <clr-icon shape=\"search\" class=\"search-icon\"></clr-icon>\r\n        <input [formControl]=\"searchTermControl\" [placeholder]=\"searchTermPlaceholder\" />\r\n    </div>\r\n</ng-template>\r\n", styles: [".search-wrapper{position:relative}.search-wrapper .search-icon{position:absolute;top:50%;transform:translateY(-50%);left:8px;color:var(--color-weight-600)}.search-wrapper>input{padding-inline-start:32px!important;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$2.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, vdr-currency-input" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataTable2SearchComponent, decorators: [{
             type: Component,
@@ -17197,7 +17282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
 
 class EmptyPlaceholderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: EmptyPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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$2.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: EmptyPlaceholderComponent, decorators: [{
             type: Component,
@@ -17439,7 +17524,7 @@ class DataTableFiltersComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataTableFiltersComponent, deps: [{ token: I18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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($event)\" [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"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { 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: "17.2.4", 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($event)\" [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$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$2.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"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { 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: "17.2.4", ngImport: i0, type: DataTableFiltersComponent, decorators: [{
             type: Component,
@@ -17478,7 +17563,7 @@ class DataTableColumnPickerComponent {
         this.resetColumns.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataTableColumnPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: { columns: "columns", uiLanguage: "uiLanguage" }, outputs: { reorder: "reorder", resetColumns: "resetColumns" }, ngImport: i0, template: "<vdr-dropdown [manualToggle]=\"true\">\r\n    <button class=\"button-small\" vdrDropdownTrigger [title]=\"'common.select-table-columns' | translate\">\r\n        <clr-icon shape=\"view-columns\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n            <div\r\n                *ngFor=\"let column of columns; index as i\"\r\n                class=\"mx-2 column-list\"\r\n                cdkDrag\r\n                cdkDragLockAxis=\"y\"\r\n                [cdkDragData]=\"column\"\r\n            >\r\n                <div cdkDragHandle class=\"drag-handle\" [cdkDragHandleDisabled]=\"column.orderable === false\">\r\n                    <clr-icon shape=\"drag-handle\"></clr-icon>\r\n                </div>\r\n                <label class=\"flex\">\r\n                    <clr-checkbox-container>\r\n                        <clr-checkbox-wrapper>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                clrCheckbox\r\n                                [disabled]=\"column.optional === false\"\r\n                                [indeterminate]=\"column.optional === false\"\r\n                                [checked]=\"column.visible\"\r\n                                (change)=\"toggleColumn(column)\"\r\n                                class=\"mr-1\"\r\n                            />\r\n                            <label>{{ column.heading | translate }}</label>\r\n                        </clr-checkbox-wrapper>\r\n                    </clr-checkbox-container>\r\n                </label>\r\n            </div>\r\n        </div>\r\n        <div class=\"mt-1 pt-1 mx-1 flex center reset-button\">\r\n            <button class=\"button-small\" (click)=\"reset()\">\r\n                <span>{{ 'common.reset-columns' | translate }}</span>\r\n                <clr-icon shape=\"history\"></clr-icon>\r\n            </button>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".column-list{display:flex;align-items:center}.drag-handle{cursor:grab;margin-top:-4px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.reset-button{border-top:1px solid var(--color-weight-125)}\n"], dependencies: [{ kind: "directive", type: i1$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: "component", type: i1$3.ClrCheckboxContainer, selector: "clr-checkbox-container,clr-toggle-container", inputs: ["clrInline"] }, { kind: "component", type: i1$3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: { columns: "columns", uiLanguage: "uiLanguage" }, outputs: { reorder: "reorder", resetColumns: "resetColumns" }, ngImport: i0, template: "<vdr-dropdown [manualToggle]=\"true\">\r\n    <button class=\"button-small\" vdrDropdownTrigger [title]=\"'common.select-table-columns' | translate\">\r\n        <clr-icon shape=\"view-columns\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n            <div\r\n                *ngFor=\"let column of columns; index as i\"\r\n                class=\"mx-2 column-list\"\r\n                cdkDrag\r\n                cdkDragLockAxis=\"y\"\r\n                [cdkDragData]=\"column\"\r\n            >\r\n                <div cdkDragHandle class=\"drag-handle\" [cdkDragHandleDisabled]=\"column.orderable === false\">\r\n                    <clr-icon shape=\"drag-handle\"></clr-icon>\r\n                </div>\r\n                <label class=\"flex\">\r\n                    <clr-checkbox-container>\r\n                        <clr-checkbox-wrapper>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                clrCheckbox\r\n                                [disabled]=\"column.optional === false\"\r\n                                [indeterminate]=\"column.optional === false\"\r\n                                [checked]=\"column.visible\"\r\n                                (change)=\"toggleColumn(column)\"\r\n                                class=\"mr-1\"\r\n                            />\r\n                            <label>{{ column.heading | translate }}</label>\r\n                        </clr-checkbox-wrapper>\r\n                    </clr-checkbox-container>\r\n                </label>\r\n            </div>\r\n        </div>\r\n        <div class=\"mt-1 pt-1 mx-1 flex center reset-button\">\r\n            <button class=\"button-small\" (click)=\"reset()\">\r\n                <span>{{ 'common.reset-columns' | translate }}</span>\r\n                <clr-icon shape=\"history\"></clr-icon>\r\n            </button>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".column-list{display:flex;align-items:center}.drag-handle{cursor:grab;margin-top:-4px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.reset-button{border-top:1px solid var(--color-weight-125)}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1$2.ClrCheckboxContainer, selector: "clr-checkbox-container,clr-toggle-container", inputs: ["clrInline"] }, { kind: "component", type: i1$2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataTableColumnPickerComponent, decorators: [{
             type: Component,
@@ -17556,7 +17641,7 @@ class DataTableFilterPresetsComponent {
         this.filterPresetService.reorderPresets(this.dataTableId, event.previousIndex, event.currentIndex);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataTableFilterPresetsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: FilterPresetService }, { token: ModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "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: "17.2.4", 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$2.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", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "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: "17.2.4", ngImport: i0, type: DataTableFilterPresetsComponent, decorators: [{
             type: Component,
@@ -17607,7 +17692,7 @@ class AddFilterPresetButtonComponent {
             .find(p => p.value === this.filters.serialize())?.name;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AddFilterPresetButtonComponent, deps: [{ token: FilterPresetService }, { token: i0.ChangeDetectorRef }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AddFilterPresetButtonComponent, selector: "vdr-add-filter-preset-button", inputs: { dataTableId: "dataTableId", filters: "filters" }, viewQueries: [{ propertyName: "addPresetDropdown", first: true, predicate: ["addPresetDropdown"], descendants: true }], ngImport: i0, template: "<vdr-dropdown #addPresetDropdown>\r\n    <button\r\n        class=\"add-preset-button mt-1\"\r\n        vdrDropdownTrigger\r\n        [class.visible]=\"filters.activeFilters.length > 0 && !selectedFilterPreset\"\r\n        [disabled]=\"filters.activeFilters.length === 0 || !!selectedFilterPreset\"\r\n    >\r\n        <clr-icon shape=\"floppy\"/>\r\n        <div>{{ 'common.save-filter-preset' | translate }}</div>\r\n    </button>\r\n    <vdr-dropdown-menu\r\n        vdrPosition=\"bottom-left\"\r\n        [cdkTrapFocus]=\"true\"\r\n        [cdkTrapFocusAutoCapture]=\"true\"\r\n    >\r\n        <form class=\"mx-1\">\r\n            <div>\r\n                <input\r\n                    type=\"text\"\r\n                    [placeholder]=\"'common.filter-preset-name' | translate\"\r\n                    [formControl]=\"filterPresetName\"\r\n                />\r\n            </div>\r\n            <div class=\"preset-create-row\">\r\n                <button class=\"button mt-2\" (click)=\"saveFilterPreset()\">\r\n                    {{ 'common.create' | translate }}\r\n                </button>\r\n            </div>\r\n        </form>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".add-preset-button{display:flex;flex-direction:row;cursor:pointer;gap:6px;align-items:center;border:none;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);opacity:0;transition:opacity .2s}.add-preset-button.visible{opacity:1}.preset-create-row{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AddFilterPresetButtonComponent, selector: "vdr-add-filter-preset-button", inputs: { dataTableId: "dataTableId", filters: "filters" }, viewQueries: [{ propertyName: "addPresetDropdown", first: true, predicate: ["addPresetDropdown"], descendants: true }], ngImport: i0, template: "<vdr-dropdown #addPresetDropdown>\r\n    <button\r\n        class=\"add-preset-button mt-1\"\r\n        vdrDropdownTrigger\r\n        [class.visible]=\"filters.activeFilters.length > 0 && !selectedFilterPreset\"\r\n        [disabled]=\"filters.activeFilters.length === 0 || !!selectedFilterPreset\"\r\n    >\r\n        <clr-icon shape=\"floppy\"/>\r\n        <div>{{ 'common.save-filter-preset' | translate }}</div>\r\n    </button>\r\n    <vdr-dropdown-menu\r\n        vdrPosition=\"bottom-left\"\r\n        [cdkTrapFocus]=\"true\"\r\n        [cdkTrapFocusAutoCapture]=\"true\"\r\n    >\r\n        <form class=\"mx-1\">\r\n            <div>\r\n                <input\r\n                    type=\"text\"\r\n                    [placeholder]=\"'common.filter-preset-name' | translate\"\r\n                    [formControl]=\"filterPresetName\"\r\n                />\r\n            </div>\r\n            <div class=\"preset-create-row\">\r\n                <button class=\"button mt-2\" (click)=\"saveFilterPreset()\">\r\n                    {{ 'common.create' | translate }}\r\n                </button>\r\n            </div>\r\n        </form>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".add-preset-button{display:flex;flex-direction:row;cursor:pointer;gap:6px;align-items:center;border:none;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);opacity:0;transition:opacity .2s}.add-preset-button.visible{opacity:1}.preset-create-row{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AddFilterPresetButtonComponent, decorators: [{
             type: Component,
@@ -17859,7 +17944,7 @@ class DataTable2Component {
         return dataTableConfig;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", 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: "17.2.4", 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);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}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.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, vdr-currency-input" }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}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$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$2.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, vdr-currency-input" }, { 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: "17.2.4", ngImport: i0, type: DataTable2Component, decorators: [{
             type: Component,
@@ -18059,7 +18144,7 @@ class DataTableComponent {
         this.selectionManager?.toggleSelection(item, event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DataTableComponent, selector: "vdr-data-table", inputs: { items: "items", itemsPerPage: "itemsPerPage", currentPage: "currentPage", totalItems: "totalItems", emptyStateLabel: "emptyStateLabel", selectionManager: "selectionManager", allSelected: "allSelected", isRowSelectedFn: "isRowSelectedFn" }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", allSelectChange: "allSelectChange", rowSelectChange: "rowSelectChange" }, providers: [PaginationService], queries: [{ propertyName: "columns", predicate: DataTableColumnComponent }, { propertyName: "templateRefs", predicate: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!items || (items && items.length); else emptyPlaceholder\">\r\n    <div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n    </div>\r\n    <table class=\"table\" [class.no-select]=\"disableSelect\">\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr>\r\n                <th *ngIf=\"isRowSelectedFn || selectionManager\" class=\"align-middle\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"allSelected ? allSelected : selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th *ngFor=\"let header of columns?.toArray()\" class=\"left align-middle\" [class.expand]=\"header.expand\">\r\n                    <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\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                                  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=\"isRowSelectedFn || selectionManager\" class=\"align-middle selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"isRowSelectedFn ? isRowSelectedFn(item) : selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"rowTemplate; context: { item: item, index: i }\"\r\n                ></ng-container>\r\n            </tr>\r\n        </tbody>\r\n    </table>\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=\"p5\">\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            [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</ng-container>\r\n<ng-template #emptyPlaceholder>\r\n    <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n</ng-template>\r\n", styles: [":host{display:block;max-width:100%;overflow:auto;position:relative}.bulk-actions{position:absolute;left:50px;top:30px;z-index:2}table.table{max-width:100vw;overflow-x:auto}table.no-select{-webkit-user-select:none;user-select:none}thead th.expand{width:100%}thead.items-selected tr th{color:transparent}.selection-col{width:24px}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:6px}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { 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, vdr-currency-input" }, { kind: "component", type: EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { 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: "17.2.4", type: DataTableComponent, selector: "vdr-data-table", inputs: { items: "items", itemsPerPage: "itemsPerPage", currentPage: "currentPage", totalItems: "totalItems", emptyStateLabel: "emptyStateLabel", selectionManager: "selectionManager", allSelected: "allSelected", isRowSelectedFn: "isRowSelectedFn" }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", allSelectChange: "allSelectChange", rowSelectChange: "rowSelectChange" }, providers: [PaginationService], queries: [{ propertyName: "columns", predicate: DataTableColumnComponent }, { propertyName: "templateRefs", predicate: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!items || (items && items.length); else emptyPlaceholder\">\r\n    <div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n    </div>\r\n    <table class=\"table\" [class.no-select]=\"disableSelect\">\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr>\r\n                <th *ngIf=\"isRowSelectedFn || selectionManager\" class=\"align-middle\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"allSelected ? allSelected : selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th *ngFor=\"let header of columns?.toArray()\" class=\"left align-middle\" [class.expand]=\"header.expand\">\r\n                    <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\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                                  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=\"isRowSelectedFn || selectionManager\" class=\"align-middle selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"isRowSelectedFn ? isRowSelectedFn(item) : selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"rowTemplate; context: { item: item, index: i }\"\r\n                ></ng-container>\r\n            </tr>\r\n        </tbody>\r\n    </table>\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=\"p5\">\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            [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</ng-container>\r\n<ng-template #emptyPlaceholder>\r\n    <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n</ng-template>\r\n", styles: [":host{display:block;max-width:100%;overflow:auto;position:relative}.bulk-actions{position:absolute;left:50px;top:30px;z-index:2}table.table{max-width:100vw;overflow-x:auto}table.no-select{-webkit-user-select:none;user-select:none}thead th.expand{width:100%}thead.items-selected tr th{color:transparent}.selection-col{width:24px}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:6px}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { 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, vdr-currency-input" }, { kind: "component", type: EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { 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: "17.2.4", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
@@ -18112,7 +18197,7 @@ class EditNoteDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: EditNoteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: EditNoteDialogComponent, selector: "vdr-edit-note-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.edit-note' | translate }}\r\n</ng-template>\r\n\r\n<textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n<div class=\"visibility-select\" *ngIf=\"displayPrivacyControls\">\r\n    <clr-checkbox-wrapper>\r\n        <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n        <label>{{ 'order.note-is-private' | translate }}</label>\r\n    </clr-checkbox-wrapper>\r\n    <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n        {{ 'order.note-only-visible-to-administrators' | translate }}\r\n    </span>\r\n    <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n        {{ 'order.note-visible-to-customer' | translate }}\r\n    </span>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"note.length === 0\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-500)}.visibility-select .private{color:var(--color-success-500)}textarea.note{width:100%;height:72px;border-radius:3px;margin-inline-end:6px}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1$3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { 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: "17.2.4", type: EditNoteDialogComponent, selector: "vdr-edit-note-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.edit-note' | translate }}\r\n</ng-template>\r\n\r\n<textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n<div class=\"visibility-select\" *ngIf=\"displayPrivacyControls\">\r\n    <clr-checkbox-wrapper>\r\n        <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n        <label>{{ 'order.note-is-private' | translate }}</label>\r\n    </clr-checkbox-wrapper>\r\n    <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n        {{ 'order.note-only-visible-to-administrators' | translate }}\r\n    </span>\r\n    <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n        {{ 'order.note-visible-to-customer' | translate }}\r\n    </span>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"note.length === 0\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-500)}.visibility-select .private{color:var(--color-success-500)}textarea.note{width:100%;height:72px;border-radius:3px;margin-inline-end:6px}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1$2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { 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: "17.2.4", ngImport: i0, type: EditNoteDialogComponent, decorators: [{
             type: Component,
@@ -18143,7 +18228,7 @@ class FormattedAddressComponent {
         return typeof input.country !== 'string';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormattedAddressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FormattedAddressComponent, selector: "vdr-formatted-address", inputs: { address: "address" }, ngImport: i0, template: "<ul class=\"address-lines\">\r\n    <li *ngIf=\"address.fullName\">{{ address.fullName }}</li>\r\n    <li *ngIf=\"address.company\">{{ address.company }}</li>\r\n    <li *ngIf=\"address.streetLine1\">{{ address.streetLine1 }}</li>\r\n    <li *ngIf=\"address.streetLine2\">{{ address.streetLine2 }}</li>\r\n    <li *ngIf=\"address.city\">{{ address.city }}</li>\r\n    <li *ngIf=\"address.province\">{{ address.province }}</li>\r\n    <li *ngIf=\"address.postalCode\">{{ address.postalCode }}</li>\r\n    <li *ngIf=\"address.country\">\r\n        <clr-icon shape=\"world\" size=\"12\"></clr-icon>\r\n        {{ getCountryName() }}\r\n    </li>\r\n    <li *ngIf=\"address.phoneNumber\">\r\n        <clr-icon shape=\"phone-handset\" size=\"12\"></clr-icon>\r\n        {{ address.phoneNumber }}\r\n    </li>\r\n    <li *ngFor=\"let customField of getCustomFields()\" class=\"custom-field\">\r\n        <vdr-labeled-data [label]=\"customField.key\">{{ customField.value }}</vdr-labeled-data>\r\n    </li>\r\n</ul>\r\n", styles: [":host{display:block}.address-lines{list-style-type:none;line-height:1.2em}.custom-field{margin-top:6px}\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: "component", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FormattedAddressComponent, selector: "vdr-formatted-address", inputs: { address: "address" }, ngImport: i0, template: "<ul class=\"address-lines\">\r\n    <li *ngIf=\"address.fullName\">{{ address.fullName }}</li>\r\n    <li *ngIf=\"address.company\">{{ address.company }}</li>\r\n    <li *ngIf=\"address.streetLine1\">{{ address.streetLine1 }}</li>\r\n    <li *ngIf=\"address.streetLine2\">{{ address.streetLine2 }}</li>\r\n    <li *ngIf=\"address.city\">{{ address.city }}</li>\r\n    <li *ngIf=\"address.province\">{{ address.province }}</li>\r\n    <li *ngIf=\"address.postalCode\">{{ address.postalCode }}</li>\r\n    <li *ngIf=\"address.country\">\r\n        <clr-icon shape=\"world\" size=\"12\"></clr-icon>\r\n        {{ getCountryName() }}\r\n    </li>\r\n    <li *ngIf=\"address.phoneNumber\">\r\n        <clr-icon shape=\"phone-handset\" size=\"12\"></clr-icon>\r\n        {{ address.phoneNumber }}\r\n    </li>\r\n    <li *ngFor=\"let customField of getCustomFields()\" class=\"custom-field\">\r\n        <vdr-labeled-data [label]=\"customField.key\">{{ customField.value }}</vdr-labeled-data>\r\n    </li>\r\n</ul>\r\n", styles: [":host{display:block}.address-lines{list-style-type:none;line-height:1.2em}.custom-field{margin-top:6px}\n"], dependencies: [{ kind: "directive", type: i1$2.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: "component", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormattedAddressComponent, decorators: [{
             type: Component,
@@ -18154,7 +18239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
 
 class HistoryEntryDetailComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HistoryEntryDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: HistoryEntryDetailComponent, selector: "vdr-history-entry-detail", ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"button-small\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"details\" size=\"12\"></clr-icon>\r\n        {{ 'common.details' | translate }}\r\n    </button>\r\n    <vdr-dropdown-menu>\r\n        <div class=\"entry-dropdown\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:inline-block}.entry-dropdown{margin:0 12px}.details-button{margin:0}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: HistoryEntryDetailComponent, selector: "vdr-history-entry-detail", ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"button-small\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"details\" size=\"12\"></clr-icon>\r\n        {{ 'common.details' | translate }}\r\n    </button>\r\n    <vdr-dropdown-menu>\r\n        <div class=\"entry-dropdown\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:inline-block}.entry-dropdown{margin:0 12px}.details-button{margin:0}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HistoryEntryDetailComponent, decorators: [{
             type: Component,
@@ -18167,7 +18252,7 @@ class LanguageSelectorComponent {
         this.languageCodeChange = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LanguageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: LanguageSelectorComponent, selector: "vdr-language-selector", inputs: { currentLanguageCode: "currentLanguageCode", availableLanguageCodes: "availableLanguageCodes", disabled: "disabled" }, outputs: { languageCodeChange: "languageCodeChange" }, ngImport: i0, template: "<ng-container *ngIf=\"1 < availableLanguageCodes?.length\">\r\n    <vdr-dropdown>\r\n        <button type=\"button\" class=\"btn btn-sm\" vdrDropdownTrigger [disabled]=\"disabled\">\r\n            <clr-icon shape=\"world\"></clr-icon>\r\n            {{ currentLanguageCode | localeLanguageName }}\r\n            <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <button\r\n                type=\"button\"\r\n                class=\"language-option\"\r\n                *ngFor=\"let code of availableLanguageCodes\"\r\n                (click)=\"languageCodeChange.emit(code)\"\r\n                vdrDropdownItem\r\n            >\r\n                <span>{{ code | localeLanguageName }}</span><span class=\"code\">{{ code | uppercase }}</span>\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [":host{display:block}.language-option{display:flex;gap:4px;align-items:center;justify-content:space-between}.code{color:var(--color-grey-400)}\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: "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.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: LocaleLanguageNamePipe, name: "localeLanguageName" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: LanguageSelectorComponent, selector: "vdr-language-selector", inputs: { currentLanguageCode: "currentLanguageCode", availableLanguageCodes: "availableLanguageCodes", disabled: "disabled" }, outputs: { languageCodeChange: "languageCodeChange" }, ngImport: i0, template: "<ng-container *ngIf=\"1 < availableLanguageCodes?.length\">\r\n    <vdr-dropdown>\r\n        <button type=\"button\" class=\"btn btn-sm\" vdrDropdownTrigger [disabled]=\"disabled\">\r\n            <clr-icon shape=\"world\"></clr-icon>\r\n            {{ currentLanguageCode | localeLanguageName }}\r\n            <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <button\r\n                type=\"button\"\r\n                class=\"language-option\"\r\n                *ngFor=\"let code of availableLanguageCodes\"\r\n                (click)=\"languageCodeChange.emit(code)\"\r\n                vdrDropdownItem\r\n            >\r\n                <span>{{ code | localeLanguageName }}</span><span class=\"code\">{{ code | uppercase }}</span>\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [":host{display:block}.language-option{display:flex;gap:4px;align-items:center;justify-content:space-between}.code{color:var(--color-grey-400)}\n"], dependencies: [{ kind: "directive", type: i1$2.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: "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.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: LocaleLanguageNamePipe, name: "localeLanguageName" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LanguageSelectorComponent, decorators: [{
             type: Component,
@@ -18264,7 +18349,7 @@ class OrderStateLabelComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OrderStateLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [ngClass]=\"state\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'Delivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'PartiallyDelivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"ban\" *ngIf=\"state === 'Cancelled'\" size=\"12\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n    <ng-content></ng-content>\r\n</vdr-chip>\r\n", styles: ["clr-icon{margin-inline-end:3px}\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: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [ngClass]=\"state\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'Delivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'PartiallyDelivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"ban\" *ngIf=\"state === 'Cancelled'\" size=\"12\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n    <ng-content></ng-content>\r\n</vdr-chip>\r\n", styles: ["clr-icon{margin-inline-end:3px}\n"], dependencies: [{ kind: "directive", type: i1$2.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: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OrderStateLabelComponent, decorators: [{
             type: Component,
@@ -18311,7 +18396,7 @@ class PageHeaderTabsComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageHeaderTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PageHeaderTabsComponent, selector: "vdr-page-header-tabs", inputs: { tabs: "tabs" }, ngImport: i0, template: "<div class=\"tab-bar\" *ngIf=\"tabs.length\">\r\n    <a\r\n        [routerLink]=\"tab.route\"\r\n        class=\"tab\"\r\n        *ngFor=\"let tab of tabs\"\r\n        routerLinkActive=\"active\"\r\n        [routerLinkActiveOptions]=\"routerLinkActiveOptions\"\r\n    >\r\n        <clr-icon *ngIf=\"tab.icon\" [attr.shape]=\"tab.icon\"></clr-icon>\r\n        {{ tab.label | translate }}\r\n    </a>\r\n</div>\r\n", styles: [":host{display:block;margin-top:calc(var(--space-unit) * 2)}.tab-bar{display:flex}.tab-bar a:hover{color:var(--color-text-active);border-bottom-color:var(--color-text-active)}a.tab{padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);border-bottom:1px solid var(--color-weight-300);margin-bottom:-1px;color:var(--color-weight-700);cursor:pointer;font-size:var(--font-size-sm);line-height:24px}a.tab.active{color:var(--color-text-active);border-bottom-color:var(--color-text-active)}\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", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PageHeaderTabsComponent, selector: "vdr-page-header-tabs", inputs: { tabs: "tabs" }, ngImport: i0, template: "<div class=\"tab-bar\" *ngIf=\"tabs.length\">\r\n    <a\r\n        [routerLink]=\"tab.route\"\r\n        class=\"tab\"\r\n        *ngFor=\"let tab of tabs\"\r\n        routerLinkActive=\"active\"\r\n        [routerLinkActiveOptions]=\"routerLinkActiveOptions\"\r\n    >\r\n        <clr-icon *ngIf=\"tab.icon\" [attr.shape]=\"tab.icon\"></clr-icon>\r\n        {{ tab.label | translate }}\r\n    </a>\r\n</div>\r\n", styles: [":host{display:block;margin-top:calc(var(--space-unit) * 2)}.tab-bar{display:flex}.tab-bar a:hover{color:var(--color-text-active);border-bottom-color:var(--color-text-active)}a.tab{padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);border-bottom:1px solid var(--color-weight-300);margin-bottom:-1px;color:var(--color-weight-700);cursor:pointer;font-size:var(--font-size-sm);line-height:24px}a.tab.active{color:var(--color-text-active);border-bottom-color:var(--color-text-active)}\n"], dependencies: [{ kind: "directive", type: i1$2.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", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageHeaderTabsComponent, decorators: [{
             type: Component,
@@ -18569,7 +18654,7 @@ class RadioCardComponent {
         return this.fieldset.idFn(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RadioCardComponent, deps: [{ token: RadioCardFieldsetComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RadioCardComponent, selector: "vdr-radio-card", inputs: { item: "item" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["VdrRadioCard"], ngImport: i0, template: "<label\r\n    [ngClass]=\"{\r\n        'selected': isSelected(item),\r\n        'focussed': isFocussed(item)\r\n    }\"\r\n    class=\"radio-card\"\r\n>\r\n    <input\r\n        type=\"radio\"\r\n        [name]=\"name\"\r\n        [value]=\"getItemId(item)\"\r\n        class=\"hidden\"\r\n        (focus)=\"setFocussedId(item)\"\r\n        (blur)=\"setFocussedId(undefined)\"\r\n        (change)=\"selectChanged(item)\"\r\n    />\r\n    <vdr-select-toggle [selected]=\"isSelected(item)\" size=\"small\"></vdr-select-toggle>\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</label>\r\n", styles: [":host{display:inline-block}.radio-card{background:none;position:relative;display:block;border:1px solid var(--clr-btn-default-border-color, #0072a3);border-radius:var(--clr-btn-border-radius, .15rem);padding:6px;text-align:start;margin:6px}.radio-card:hover{cursor:pointer;outline:1px solid var(--color-primary-500)}.radio-card.selected{outline:1px solid var(--color-primary-500);background-color:var(--color-primary-100)}input.hidden{visibility:hidden;position:absolute}vdr-select-toggle{position:absolute;top:3px;left:3px}.content{margin-inline-start:24px}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RadioCardComponent, selector: "vdr-radio-card", inputs: { item: "item" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["VdrRadioCard"], ngImport: i0, template: "<label\r\n    [ngClass]=\"{\r\n        'selected': isSelected(item),\r\n        'focussed': isFocussed(item)\r\n    }\"\r\n    class=\"radio-card\"\r\n>\r\n    <input\r\n        type=\"radio\"\r\n        [name]=\"name\"\r\n        [value]=\"getItemId(item)\"\r\n        class=\"hidden\"\r\n        (focus)=\"setFocussedId(item)\"\r\n        (blur)=\"setFocussedId(undefined)\"\r\n        (change)=\"selectChanged(item)\"\r\n    />\r\n    <vdr-select-toggle [selected]=\"isSelected(item)\" size=\"small\"></vdr-select-toggle>\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</label>\r\n", styles: [":host{display:inline-block}.radio-card{background:none;position:relative;display:block;border:1px solid var(--clr-btn-default-border-color, #0072a3);border-radius:var(--clr-btn-border-radius, .15rem);padding:6px;text-align:start;margin:6px}.radio-card:hover{cursor:pointer;outline:1px solid var(--color-primary-500)}.radio-card.selected{outline:1px solid var(--color-primary-500);background-color:var(--color-primary-100)}input.hidden{visibility:hidden;position:absolute}vdr-select-toggle{position:absolute;top:3px;left:3px}.content{margin-inline-start:24px}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RadioCardComponent, decorators: [{
             type: Component,
@@ -18641,7 +18726,7 @@ class SplitViewComponent {
         this.closeClicked.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SplitViewComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$6.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SplitViewComponent, selector: "vdr-split-view", inputs: { rightPanelOpen: "rightPanelOpen" }, outputs: { closeClicked: "closeClicked" }, queries: [{ propertyName: "leftTemplate", first: true, predicate: SplitViewLeftDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "rightTemplate", first: true, predicate: SplitViewRightDirective, descendants: true, read: SplitViewRightDirective, static: true }], viewQueries: [{ propertyName: "resizeHandle", first: true, predicate: ["resizeHandle"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"split-view-wrapper\" [class.expanded]=\"rightPanelOpen\" [class.resizing]=\"resizing$ | async\">\r\n    <div class=\"left-panel\" [style.width]=\"leftPanelWidth$ | async\">\r\n        <ng-container *ngTemplateOutlet=\"leftTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"separator\" [class.hidden]=\"!rightPanelOpen\">\r\n        <div class=\"top\"></div>\r\n        <div class=\"resize-handle\" #resizeHandle>\r\n            <clr-icon shape=\"drag-handle\"></clr-icon>\r\n        </div>\r\n        <div class=\"bottom\"></div>\r\n    </div>\r\n    <div\r\n        class=\"right-panel\"\r\n        [class.expanded]=\"rightPanelOpen\"\r\n        [class.resizing]=\"resizing$ | async\"\r\n        [style.width.px]=\"rightPanelOpen ? (rightPanelWidth$ | async) : 0\"\r\n    >\r\n        <div class=\"close-row\">\r\n            <div class=\"title\" *ngIf=\"rightTemplate.splitViewTitle as title\">{{ title }}</div>\r\n            <button type=\"button\" class=\"button-small\" (click)=\"close()\">\r\n                <clr-icon shape=\"close\"></clr-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <ng-container *ngTemplateOutlet=\"rightTemplate.template\"></ng-container>\r\n    </div>\r\n</div>\r\n", styles: [":host{--separator-border: var(--color-split-view-separator-border);max-width:var(--surface-width)}.split-view-wrapper{display:flex;height:calc(100% - 50px)}.split-view-wrapper.resizing{-webkit-user-select:none;user-select:none}.split-view-wrapper .left-panel{flex:1;overflow:auto;margin-top:0}.split-view-wrapper .left-panel .active{background-color:var(--clr-global-selection-color)}.split-view-wrapper .left-panel.expanded{width:calc(100% - 40vw)}.separator{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-inline-start:-1px;z-index:10}.separator.hidden{display:none}.separator .resize-handle{display:flex;align-items:center;justify-content:center;flex:1;border-inline-start:1px solid var(--separator-border);border-inline-end:1px solid var(--separator-border);cursor:ew-resize;transition:background-color .2s}.separator .top,.separator .bottom{height:48px;width:100%;border-style:solid;border-width:0 1px}.separator .top{border-image:linear-gradient(0deg,var(--separator-border),transparent) 1}.separator .bottom{border-image:linear-gradient(180deg,var(--separator-border),transparent) 1}.resizing{--separator-border: var(--color-split-view-separator-resize-border)}.resizing .resize-handle{color:var(--color-primary-700)}.close-row{display:flex;justify-content:space-between;padding:calc(var(--space-unit) * 1);padding-inline-start:var(--surface-margin-left);padding-inline-end:4px}.right-panel{height:100%;opacity:0;visibility:hidden;overflow:auto}.right-panel:not(.resizing){transition:width .3s,opacity .2s .3s,visibility 0s .3s}.right-panel.expanded{visibility:visible;opacity:1}.right-panel .close-button{margin:0;background:none;border:none;cursor:pointer}.right-panel ::ng-deep table.table{margin-top:0}.right-panel ::ng-deep table.table th{top:0}.right-panel .controls{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SplitViewComponent, selector: "vdr-split-view", inputs: { rightPanelOpen: "rightPanelOpen" }, outputs: { closeClicked: "closeClicked" }, queries: [{ propertyName: "leftTemplate", first: true, predicate: SplitViewLeftDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "rightTemplate", first: true, predicate: SplitViewRightDirective, descendants: true, read: SplitViewRightDirective, static: true }], viewQueries: [{ propertyName: "resizeHandle", first: true, predicate: ["resizeHandle"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"split-view-wrapper\" [class.expanded]=\"rightPanelOpen\" [class.resizing]=\"resizing$ | async\">\r\n    <div class=\"left-panel\" [style.width]=\"leftPanelWidth$ | async\">\r\n        <ng-container *ngTemplateOutlet=\"leftTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"separator\" [class.hidden]=\"!rightPanelOpen\">\r\n        <div class=\"top\"></div>\r\n        <div class=\"resize-handle\" #resizeHandle>\r\n            <clr-icon shape=\"drag-handle\"></clr-icon>\r\n        </div>\r\n        <div class=\"bottom\"></div>\r\n    </div>\r\n    <div\r\n        class=\"right-panel\"\r\n        [class.expanded]=\"rightPanelOpen\"\r\n        [class.resizing]=\"resizing$ | async\"\r\n        [style.width.px]=\"rightPanelOpen ? (rightPanelWidth$ | async) : 0\"\r\n    >\r\n        <div class=\"close-row\">\r\n            <div class=\"title\" *ngIf=\"rightTemplate.splitViewTitle as title\">{{ title }}</div>\r\n            <button type=\"button\" class=\"button-small\" (click)=\"close()\">\r\n                <clr-icon shape=\"close\"></clr-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <ng-container *ngTemplateOutlet=\"rightTemplate.template\"></ng-container>\r\n    </div>\r\n</div>\r\n", styles: [":host{--separator-border: var(--color-split-view-separator-border);max-width:var(--surface-width)}.split-view-wrapper{display:flex;height:calc(100% - 50px)}.split-view-wrapper.resizing{-webkit-user-select:none;user-select:none}.split-view-wrapper .left-panel{flex:1;overflow:auto;margin-top:0}.split-view-wrapper .left-panel .active{background-color:var(--clr-global-selection-color)}.split-view-wrapper .left-panel.expanded{width:calc(100% - 40vw)}.separator{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-inline-start:-1px;z-index:10}.separator.hidden{display:none}.separator .resize-handle{display:flex;align-items:center;justify-content:center;flex:1;border-inline-start:1px solid var(--separator-border);border-inline-end:1px solid var(--separator-border);cursor:ew-resize;transition:background-color .2s}.separator .top,.separator .bottom{height:48px;width:100%;border-style:solid;border-width:0 1px}.separator .top{border-image:linear-gradient(0deg,var(--separator-border),transparent) 1}.separator .bottom{border-image:linear-gradient(180deg,var(--separator-border),transparent) 1}.resizing{--separator-border: var(--color-split-view-separator-resize-border)}.resizing .resize-handle{color:var(--color-primary-700)}.close-row{display:flex;justify-content:space-between;padding:calc(var(--space-unit) * 1);padding-inline-start:var(--surface-margin-left);padding-inline-end:4px}.right-panel{height:100%;opacity:0;visibility:hidden;overflow:auto}.right-panel:not(.resizing){transition:width .3s,opacity .2s .3s,visibility 0s .3s}.right-panel.expanded{visibility:visible;opacity:1}.right-panel .close-button{margin:0;background:none;border:none;cursor:pointer}.right-panel ::ng-deep table.table{margin-top:0}.right-panel ::ng-deep table.table th{top:0}.right-panel .controls{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SplitViewComponent, decorators: [{
             type: Component,
@@ -18669,7 +18754,7 @@ class TableRowActionComponent {
         this.disabled = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TableRowActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TableRowActionComponent, selector: "vdr-table-row-action", inputs: { linkTo: "linkTo", label: "label", iconShape: "iconShape", disabled: "disabled" }, ngImport: i0, template: "<ng-container *ngIf=\"!disabled; else: disabledLink\">\r\n    <a class=\"btn btn-link btn-sm\" [routerLink]=\"linkTo\">\r\n        <clr-icon [attr.shape]=\"iconShape\"></clr-icon>\r\n        {{ label }}\r\n    </a>\r\n</ng-container>\r\n<ng-template #disabledLink>\r\n    <button class=\"btn btn-link btn-sm\" disabled>\r\n        <clr-icon [attr.shape]=\"iconShape\"></clr-icon>\r\n        {{ label }}\r\n    </button>\r\n</ng-template>\r\n", styles: ["a.btn{margin:0}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { 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", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TableRowActionComponent, selector: "vdr-table-row-action", inputs: { linkTo: "linkTo", label: "label", iconShape: "iconShape", disabled: "disabled" }, ngImport: i0, template: "<ng-container *ngIf=\"!disabled; else: disabledLink\">\r\n    <a class=\"btn btn-link btn-sm\" [routerLink]=\"linkTo\">\r\n        <clr-icon [attr.shape]=\"iconShape\"></clr-icon>\r\n        {{ label }}\r\n    </a>\r\n</ng-container>\r\n<ng-template #disabledLink>\r\n    <button class=\"btn btn-link btn-sm\" disabled>\r\n        <clr-icon [attr.shape]=\"iconShape\"></clr-icon>\r\n        {{ label }}\r\n    </button>\r\n</ng-template>\r\n", styles: ["a.btn{margin:0}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { 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", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TableRowActionComponent, decorators: [{
             type: Component,
@@ -18703,7 +18788,7 @@ class TimelineEntryComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TimelineEntryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: { displayType: "displayType", createdAt: "createdAt", name: "name", featured: "featured", iconShape: "iconShape", isLast: "isLast", collapsed: "collapsed" }, outputs: { expandClick: "expandClick" }, host: { properties: { "class.collapsed": "this.collapsed" } }, ngImport: i0, template: "<div\r\n    [ngClass]=\"displayType\"\r\n    [class.has-custom-icon]=\"!!iconShape\"\r\n    class=\"entry\"\r\n    [class.last]=\"isLast === true\"\r\n    [class.collapsed]=\"collapsed\"\r\n>\r\n    <div class=\"timeline\" (click)=\"expandClick.emit()\" [title]=\"timelineTitle | translate\">\r\n        <div class=\"custom-icon\">\r\n            <clr-icon\r\n                *ngIf=\"iconShape && !collapsed\"\r\n                [attr.shape]=\"getIconShape()\"\r\n                [ngClass]=\"getIconClass()\"\r\n                size=\"24\"\r\n            ></clr-icon>\r\n        </div>\r\n    </div>\r\n    <div class=\"entry-body\">\r\n        <div class=\"detail\">\r\n            <div class=\"time\">\r\n                {{ createdAt | localeDate: 'short' }}\r\n            </div>\r\n            <div class=\"name\">\r\n                {{ name || '' }}\r\n            </div>\r\n        </div>\r\n        <div [class.featured-entry]=\"featured\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}:host:first-of-type .timeline:before{border-left-color:var(--color-weight-200)}:host:first-of-type .entry-body{max-height:initial}@media screen and (min-width: 768px){:host:first-of-type .entry-body{flex-direction:column}}:host:first-of-type .featured-entry{width:100%}.entry{display:flex}.entry:not(.collapsed):hover{background-color:var(--color-table-row-hover-bg)}.timeline{border-inline-start:2px solid var(--color-weight-200);padding-bottom:8px;position:relative}.timeline:before{content:\"\";position:absolute;width:2px;height:32px;left:-2px;border-inline-start:2px solid var(--color-weight-200)}.timeline:after{content:\"\";display:block;border-radius:50%;width:8px;height:8px;background-color:var(--color-weight-100);border:1px solid var(--color-weight-300);position:absolute;left:-5px;top:42%;transition:top .2s;cursor:pointer;outline:2px solid var(--color-card-bg)}.timeline .custom-icon{position:absolute;width:32px;height:32px;left:-17px;top:30%;align-items:center;justify-content:center;border-radius:50%;color:var(--color-primary-700);background-color:var(--color-weight-100);border:1px solid var(--color-weight-200);outline:7px solid var(--color-card-bg);padding:6px;display:none}.entry.has-custom-icon .timeline:after{display:none}.entry.has-custom-icon .custom-icon{display:flex}.entry.last .timeline{border-left-color:transparent}.entry-body{font-size:var(--font-size-xs);flex:1;padding:16px 0;padding-inline-start:12px;line-height:16px;margin-inline-start:12px;color:var(--color-text-200);overflow:visible;max-height:100px;transition:max-height .2s,padding-top .2s,opacity .2s .2s}@media screen and (min-width: 768px){.entry-body{display:flex;gap:var(--space-unit);flex-direction:row-reverse;justify-content:space-between;align-items:center;padding-inline-end:var(--space-unit)}}.featured-entry ::ng-deep .title{color:var(--color-text-100);font-size:var(--font-size-sm);line-height:26px;display:flex;align-items:center;gap:var(--space-unit)}.featured-entry ::ng-deep .note-text{color:var(--color-text-100);white-space:pre-wrap}.detail{display:flex;gap:12px;color:var(--color-text-300);font-size:var(--font-size-xs)}@media screen and (min-width: 768px){.detail{flex-direction:row-reverse}}.muted .timeline,.muted .timeline .custom-icon{color:var(--color-text-300)}.success .timeline,.success .timeline .custom-icon{color:var(--color-success-700)}.success .timeline:after{background-color:var(--color-success-200);border:1px solid var(--color-success-400)}.error .timeline,.error .timeline .custom-icon{color:var(--color-error-700)}.error .timeline:after{background-color:var(--color-error-200);border:1px solid var(--color-error-400)}.warning .timeline,.warning .timeline .custom-icon{color:var(--color-warning-700)}.warning .timeline:after{background-color:var(--color-warning-200);border:1px solid var(--color-warning-600)}.collapsed .entry-body{max-height:0;overflow:hidden;opacity:0;padding:0}.collapsed .timeline{border-left-color:transparent}.collapsed .timeline:after{top:0}\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: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: { displayType: "displayType", createdAt: "createdAt", name: "name", featured: "featured", iconShape: "iconShape", isLast: "isLast", collapsed: "collapsed" }, outputs: { expandClick: "expandClick" }, host: { properties: { "class.collapsed": "this.collapsed" } }, ngImport: i0, template: "<div\r\n    [ngClass]=\"displayType\"\r\n    [class.has-custom-icon]=\"!!iconShape\"\r\n    class=\"entry\"\r\n    [class.last]=\"isLast === true\"\r\n    [class.collapsed]=\"collapsed\"\r\n>\r\n    <div class=\"timeline\" (click)=\"expandClick.emit()\" [title]=\"timelineTitle | translate\">\r\n        <div class=\"custom-icon\">\r\n            <clr-icon\r\n                *ngIf=\"iconShape && !collapsed\"\r\n                [attr.shape]=\"getIconShape()\"\r\n                [ngClass]=\"getIconClass()\"\r\n                size=\"24\"\r\n            ></clr-icon>\r\n        </div>\r\n    </div>\r\n    <div class=\"entry-body\">\r\n        <div class=\"detail\">\r\n            <div class=\"time\">\r\n                {{ createdAt | localeDate: 'short' }}\r\n            </div>\r\n            <div class=\"name\">\r\n                {{ name || '' }}\r\n            </div>\r\n        </div>\r\n        <div [class.featured-entry]=\"featured\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}:host:first-of-type .timeline:before{border-left-color:var(--color-weight-200)}:host:first-of-type .entry-body{max-height:initial}@media screen and (min-width: 768px){:host:first-of-type .entry-body{flex-direction:column}}:host:first-of-type .featured-entry{width:100%}.entry{display:flex}.entry:not(.collapsed):hover{background-color:var(--color-table-row-hover-bg)}.timeline{border-inline-start:2px solid var(--color-weight-200);padding-bottom:8px;position:relative}.timeline:before{content:\"\";position:absolute;width:2px;height:32px;left:-2px;border-inline-start:2px solid var(--color-weight-200)}.timeline:after{content:\"\";display:block;border-radius:50%;width:8px;height:8px;background-color:var(--color-weight-100);border:1px solid var(--color-weight-300);position:absolute;left:-5px;top:42%;transition:top .2s;cursor:pointer;outline:2px solid var(--color-card-bg)}.timeline .custom-icon{position:absolute;width:32px;height:32px;left:-17px;top:30%;align-items:center;justify-content:center;border-radius:50%;color:var(--color-primary-700);background-color:var(--color-weight-100);border:1px solid var(--color-weight-200);outline:7px solid var(--color-card-bg);padding:6px;display:none}.entry.has-custom-icon .timeline:after{display:none}.entry.has-custom-icon .custom-icon{display:flex}.entry.last .timeline{border-left-color:transparent}.entry-body{font-size:var(--font-size-xs);flex:1;padding:16px 0;padding-inline-start:12px;line-height:16px;margin-inline-start:12px;color:var(--color-text-200);overflow:visible;max-height:100px;transition:max-height .2s,padding-top .2s,opacity .2s .2s}@media screen and (min-width: 768px){.entry-body{display:flex;gap:var(--space-unit);flex-direction:row-reverse;justify-content:space-between;align-items:center;padding-inline-end:var(--space-unit)}}.featured-entry ::ng-deep .title{color:var(--color-text-100);font-size:var(--font-size-sm);line-height:26px;display:flex;align-items:center;gap:var(--space-unit)}.featured-entry ::ng-deep .note-text{color:var(--color-text-100);white-space:pre-wrap}.detail{display:flex;gap:12px;color:var(--color-text-300);font-size:var(--font-size-xs)}@media screen and (min-width: 768px){.detail{flex-direction:row-reverse}}.muted .timeline,.muted .timeline .custom-icon{color:var(--color-text-300)}.success .timeline,.success .timeline .custom-icon{color:var(--color-success-700)}.success .timeline:after{background-color:var(--color-success-200);border:1px solid var(--color-success-400)}.error .timeline,.error .timeline .custom-icon{color:var(--color-error-700)}.error .timeline:after{background-color:var(--color-error-200);border:1px solid var(--color-error-400)}.warning .timeline,.warning .timeline .custom-icon{color:var(--color-warning-700)}.warning .timeline:after{background-color:var(--color-warning-200);border:1px solid var(--color-warning-600)}.collapsed .entry-body{max-height:0;overflow:hidden;opacity:0;padding:0}.collapsed .timeline{border-left-color:transparent}.collapsed .timeline:after{top:0}\n"], dependencies: [{ kind: "directive", type: i1$2.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: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TimelineEntryComponent, decorators: [{
             type: Component,
@@ -18734,7 +18819,7 @@ class TitleInputComponent {
         this.readonly = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TitleInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TitleInputComponent, selector: "vdr-title-input", inputs: { readonly: "readonly" }, host: { properties: { "class.readonly": "this.readonly" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n<div class=\"edit-icon\" *ngIf=\"!readonly\">\r\n    <clr-icon shape=\"edit\"></clr-icon>\r\n</div>\r\n", styles: [":host{display:block;position:relative}:host ::ng-deep input{font-size:18px;color:var(--clr-p1-color);max-width:100%}:host ::ng-deep input:not(:focus){border-color:transparent!important;background-color:var(--color-component-bg-100)!important}:host ::ng-deep input:focus{background-color:var(--clr-global-app-background)}:host ::ng-deep .clr-control-container{max-width:100%}:host ::ng-deep .clr-input-wrapper{max-width:100%!important}:host .edit-icon{position:absolute;right:8px;top:6px;color:var(--color-grey-400);opacity:0;transition:opacity .2s}:host:hover ::ng-deep input:not(:focus){background-color:var(--color-component-bg-200)!important}:host:hover .edit-icon{opacity:1}:host.readonly .edit-icon{display:none}:host.readonly:hover ::ng-deep input:not(:focus){background-color:var(--color-grey-200)!important}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TitleInputComponent, selector: "vdr-title-input", inputs: { readonly: "readonly" }, host: { properties: { "class.readonly": "this.readonly" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n<div class=\"edit-icon\" *ngIf=\"!readonly\">\r\n    <clr-icon shape=\"edit\"></clr-icon>\r\n</div>\r\n", styles: [":host{display:block;position:relative}:host ::ng-deep input{font-size:18px;color:var(--clr-p1-color);max-width:100%}:host ::ng-deep input:not(:focus){border-color:transparent!important;background-color:var(--color-component-bg-100)!important}:host ::ng-deep input:focus{background-color:var(--clr-global-app-background)}:host ::ng-deep .clr-control-container{max-width:100%}:host ::ng-deep .clr-input-wrapper{max-width:100%!important}:host .edit-icon{position:absolute;right:8px;top:6px;color:var(--color-grey-400);opacity:0;transition:opacity .2s}:host:hover ::ng-deep input:not(:focus){background-color:var(--color-component-bg-200)!important}:host:hover .edit-icon{opacity:1}:host.readonly .edit-icon{display:none}:host.readonly:hover ::ng-deep input:not(:focus){background-color:var(--color-grey-200)!important}\n"], dependencies: [{ kind: "directive", type: i1$2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TitleInputComponent, decorators: [{
             type: Component,
@@ -19346,7 +19431,7 @@ class ActionBarDropdownMenuComponent extends ActionBarBaseComponent {
                 },
                 deps: [[new Self(), ActionBarDropdownMenuComponent]],
             },
-        ], viewQueries: [{ propertyName: "dropdownComponent", first: true, predicate: ["dropdownComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<vdr-ui-extension-point [locationId]=\"locationId\" api=\"actionBarDropdown\" [leftPx]=\"-24\">\r\n    <vdr-dropdown #dropdownComponent *ngIf=\"alwaysShow || (items$ | async)?.length\">\r\n        <button class=\"icon-button\" vdrDropdownTrigger>\r\n            <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <ng-content />\r\n            <ng-container *ngFor=\"let item of items$ | async\">\r\n                <ng-container *ngIf=\"buttonStates[item.id] | async as buttonState\">\r\n                    <div class=\"dropdown-divider\" *ngIf=\"item.hasDivider === true\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        *vdrIfPermissions=\"item.requiresPermission\"\r\n                        [routerLink]=\"getRouterLink(item)\"\r\n                        [class.hidden]=\"buttonState.visible === false\"\r\n                        [disabled]=\"buttonState.disabled\"\r\n                        (click)=\"handleClick($event, 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            </ng-container>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</vdr-ui-extension-point>\r\n", styles: [""], 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", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "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 }); }
+        ], viewQueries: [{ propertyName: "dropdownComponent", first: true, predicate: ["dropdownComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<vdr-ui-extension-point [locationId]=\"locationId\" api=\"actionBarDropdown\" [leftPx]=\"-24\">\r\n    <vdr-dropdown #dropdownComponent *ngIf=\"alwaysShow || (items$ | async)?.length\">\r\n        <button class=\"icon-button\" vdrDropdownTrigger>\r\n            <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <ng-content />\r\n            <ng-container *ngFor=\"let item of items$ | async\">\r\n                <ng-container *ngIf=\"buttonStates[item.id] | async as buttonState\">\r\n                    <div class=\"dropdown-divider\" *ngIf=\"item.hasDivider === true\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        *vdrIfPermissions=\"item.requiresPermission\"\r\n                        [routerLink]=\"getRouterLink(item)\"\r\n                        [class.hidden]=\"buttonState.visible === false\"\r\n                        [disabled]=\"buttonState.disabled\"\r\n                        (click)=\"handleClick($event, 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            </ng-container>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</vdr-ui-extension-point>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.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", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "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: "17.2.4", ngImport: i0, type: ActionBarDropdownMenuComponent, decorators: [{
             type: Component,
@@ -19480,6 +19565,7 @@ const DECLARATIONS = [
     ActionBarLeftComponent,
     ActionBarRightComponent,
     ActionBarDropdownMenuComponent,
+    AssetsComponent,
     AssetPreviewComponent,
     AssetPreviewDialogComponent,
     AssetSearchInputComponent,
@@ -19640,6 +19726,7 @@ class SharedModule {
             ActionBarLeftComponent,
             ActionBarRightComponent,
             ActionBarDropdownMenuComponent,
+            AssetsComponent,
             AssetPreviewComponent,
             AssetPreviewDialogComponent,
             AssetSearchInputComponent,
@@ -19813,6 +19900,7 @@ class SharedModule {
             ActionBarLeftComponent,
             ActionBarRightComponent,
             ActionBarDropdownMenuComponent,
+            AssetsComponent,
             AssetPreviewComponent,
             AssetPreviewDialogComponent,
             AssetSearchInputComponent,
@@ -20001,13 +20089,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
         }] });
 
 class CoreModule {
-    constructor(i18nService, localStorageService, titleService, alertsService, dataService, notificationService) {
+    constructor(i18nService, localStorageService, titleService, alertsService) {
         this.i18nService = i18nService;
         this.localStorageService = localStorageService;
         this.titleService = titleService;
         this.alertsService = alertsService;
-        this.dataService = dataService;
-        this.notificationService = notificationService;
         this.initUiLanguagesAndLocales();
         this.initUiTitle();
         this.initAlerts();
@@ -20040,17 +20126,18 @@ class CoreModule {
         this.titleService.setTitle(title);
     }
     initAlerts() {
+        const pendingUpdatesId = 'pending-search-index-updates';
         this.alertsService.configureAlert({
-            id: 'pending-search-index-updates',
+            id: pendingUpdatesId,
             requiredPermissions: [Permission.ReadCatalog, Permission.ReadProduct],
-            check: () => this.dataService.product
+            check: context => context.dataService.product
                 .getPendingSearchIndexUpdates()
                 .mapSingle(({ pendingSearchIndexUpdates }) => pendingSearchIndexUpdates),
-            recheckIntervalMs: 1000 * 30,
+            recheck: () => interval(1000 * 30),
             isAlert: data => 0 < data,
-            action: data => {
-                this.dataService.product.runPendingSearchIndexUpdates().subscribe(value => {
-                    this.notificationService.info(marker('catalog.running-search-index-updates'), {
+            action: (data, context) => {
+                context.dataService.product.runPendingSearchIndexUpdates().subscribe(() => {
+                    context.notificationService.info(marker('catalog.running-search-index-updates'), {
                         count: data,
                     });
                 });
@@ -20060,9 +20147,9 @@ class CoreModule {
                 translationVars: { count: data },
             }),
         });
-        this.alertsService.refresh();
+        this.alertsService.refresh(pendingUpdatesId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CoreModule, deps: [{ token: I18nService }, { token: LocalStorageService }, { token: i1$6.Title }, { token: AlertsService }, { token: DataService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CoreModule, deps: [{ token: I18nService }, { token: LocalStorageService }, { token: i1$6.Title }, { token: AlertsService }], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: CoreModule, declarations: [AppShellComponent,
             UserMenuComponent,
             BaseNavComponent,
@@ -20125,7 +20212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         AlertsComponent,
                     ],
                 }]
-        }], ctorParameters: () => [{ type: I18nService }, { type: LocalStorageService }, { type: i1$6.Title }, { type: AlertsService }, { type: DataService }, { type: NotificationService }] });
+        }], ctorParameters: () => [{ type: I18nService }, { type: LocalStorageService }, { type: i1$6.Title }, { type: AlertsService }] });
 function HttpLoaderFactory(http, location) {
     // Dynamically get the baseHref, which is configured in the angular.json file
     const baseHref = location.getBaseHrefFromDOM();
@@ -21716,6 +21803,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 }]
         }] });
 
+/**
+ * @description
+ * Registers an alert which can be displayed in the Admin UI alert dropdown in the top bar.
+ * The alert is configured using the {@link AlertConfig} object.
+ *
+ * @since 2.2.0
+ * @docsCategory alerts
+ */
+function registerAlert(config) {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (alertsService) => () => {
+            alertsService.configureAlert(config);
+            alertsService.refresh(config.id);
+        },
+        deps: [AlertsService],
+    };
+}
+
 /**
  * @description
  * Registers a custom {@link BulkAction} which can be invoked from the bulk action menu
@@ -22451,7 +22558,7 @@ class ExtensionHostComponent {
         return input.hasOwnProperty('extensionUrl');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ExtensionHostComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$6.DomSanitizer }, { token: ExtensionHostService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ExtensionHostComponent, isStandalone: true, selector: "vdr-extension-host", providers: [ExtensionHostService], viewQueries: [{ propertyName: "extensionFrame", first: true, predicate: ["extensionFrame"], descendants: true }], ngImport: i0, template: "<ng-template [ngIf]=\"openInIframe\" [ngIfElse]=\"launchExtension\">\r\n    <iframe [src]=\"extensionUrl\" #extensionFrame></iframe>\r\n</ng-template>\r\n<ng-template #launchExtension>\r\n    <div class=\"launch-button\" [class.launched]=\"extensionWindowIsOpen\">\r\n        <div>\r\n            <button\r\n                class=\"btn btn-lg btn-primary\"\r\n                [disabled]=\"extensionWindowIsOpen\"\r\n                (click)=\"launchExtensionWindow()\"\r\n            >\r\n                <clr-icon shape=\"pop-out\"></clr-icon>\r\n                {{ 'common.launch-extension' | translate }}\r\n            </button>\r\n            <h3 class=\"window-hint\" [class.visible]=\"extensionWindowIsOpen\">\r\n                {{ 'common.extension-running-in-separate-window' | translate }}\r\n            </h3>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: ["iframe{position:absolute;inset:0;width:100%;height:100%;border:none}.launch-button{position:absolute;inset:0;width:100%;height:100%;border:none;padding:24px;display:flex;align-items:center;justify-content:center;transition:background-color .3s;text-align:center}.launch-button.launched{background-color:var(--color-component-bg-300)}.window-hint{visibility:hidden;opacity:0;transition:visibility .3s 0,opacity .3s}.window-hint.visible{visibility:visible;opacity:1;transition:visibility 0,opacity .3s}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { 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.Default }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ExtensionHostComponent, isStandalone: true, selector: "vdr-extension-host", providers: [ExtensionHostService], viewQueries: [{ propertyName: "extensionFrame", first: true, predicate: ["extensionFrame"], descendants: true }], ngImport: i0, template: "<ng-template [ngIf]=\"openInIframe\" [ngIfElse]=\"launchExtension\">\r\n    <iframe [src]=\"extensionUrl\" #extensionFrame></iframe>\r\n</ng-template>\r\n<ng-template #launchExtension>\r\n    <div class=\"launch-button\" [class.launched]=\"extensionWindowIsOpen\">\r\n        <div>\r\n            <button\r\n                class=\"btn btn-lg btn-primary\"\r\n                [disabled]=\"extensionWindowIsOpen\"\r\n                (click)=\"launchExtensionWindow()\"\r\n            >\r\n                <clr-icon shape=\"pop-out\"></clr-icon>\r\n                {{ 'common.launch-extension' | translate }}\r\n            </button>\r\n            <h3 class=\"window-hint\" [class.visible]=\"extensionWindowIsOpen\">\r\n                {{ 'common.extension-running-in-separate-window' | translate }}\r\n            </h3>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: ["iframe{position:absolute;inset:0;width:100%;height:100%;border:none}.launch-button{position:absolute;inset:0;width:100%;height:100%;border:none;padding:24px;display:flex;align-items:center;justify-content:center;transition:background-color .3s;text-align:center}.launch-button.launched{background-color:var(--color-component-bg-300)}.window-hint{visibility:hidden;opacity:0;transition:visibility .3s 0,opacity .3s}.window-hint.visible{visibility:visible;opacity:1;transition:visibility 0,opacity .3s}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$2.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.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ExtensionHostComponent, decorators: [{
             type: Component,
@@ -22556,5 +22663,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, ActionBarBaseComponent, ActionBarComponent, ActionBarDropdownMenuComponent, 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, CurrencyService, 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, DUPLICATE_ENTITY, 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, DuplicateEntityDialogComponent, DuplicateEntityDocument, 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_ENTITY_DUPLICATORS, 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, GetEntityDuplicatorsDocument, GetFacetDetailDocument, GetFacetListDocument, GetFacetValueListDocument, GetGlobalSettingsDetailDocument, GetGlobalSettingsDocument, GetJobInfoDocument, GetJobQueueListDocument, GetJobsByIdDocument, GetLatestOrdersDocument, GetNetworkStatusDocument, GetOrderChartDataDocument, GetOrderDocument, GetOrderHistoryDocument, GetOrderListDocument, GetOrderStateDocument, 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, LocalizationService, 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, PermissionsService, 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, SetOrderCustomerDocument, 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, addActionBarDropdownMenuItem, 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 };
+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, ActionBarBaseComponent, ActionBarComponent, ActionBarDropdownMenuComponent, 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, AssetsComponent, 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, CurrencyService, 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, DUPLICATE_ENTITY, 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, DuplicateEntityDialogComponent, DuplicateEntityDocument, 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_ENTITY_DUPLICATORS, 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, GetEntityDuplicatorsDocument, GetFacetDetailDocument, GetFacetListDocument, GetFacetValueListDocument, GetGlobalSettingsDetailDocument, GetGlobalSettingsDocument, GetJobInfoDocument, GetJobQueueListDocument, GetJobsByIdDocument, GetLatestOrdersDocument, GetNetworkStatusDocument, GetOrderChartDataDocument, GetOrderDocument, GetOrderHistoryDocument, GetOrderListDocument, GetOrderStateDocument, 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, LocalizationService, 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, PermissionsService, 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, SetOrderCustomerDocument, 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, addActionBarDropdownMenuItem, 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, registerAlert, 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