@vendure/admin-ui 3.1.0-next.1 → 3.1.0-next.3

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

@@ -2,20 +2,20 @@ import * as i0 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, mergeMap, startWith, mapTo, catchError, shareReplay, throttleTime, scan, debounceTime, delay, bufferWhen, delayWhen } from 'rxjs/operators';
+import { concatMap, bufferCount, map, filter, distinctUntilChanged, skip, takeUntil, take, finalize, switchMap, mergeMap, startWith, tap, catchError, shareReplay, throttleTime, scan, debounceTime, mapTo, 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, 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 { from, Subject, merge, Observable, lastValueFrom, BehaviorSubject, map as map$1, 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';
 import { Kind, getOperationAST, parse } from 'graphql';
 import * as i1$1 from '@angular/router';
 import { NavigationEnd, PRIMARY_OUTLET, ActivatedRoute, RouterModule, Router, ActivationStart } from '@angular/router';
-import * as i1$5 from '@angular/common/http';
+import * as i1$4 from '@angular/common/http';
 import { HttpResponse, HttpErrorResponse, HttpClientModule, HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
-import * as i1$6 from '@angular/platform-browser';
+import * as i1$5 from '@angular/platform-browser';
 import { Title, BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
@@ -29,7 +29,7 @@ import * as i1$3 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i5 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
-import * as i1$4 from '@angular/forms';
+import * as i4$1 from '@angular/forms';
 import { UntypedFormControl, FormArray, UntypedFormArray, NG_VALUE_ACCESSOR, UntypedFormGroup, Validators, NG_VALIDATORS, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i3$1 from '@ng-select/ng-select';
 import { NgSelectComponent, SELECTION_MODEL_FACTORY, NgSelectModule } from '@ng-select/ng-select';
@@ -41,7 +41,7 @@ import { ApolloLink as ApolloLink$1 } from '@apollo/client/link/core';
 import createUploadLink from 'apollo-upload-client/createUploadLink.mjs';
 import { omit } from '@vendure/common/lib/omit';
 import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
-import * as i4$1 from '@angular/cdk/drag-drop';
+import * as i4$2 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import dayjs from 'dayjs';
 import * as i2$1 from 'ngx-pagination';
@@ -59,10 +59,10 @@ import { addColumnBefore, addColumnAfter, addRowBefore, addRowAfter, mergeCells,
 import { EditorView } from 'prosemirror-view';
 import { wrappingInputRule, textblockTypeInputRule, smartQuotes, ellipsis, emDash, inputRules, undoInputRule } from 'prosemirror-inputrules';
 import { MenuItem, DropdownSubmenu, icons, wrapItem, blockTypeItem, Dropdown, joinUpItem, liftItem, selectParentNodeItem, menuBar } from 'prosemirror-menu';
+import { unique } from '@vendure/common/lib/unique';
 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';
 
@@ -2995,7 +2995,7 @@ class CollectionDataService {
     previewCollectionVariants(input, options) {
         return this.baseDataService.query(PREVIEW_COLLECTION_CONTENTS, { input, options });
     }
-    getCollectionContents(id, take = 10, skip = 0, filterTerm) {
+    getCollectionContents(id, take = 10, skip = 0, filterTerm, options = {}) {
         const filter = filterTerm
             ? { name: { contains: filterTerm } }
             : undefined;
@@ -3006,7 +3006,7 @@ class CollectionDataService {
                 take,
                 filter,
             },
-        });
+        }, 'cache-and-network', options);
     }
     assignCollectionsToChannel(input) {
         return this.baseDataService.mutate(ASSIGN_COLLECTIONS_TO_CHANNEL, {
@@ -5259,7 +5259,9 @@ class ProductDataService {
                     createdAt: SortOrder.DESC,
                 },
             },
-        });
+        }, undefined, 
+        // By default do not load custom fields in the list view
+        { includeCustomFields: [] });
     }
     getAsset(id) {
         return this.baseDataService.query(GET_ASSET, {
@@ -5846,6 +5848,107 @@ class ShippingMethodDataService {
     }
 }
 
+/**
+ * Given a GraphQL AST (DocumentNode), this function looks for fragment definitions and adds and configured
+ * custom fields to those fragments.
+ */
+function addCustomFields(documentNode, customFields, includeCustomFields) {
+    const clone = JSON.parse(JSON.stringify(documentNode));
+    const fragmentDefs = clone.definitions.filter(isFragmentDefinition);
+    for (const fragmentDef of fragmentDefs) {
+        let entityType = fragmentDef.typeCondition.name.value;
+        if (entityType === 'OrderAddress') {
+            // OrderAddress is a special case of the Address entity, and shares its custom fields
+            // so we treat it as an alias
+            entityType = 'Address';
+        }
+        if (entityType === 'Country') {
+            // Country is an alias of Region
+            entityType = 'Region';
+        }
+        const customFieldsForType = customFields.get(entityType);
+        if (customFieldsForType && customFieldsForType.length) {
+            // Check if there is already a customFields field in the fragment
+            // to avoid duplication
+            const existingCustomFieldsField = fragmentDef.selectionSet.selections.find(selection => isFieldNode(selection) && selection.name.value === 'customFields');
+            const selectionNodes = customFieldsForType
+                .filter(field => !includeCustomFields || includeCustomFields.includes(field.name))
+                .map(customField => ({
+                kind: Kind.FIELD,
+                name: {
+                    kind: Kind.NAME,
+                    value: customField.name,
+                },
+                // For "relation" custom fields, we need to also select
+                // all the scalar fields of the related type
+                ...(customField.type === 'relation'
+                    ? {
+                        selectionSet: {
+                            kind: Kind.SELECTION_SET,
+                            selections: customField.scalarFields.map(f => ({
+                                kind: Kind.FIELD,
+                                name: { kind: Kind.NAME, value: f },
+                            })),
+                        },
+                    }
+                    : {}),
+            }));
+            if (!existingCustomFieldsField) {
+                // If no customFields field exists, add one
+                fragmentDef.selectionSet.selections.push({
+                    kind: Kind.FIELD,
+                    name: {
+                        kind: Kind.NAME,
+                        value: 'customFields',
+                    },
+                    selectionSet: {
+                        kind: Kind.SELECTION_SET,
+                        selections: selectionNodes,
+                    },
+                });
+            }
+            else {
+                // If a customFields field already exists, add the custom fields
+                // to the existing selection set
+                existingCustomFieldsField.selectionSet = {
+                    kind: Kind.SELECTION_SET,
+                    selections: selectionNodes,
+                };
+            }
+            const localizedFields = customFieldsForType.filter(field => field.type === 'localeString' || field.type === 'localeText');
+            const translationsField = fragmentDef.selectionSet.selections
+                .filter(isFieldNode)
+                .find(field => field.name.value === 'translations');
+            if (localizedFields.length && translationsField && translationsField.selectionSet) {
+                translationsField.selectionSet.selections.push({
+                    name: {
+                        kind: Kind.NAME,
+                        value: 'customFields',
+                    },
+                    kind: Kind.FIELD,
+                    selectionSet: {
+                        kind: Kind.SELECTION_SET,
+                        selections: localizedFields.map(customField => ({
+                            kind: Kind.FIELD,
+                            name: {
+                                kind: Kind.NAME,
+                                value: customField.name,
+                            },
+                        })),
+                    },
+                });
+            }
+        }
+    }
+    return clone;
+}
+function isFragmentDefinition(value) {
+    return value.kind === Kind.FRAGMENT_DEFINITION;
+}
+function isFieldNode(value) {
+    return value.kind === Kind.FIELD;
+}
+
 /**
  * @description
  * This class wraps the Apollo Angular QueryRef object and exposes some getters
@@ -5855,11 +5958,27 @@ class ShippingMethodDataService {
  * @docsPage DataService
  */
 class QueryResult {
-    constructor(queryRef, apollo) {
+    constructor(queryRef, apollo, customFieldMap) {
         this.queryRef = queryRef;
         this.apollo = apollo;
+        this.customFieldMap = customFieldMap;
+        /**
+         * Causes any subscriptions to the QueryRef to complete, via the use
+         * of the `takeUntil` operator.
+         */
         this.completed$ = new Subject();
-        this.valueChanges = queryRef.valueChanges;
+        /**
+         * This Subject is used to emit new values from the QueryRef.valueChanges Observable.
+         * We use this rather than directly subscribing to the QueryRef.valueChanges Observable
+         * so that we are able to change the QueryRef and re-subscribe when necessary.
+         */
+        this.valueChangeSubject = new Subject();
+        /**
+         * We keep track of the QueryRefs which have been subscribed to so that we can avoid
+         * re-subscribing to the same QueryRef multiple times.
+         */
+        this.queryRefSubscribed = new WeakMap();
+        this.lastQuery = queryRef.options.query;
     }
     /**
      * @description
@@ -5871,12 +5990,40 @@ class QueryResult {
         }).valueChanges;
         const activeChannelId$ = userStatus$.pipe(map(data => data.data.userStatus.activeChannelId), filter(notNullOrUndefined), distinctUntilChanged(), skip(1), takeUntil(this.completed$));
         const loggedOut$ = userStatus$.pipe(map(data => data.data.userStatus.isLoggedIn), distinctUntilChanged(), skip(1), filter(isLoggedIn => !isLoggedIn), takeUntil(this.completed$));
-        this.valueChanges = merge(activeChannelId$, this.queryRef.valueChanges).pipe(tap(val => {
+        merge(activeChannelId$, this.valueChangeSubject)
+            .pipe(takeUntil(loggedOut$), takeUntil(this.completed$))
+            .subscribe(val => {
             if (typeof val === 'string') {
                 new Promise(resolve => setTimeout(resolve, 50)).then(() => this.queryRef.refetch());
             }
-        }), filter(val => typeof val !== 'string'), takeUntil(loggedOut$), takeUntil(this.completed$));
-        this.queryRef.valueChanges = this.valueChanges;
+        });
+        return this;
+    }
+    /**
+     * @description
+     * Re-fetch this query whenever the custom fields change, updating the query to include the
+     * specified custom fields.
+     *
+     * @since 3.0.4
+     */
+    refetchOnCustomFieldsChange(customFieldsToInclude$) {
+        customFieldsToInclude$
+            .pipe(filter(customFields => {
+            const newQuery = addCustomFields(this.lastQuery, this.customFieldMap, customFields);
+            const hasChanged = JSON.stringify(newQuery) !== JSON.stringify(this.lastQuery);
+            return hasChanged;
+        }), takeUntil(this.completed$))
+            .subscribe(customFields => {
+            const newQuery = addCustomFields(this.lastQuery, this.customFieldMap, customFields);
+            this.lastQuery = newQuery;
+            const queryRef = this.apollo.watchQuery({
+                query: newQuery,
+                variables: this.queryRef.variables,
+                fetchPolicy: this.queryRef.options.fetchPolicy,
+            });
+            this.queryRef = queryRef;
+            this.subscribeToQueryRef(queryRef);
+        });
         return this;
     }
     /**
@@ -5884,7 +6031,7 @@ class QueryResult {
      * Returns an Observable which emits a single result and then completes.
      */
     get single$() {
-        return this.valueChanges.pipe(filter(result => result.networkStatus === NetworkStatus.ready), take(1), map(result => result.data), finalize(() => {
+        return this.currentQueryRefValueChanges.pipe(filter(result => result.networkStatus === NetworkStatus.ready), take(1), map(result => result.data), finalize(() => {
             this.completed$.next();
             this.completed$.complete();
         }));
@@ -5894,7 +6041,7 @@ class QueryResult {
      * Returns an Observable which emits until unsubscribed.
      */
     get stream$() {
-        return this.valueChanges.pipe(filter(result => result.networkStatus === NetworkStatus.ready), map(result => result.data), finalize(() => {
+        return this.currentQueryRefValueChanges.pipe(filter(result => result.networkStatus === NetworkStatus.ready), map(result => result.data), finalize(() => {
             this.completed$.next();
             this.completed$.complete();
         }));
@@ -5916,89 +6063,91 @@ class QueryResult {
     mapStream(mapFn) {
         return this.stream$.pipe(map(mapFn));
     }
+    /**
+     * @description
+     * Signals to the internal Observable subscriptions that they should complete.
+     */
+    destroy() {
+        this.completed$.next();
+        this.completed$.complete();
+    }
+    /**
+     * @description
+     * Returns an Observable which emits the current value of the QueryRef.valueChanges Observable.
+     *
+     * We wrap the valueChanges Observable in a new Observable so that we can have a lazy
+     * evaluation of the valueChanges Observable. That is, we only fire the HTTP request when
+     * the returned Observable is subscribed to.
+     */
+    get currentQueryRefValueChanges() {
+        return new Observable(subscriber => {
+            if (!this.queryRefSubscribed.get(this.queryRef)) {
+                this.subscribeToQueryRef(this.queryRef);
+                this.queryRefSubscribed.set(this.queryRef, true);
+            }
+            this.valueChangeSubject.subscribe(subscriber);
+            return () => {
+                this.queryRefSubscribed.delete(this.queryRef);
+            };
+        });
+    }
+    /**
+     * @description
+     * Subscribes to the valueChanges Observable of the given QueryRef, and stores the subscription
+     * so that it can be unsubscribed from when the QueryRef changes.
+     */
+    subscribeToQueryRef(queryRef) {
+        if (this.valueChangesSubscription) {
+            this.valueChangesSubscription.unsubscribe();
+        }
+        this.valueChangesSubscription = queryRef.valueChanges
+            .pipe(takeUntil(this.completed$))
+            .subscribe(this.valueChangeSubject);
+    }
 }
 
+const CREATE_ENTITY_REGEX = /Create([A-Za-z]+)Input/;
+const UPDATE_ENTITY_REGEX = /Update([A-Za-z]+)Input/;
 /**
- * Given a GraphQL AST (DocumentNode), this function looks for fragment definitions and adds and configured
- * custom fields to those fragments.
+ * 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 addCustomFields(documentNode, customFields) {
-    const fragmentDefs = documentNode.definitions.filter(isFragmentDefinition);
-    for (const fragmentDef of fragmentDefs) {
-        let entityType = fragmentDef.typeCondition.name.value;
-        if (entityType === 'OrderAddress') {
-            // OrderAddress is a special case of the Address entity, and shares its custom fields
-            // so we treat it as an alias
-            entityType = 'Address';
-        }
-        if (entityType === 'Country') {
-            // Country is an alias of Region
-            entityType = 'Region';
-        }
-        const customFieldsForType = customFields.get(entityType);
-        if (customFieldsForType && customFieldsForType.length) {
-            fragmentDef.selectionSet.selections.push({
-                name: {
-                    kind: Kind.NAME,
-                    value: 'customFields',
-                },
-                kind: Kind.FIELD,
-                selectionSet: {
-                    kind: Kind.SELECTION_SET,
-                    selections: customFieldsForType.map(customField => ({
-                        kind: Kind.FIELD,
-                        name: {
-                            kind: Kind.NAME,
-                            value: customField.name,
-                        },
-                        // For "relation" custom fields, we need to also select
-                        // all the scalar fields of the related type
-                        ...(customField.type === 'relation'
-                            ? {
-                                selectionSet: {
-                                    kind: Kind.SELECTION_SET,
-                                    selections: customField.scalarFields.map(f => ({
-                                        kind: Kind.FIELD,
-                                        name: { kind: Kind.NAME, value: f },
-                                    })),
-                                },
-                            }
-                            : {}),
-                    })),
-                },
-            });
-            const localizedFields = customFieldsForType.filter(field => field.type === 'localeString' || field.type === 'localeText');
-            const translationsField = fragmentDef.selectionSet.selections
-                .filter(isFieldNode)
-                .find(field => field.name.value === 'translations');
-            if (localizedFields.length && translationsField && translationsField.selectionSet) {
-                translationsField.selectionSet.selections.push({
-                    name: {
-                        kind: Kind.NAME,
-                        value: 'customFields',
-                    },
-                    kind: Kind.FIELD,
-                    selectionSet: {
-                        kind: Kind.SELECTION_SET,
-                        selections: localizedFields.map(customField => ({
-                            kind: Kind.FIELD,
-                            name: {
-                                kind: Kind.NAME,
-                                value: customField.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];
             }
         }
     }
-    return documentNode;
 }
-function isFragmentDefinition(value) {
-    return value.kind === Kind.FRAGMENT_DEFINITION;
-}
-function isFieldNode(value) {
-    return value.kind === Kind.FIELD;
+function extractInputType(type) {
+    if (type.kind === 'NonNullType') {
+        return extractInputType(type.type);
+    }
+    if (type.kind === 'ListType') {
+        return extractInputType(type.type);
+    }
+    return type;
 }
 
 /**
@@ -6076,50 +6225,6 @@ 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();
 }
@@ -6204,21 +6309,20 @@ class BaseDataService {
     /**
      * Performs a GraphQL watch query
      */
-    query(query, variables, fetchPolicy = 'cache-and-network') {
-        const withCustomFields = addCustomFields(query, this.customFields);
+    query(query, variables, fetchPolicy = 'cache-and-network', options = {}) {
         const queryRef = this.apollo.watchQuery({
-            query: withCustomFields,
+            query: addCustomFields(query, this.customFields, options.includeCustomFields),
             variables,
             fetchPolicy,
         });
-        const queryResult = new QueryResult(queryRef, this.apollo);
+        const queryResult = new QueryResult(queryRef, this.apollo, this.customFields);
         return queryResult;
     }
     /**
      * Performs a GraphQL mutation
      */
-    mutate(mutation, variables, update) {
-        const withCustomFields = addCustomFields(mutation, this.customFields);
+    mutate(mutation, variables, update, options = {}) {
+        const withCustomFields = addCustomFields(mutation, this.customFields, options.includeCustomFields);
         const withoutReadonlyFields = this.prepareCustomFields(mutation, variables);
         return this.apollo
             .mutate({
@@ -6294,8 +6398,8 @@ class DataService {
      * ).mapSingle(data => data.product);
      * ```
      */
-    query(query, variables, fetchPolicy = 'cache-and-network') {
-        return this.baseDataService.query(query, variables, fetchPolicy);
+    query(query, variables, fetchPolicy = 'cache-and-network', options = {}) {
+        return this.baseDataService.query(query, variables, fetchPolicy, options);
     }
     /**
      * @description
@@ -6314,8 +6418,8 @@ class DataService {
      * );
      * ```
      */
-    mutate(mutation, variables, update) {
-        return this.baseDataService.mutate(mutation, variables, update);
+    mutate(mutation, variables, update, options = {}) {
+        return this.baseDataService.mutate(mutation, variables, update, options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataService, deps: [{ token: BaseDataService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataService }); }
@@ -7203,9 +7307,9 @@ class Alert {
         this.hasRun$ = new BehaviorSubject(false);
         this.data$ = new BehaviorSubject(undefined);
         if (this.config.recheck) {
-            this.config.recheck(this.context).subscribe(() => this.runCheck());
+            this.subscription = this.config.recheck(this.context).subscribe(() => this.runCheck());
         }
-        this.activeAlert$ = combineLatest(this.data$, this.hasRun$).pipe(map(([data, hasRun]) => {
+        this.activeAlert$ = combineLatest([this.data$, this.hasRun$]).pipe(map(([data, hasRun]) => {
             if (!data) {
                 return;
             }
@@ -7242,6 +7346,11 @@ class Alert {
         }
         this.hasRun$.next(false);
     }
+    destroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
 }
 class AlertsService {
     constructor(permissionsService, injector, dataService, notificationService, modalService) {
@@ -7283,6 +7392,11 @@ class AlertsService {
             this.alertsMap.forEach(config => config.runCheck());
         }
     }
+    clearAlerts() {
+        this.alertsMap.forEach(alert => alert.destroy());
+        this.alertsMap.clear();
+        this.configUpdated.next();
+    }
     createContext() {
         return {
             injector: this.injector,
@@ -7626,7 +7740,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 = '3.1.0-next.1';
+const ADMIN_UI_VERSION = '3.1.0-next.3';
 
 /* eslint-disable @angular-eslint/directive-selector */
 class FormFieldControlDirective {
@@ -7649,13 +7763,13 @@ class FormFieldControlDirective {
             input.readOnly = value;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormFieldControlDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormFieldControlDirective, deps: [{ token: i0.ElementRef }, { token: i4$1.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormFieldControlDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'input, textarea, select, vdr-currency-input' }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$4.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i4$1.NgControl, decorators: [{
                     type: Optional
                 }] }] });
 function isSelectElement(value) {
@@ -7776,7 +7890,7 @@ class LocaleBasePipe {
         // and the first region discarded. This would only ever be an issue for
         // those languages where the translation file itself encodes the region,
         // as in pt_BR & pt_PT.
-        const matches = hyphenated?.match(/^([a-zA-Z_-]+)(-[A-Z][A-Z])(-[A-Z][A-z])$/);
+        const matches = hyphenated?.match(/^([a-zA-Z_-]+)(-[A-Z][A-Z])(-[A-Z][A-Z])$/);
         if (matches?.length) {
             const overriddenLocale = matches[1] + matches[3];
             return overriddenLocale;
@@ -8174,7 +8288,7 @@ class UiLanguageSwitcherDialogComponent {
         return [languageCode, region.toUpperCase()].join('-');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: UiLanguageSwitcherDialogComponent, deps: [{ token: DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: UiLanguageSwitcherDialogComponent, selector: "vdr-ui-language-switcher", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'common.select-display-language' | translate }}</ng-template>\r\n\r\n<ng-container *ngIf=\"isLoading\">\r\n    <div class=\"progress loop\"></div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"flex pl-2 mb-2\">\r\n            <vdr-form-field [label]=\"'common.language' | translate\" class=\"mr-2\">\r\n                <select name=\"options\" [(ngModel)]=\"currentLanguage\" (ngModelChange)=\"updatePreviewLocale()\">\r\n                    <option *ngFor=\"let code of availableLanguages | sort\" [value]=\"code\">\r\n                        {{ code | uppercase }} ({{ code | localeLanguageName }})\r\n                    </option>\r\n                </select>\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'common.locale' | translate\">\r\n                <ng-select appendTo=\"body\" [items]=\"availableLocales\" [(ngModel)]=\"currentLocale\"\r\n                    (ngModelChange)=\"updatePreviewLocale()\" [placeholder]=\"'common.browser-default' | translate\">\r\n                    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                        {{ item }} ({{ item | localeRegionName }})\r\n                    </ng-template>\r\n                    <ng-template ng-option-tmp let-item=\"item\">\r\n                        {{ item }} ({{ item | localeRegionName }})\r\n                    </ng-template>\r\n                </ng-select>\r\n            </vdr-form-field>\r\n        </div>\r\n    </div>\r\n    <div class=\"card\">\r\n        <div class=\"card-header\">\r\n            <span class=\"pr-1\">{{ 'common.sample-formatting' | translate }}:</span><strong>{{ previewLocale |\r\n                localeLanguageName : previewLocale }}</strong>\r\n        </div>\r\n        <div class=\"card-block\">\r\n            <div class=\"clr-row\">\r\n                <div class=\"clr-col-sm-4\">\r\n                    <vdr-labeled-data [label]=\"'common.medium-date' | translate\">\r\n                        {{ now | localeDate : 'medium' : previewLocale }}\r\n                    </vdr-labeled-data>\r\n                    <vdr-labeled-data [label]=\"'common.short-date' | translate\">\r\n                        {{ now | localeDate : 'short' : previewLocale }}\r\n                    </vdr-labeled-data>\r\n                </div>\r\n                <div class=\"clr-col-sm-4\">\r\n                    <select name=\"currency\" class=\"currency\" [(ngModel)]=\"selectedCurrencyCode\">\r\n                        <option *ngFor=\"let code of availableCurrencyCodes | sort\" [value]=\"code\">\r\n                            {{ code | uppercase }} ({{ code | localeCurrencyName : 'full' : previewLocale }})\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n                <div class=\"clr-col-sm-4\">\r\n                    <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                        {{ 12345 | localeCurrency : selectedCurrencyCode : previewLocale }}\r\n                    </vdr-labeled-data>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"setLanguage()\" class=\"btn btn-primary\">\r\n        {{ 'common.set-language' | translate }}\r\n    </button>\r\n</ng-template>", styles: ["select.currency{max-width:200px}input.locale{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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: "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: "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: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleCurrencyNamePipe, name: "localeCurrencyName" }, { kind: "pipe", type: SortPipe, name: "sort" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: LocaleCurrencyPipe, name: "localeCurrency" }, { kind: "pipe", type: LocaleLanguageNamePipe, name: "localeLanguageName" }, { kind: "pipe", type: LocaleRegionNamePipe, name: "localeRegionName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: UiLanguageSwitcherDialogComponent, selector: "vdr-ui-language-switcher", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'common.select-display-language' | translate }}</ng-template>\r\n\r\n<ng-container *ngIf=\"isLoading\">\r\n    <div class=\"progress loop\"></div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"flex pl-2 mb-2\">\r\n            <vdr-form-field [label]=\"'common.language' | translate\" class=\"mr-2\">\r\n                <select name=\"options\" [(ngModel)]=\"currentLanguage\" (ngModelChange)=\"updatePreviewLocale()\">\r\n                    <option *ngFor=\"let code of availableLanguages | sort\" [value]=\"code\">\r\n                        {{ code | uppercase }} ({{ code | localeLanguageName }})\r\n                    </option>\r\n                </select>\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'common.locale' | translate\">\r\n                <ng-select appendTo=\"body\" [items]=\"availableLocales\" [(ngModel)]=\"currentLocale\"\r\n                    (ngModelChange)=\"updatePreviewLocale()\" [placeholder]=\"'common.browser-default' | translate\">\r\n                    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                        {{ item }} ({{ item | localeRegionName }})\r\n                    </ng-template>\r\n                    <ng-template ng-option-tmp let-item=\"item\">\r\n                        {{ item }} ({{ item | localeRegionName }})\r\n                    </ng-template>\r\n                </ng-select>\r\n            </vdr-form-field>\r\n        </div>\r\n    </div>\r\n    <div class=\"card\">\r\n        <div class=\"card-header\">\r\n            <span class=\"pr-1\">{{ 'common.sample-formatting' | translate }}:</span><strong>{{ previewLocale |\r\n                localeLanguageName : previewLocale }}</strong>\r\n        </div>\r\n        <div class=\"card-block\">\r\n            <div class=\"clr-row\">\r\n                <div class=\"clr-col-sm-4\">\r\n                    <vdr-labeled-data [label]=\"'common.medium-date' | translate\">\r\n                        {{ now | localeDate : 'medium' : previewLocale }}\r\n                    </vdr-labeled-data>\r\n                    <vdr-labeled-data [label]=\"'common.short-date' | translate\">\r\n                        {{ now | localeDate : 'short' : previewLocale }}\r\n                    </vdr-labeled-data>\r\n                </div>\r\n                <div class=\"clr-col-sm-4\">\r\n                    <select name=\"currency\" class=\"currency\" [(ngModel)]=\"selectedCurrencyCode\">\r\n                        <option *ngFor=\"let code of availableCurrencyCodes | sort\" [value]=\"code\">\r\n                            {{ code | uppercase }} ({{ code | localeCurrencyName : 'full' : previewLocale }})\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n                <div class=\"clr-col-sm-4\">\r\n                    <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                        {{ 12345 | localeCurrency : selectedCurrencyCode : previewLocale }}\r\n                    </vdr-labeled-data>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"setLanguage()\" class=\"btn btn-primary\">\r\n        {{ 'common.set-language' | translate }}\r\n    </button>\r\n</ng-template>", styles: ["select.currency{max-width:200px}input.locale{text-transform:uppercase}\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: i4$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.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: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { 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: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleCurrencyNamePipe, name: "localeCurrencyName" }, { kind: "pipe", type: SortPipe, name: "sort" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: LocaleCurrencyPipe, name: "localeCurrency" }, { kind: "pipe", type: LocaleLanguageNamePipe, name: "localeLanguageName" }, { kind: "pipe", type: LocaleRegionNamePipe, name: "localeRegionName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: UiLanguageSwitcherDialogComponent, decorators: [{
             type: Component,
@@ -8185,11 +8299,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
  * This service handles logic relating to authentication of the current user.
  */
 class AuthService {
-    constructor(localStorageService, dataService, serverConfigService, permissionsService) {
+    constructor(localStorageService, dataService, serverConfigService, permissionsService, alertService) {
         this.localStorageService = localStorageService;
         this.dataService = dataService;
         this.serverConfigService = serverConfigService;
         this.permissionsService = permissionsService;
+        this.alertService = alertService;
     }
     /**
      * Attempts to log in via the REST login endpoint and updates the app
@@ -8232,7 +8347,9 @@ class AuthService {
             else {
                 return [];
             }
-        }), mapTo(true));
+        }), tap(() => {
+            this.alertService.clearAlerts();
+        }), map(() => true));
     }
     /**
      * Checks the app state to see if the user is already logged in,
@@ -8270,7 +8387,7 @@ class AuthService {
                     return of(false);
                 }
             }));
-        }), mapTo(true), catchError(err => of(false)));
+        }), map(() => true), catchError(err => of(false)));
     }
     getActiveChannel(userChannels) {
         const lastActiveChannelToken = this.localStorageService.get('activeChannelToken');
@@ -8286,7 +8403,7 @@ class AuthService {
     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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AuthService, deps: [{ token: LocalStorageService }, { token: DataService }, { token: ServerConfigService }, { token: PermissionsService }, { token: AlertsService }], 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: [{
@@ -8294,7 +8411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: LocalStorageService }, { type: DataService }, { type: ServerConfigService }, { type: PermissionsService }] });
+        }], ctorParameters: () => [{ type: LocalStorageService }, { type: DataService }, { type: ServerConfigService }, { type: PermissionsService }, { type: AlertsService }] });
 
 class BreadcrumbService {
     constructor(router, route, dataService) {
@@ -8763,7 +8880,7 @@ class HealthCheckService {
     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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HealthCheckService, deps: [{ token: i1$4.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: [{
@@ -8771,7 +8888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$5.HttpClient }] });
+        }], ctorParameters: () => [{ type: i1$4.HttpClient }] });
 
 class JobQueueService {
     constructor(dataService) {
@@ -9492,7 +9609,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$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 }); }
+    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: i4$1.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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.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,
@@ -9569,11 +9686,11 @@ 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$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" }] }); }
+    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                    />\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,
-            args: [{ selector: 'vdr-app-shell', template: "<div class=\"app-container\" [dir]=\"direction$ | async\">\r\n    <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"\r\n                ><img src=\"assets/logo-top.webp\" class=\"logo\" style=\"max-width: 100px\"\r\n            /></a>\r\n            <div class=\"collapse-menu\">\r\n                <button class=\"\" (click)=\"collapseNav()\">\r\n                    <clr-icon shape=\"window-close\" size=\"24\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <div class=\"mx-4\">\r\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n        </div>\r\n        <div class=\"main-nav-container\">\r\n            <vdr-main-nav (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"settings-nav-container\">\r\n            <hr />\r\n            <vdr-main-nav displayMode=\"settings\" (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"mx-2 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"] }]
+            args: [{ selector: 'vdr-app-shell', template: "<div class=\"app-container\" [dir]=\"direction$ | async\">\r\n    <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"\r\n                ><img src=\"assets/logo-top.webp\" class=\"logo\" style=\"max-width: 100px\"\r\n            /></a>\r\n            <div class=\"collapse-menu\">\r\n                <button class=\"\" (click)=\"collapseNav()\">\r\n                    <clr-icon shape=\"window-close\" size=\"24\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <div class=\"mx-4\">\r\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n        </div>\r\n        <div class=\"main-nav-container\">\r\n            <vdr-main-nav (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"settings-nav-container\">\r\n            <hr />\r\n            <vdr-main-nav displayMode=\"settings\" (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"mx-2 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                    />\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"] }]
         }], ctorParameters: () => [{ type: AuthService }, { type: DataService }, { type: i1$1.Router }, { type: I18nService }, { type: ModalService }, { type: LocalStorageService }, { type: BreadcrumbService }, { type: LocalizationService }] });
 
 class SettingsNavComponent extends BaseNavComponent {
@@ -10153,12 +10270,12 @@ class FetchAdapter {
             }));
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FetchAdapter, deps: [{ token: i1$5.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FetchAdapter, deps: [{ token: i1$4.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FetchAdapter }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FetchAdapter, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$5.HttpClient }] });
+        }], ctorParameters: () => [{ type: i1$4.HttpClient }] });
 
 const AUTH_REDIRECT_PARAM = 'redirectTo';
 /**
@@ -10592,7 +10709,7 @@ class DisabledDirective {
         this.formControlName = formControlName;
         this.formControl = formControl;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DisabledDirective, deps: [{ token: i1$4.FormControlName, optional: true }, { token: i1$4.FormControlDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DisabledDirective, deps: [{ token: i4$1.FormControlName, optional: true }, { token: i4$1.FormControlDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: DisabledDirective, selector: "[vdrDisabled]", inputs: { disabled: ["vdrDisabled", "disabled"] }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DisabledDirective, decorators: [{
@@ -10600,9 +10717,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
             args: [{
                     selector: '[vdrDisabled]',
                 }]
-        }], ctorParameters: () => [{ type: i1$4.FormControlName, decorators: [{
+        }], ctorParameters: () => [{ type: i4$1.FormControlName, decorators: [{
                     type: Optional
-                }] }, { type: i1$4.FormControlDirective, decorators: [{
+                }] }, { type: i4$1.FormControlDirective, decorators: [{
                     type: Optional
                 }] }], propDecorators: { disabled: [{
                 type: Input,
@@ -10619,7 +10736,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$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 }); }
+    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: i4$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.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,
@@ -11208,7 +11325,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$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 }); }
+        ], 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$2.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$2.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$2.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,
@@ -11376,7 +11493,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$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 }); }
+        ], 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: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.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,
@@ -11622,7 +11739,7 @@ class CurrencyFormInputComponent {
             .mapStream(data => data.activeChannel.defaultCurrencyCode);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CurrencyFormInputComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CurrencyFormInputComponent, selector: "vdr-currency-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<vdr-currency-input\r\n    [formControl]=\"formControl\"\r\n    [readonly]=\"readonly\"\r\n    [currencyCode]=\"currencyCode$ | async\"\r\n></vdr-currency-input>\r\n", styles: [""], dependencies: [{ 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: CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { 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: CurrencyFormInputComponent, selector: "vdr-currency-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<vdr-currency-input\r\n    [formControl]=\"formControl\"\r\n    [readonly]=\"readonly\"\r\n    [currencyCode]=\"currencyCode$ | async\"\r\n></vdr-currency-input>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CurrencyFormInputComponent, decorators: [{
             type: Component,
@@ -11703,7 +11820,7 @@ class CustomerGroupFormInputComponent {
         return id1 === id2;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CustomerGroupFormInputComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CustomerGroupFormInputComponent, selector: "vdr-customer-group-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<ng-select\r\n    [items]=\"customerGroups$ | async\"\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    bindValue=\"id\"\r\n    [compareWith]=\"compareWith\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"false\"\r\n    [ngModel]=\"formControl.value\"\r\n    (change)=\"selectGroup($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$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: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CustomerGroupFormInputComponent, selector: "vdr-customer-group-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<ng-select\r\n    [items]=\"customerGroups$ | async\"\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    bindValue=\"id\"\r\n    [compareWith]=\"compareWith\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"false\"\r\n    [ngModel]=\"formControl.value\"\r\n    (change)=\"selectGroup($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.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: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CustomerGroupFormInputComponent, decorators: [{
             type: Component,
@@ -12100,7 +12217,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$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 }); }
+        ], 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: i4$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.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: i4$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.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,
@@ -12154,7 +12271,7 @@ class DateFormInputComponent {
         return this.config.ui?.yearRange || this.config.yearRange;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DateFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DateFormInputComponent, selector: "vdr-date-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<vdr-datetime-picker\r\n    [formControl]=\"formControl\"\r\n    [min]=\"min\"\r\n    [max]=\"max\"\r\n    [yearRange]=\"yearRange\"\r\n    [readonly]=\"readonly\"\r\n>\r\n</vdr-datetime-picker>\r\n", styles: [""], dependencies: [{ 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: DatetimePickerComponent, selector: "vdr-datetime-picker", inputs: ["yearRange", "weekStartDay", "timeGranularityInterval", "min", "max", "readonly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DateFormInputComponent, selector: "vdr-date-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<vdr-datetime-picker\r\n    [formControl]=\"formControl\"\r\n    [min]=\"min\"\r\n    [max]=\"max\"\r\n    [yearRange]=\"yearRange\"\r\n    [readonly]=\"readonly\"\r\n>\r\n</vdr-datetime-picker>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DatetimePickerComponent, selector: "vdr-datetime-picker", inputs: ["yearRange", "weekStartDay", "timeGranularityInterval", "min", "max", "readonly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DateFormInputComponent, decorators: [{
             type: Component,
@@ -12300,7 +12417,7 @@ class FacetValueSelectorComponent {
                 useExisting: FacetValueSelectorComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true }], ngImport: i0, template: "<ng-select\r\n    [items]=\"searchResults$ | async\"\r\n    [addTag]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [loading]=\"searchLoading\"\r\n    [typeahead]=\"searchInput$\"\r\n    multiple=\"true\"\r\n    appendTo=\"body\"\r\n    bindLabel=\"id\"\r\n    [disabled]=\"disabled || readonly\"\r\n    [ngModel]=\"value\"\r\n    (change)=\"onChange($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <vdr-facet-value-chip\r\n            *ngIf=\"item; else facetNotFound\"\r\n            [facetValue]=\"item\"\r\n            [removable]=\"!readonly\"\r\n            (remove)=\"clear(item)\"\r\n        ></vdr-facet-value-chip>\r\n        <ng-template #facetNotFound>\r\n            <vdr-chip colorType=\"error\" icon=\"times\" (iconClick)=\"clear(item)\">{{\r\n                'catalog.facet-value-not-available' | translate: { id: item.id }\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-facet-value-chip [facetValue]=\"item\" [removable]=\"false\"></vdr-facet-value-chip>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [""], dependencies: [{ 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.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: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true }], ngImport: i0, template: "<ng-select\r\n    [items]=\"searchResults$ | async\"\r\n    [addTag]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [loading]=\"searchLoading\"\r\n    [typeahead]=\"searchInput$\"\r\n    multiple=\"true\"\r\n    appendTo=\"body\"\r\n    bindLabel=\"id\"\r\n    [disabled]=\"disabled || readonly\"\r\n    [ngModel]=\"value\"\r\n    (change)=\"onChange($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <vdr-facet-value-chip\r\n            *ngIf=\"item; else facetNotFound\"\r\n            [facetValue]=\"item\"\r\n            [removable]=\"!readonly\"\r\n            (remove)=\"clear(item)\"\r\n        ></vdr-facet-value-chip>\r\n        <ng-template #facetNotFound>\r\n            <vdr-chip colorType=\"error\" icon=\"times\" (iconClick)=\"clear(item)\">{{\r\n                'catalog.facet-value-not-available' | translate: { id: item.id }\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-facet-value-chip [facetValue]=\"item\" [removable]=\"false\"></vdr-facet-value-chip>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.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: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { 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: FacetValueSelectorComponent, decorators: [{
             type: Component,
@@ -12345,7 +12462,7 @@ class FacetValueFormInputComponent {
     }
     static { this.id = 'facet-value-form-input'; }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FacetValueFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FacetValueFormInputComponent, selector: "vdr-facet-value-form-input", ngImport: i0, template: "<vdr-facet-value-selector\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n    [transformControlValueAccessorValue]=\"valueTransformFn\"\r\n></vdr-facet-value-selector>\r\n", styles: [""], dependencies: [{ 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: FacetValueSelectorComponent, selector: "vdr-facet-value-selector", inputs: ["readonly", "transformControlValueAccessorValue"], outputs: ["selectedValuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FacetValueFormInputComponent, selector: "vdr-facet-value-form-input", ngImport: i0, template: "<vdr-facet-value-selector\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n    [transformControlValueAccessorValue]=\"valueTransformFn\"\r\n></vdr-facet-value-selector>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FacetValueSelectorComponent, selector: "vdr-facet-value-selector", inputs: ["readonly", "transformControlValueAccessorValue"], outputs: ["selectedValuesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FacetValueFormInputComponent, decorators: [{
             type: Component,
@@ -12377,7 +12494,7 @@ class NumberFormInputComponent {
         return this.config.ui?.step || this.config.step;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NumberFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: NumberFormInputComponent, selector: "vdr-number-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<vdr-affixed-input\r\n    [suffix]=\"suffix\"\r\n    [prefix]=\"prefix\"\r\n>\r\n    <input\r\n        type=\"number\"\r\n        [readonly]=\"readonly\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        [step]=\"step\"\r\n        [formControl]=\"formControl\"\r\n    />\r\n</vdr-affixed-input>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: NumberFormInputComponent, selector: "vdr-number-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<vdr-affixed-input\r\n    [suffix]=\"suffix\"\r\n    [prefix]=\"prefix\"\r\n>\r\n    <input\r\n        type=\"number\"\r\n        [readonly]=\"readonly\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        [step]=\"step\"\r\n        [formControl]=\"formControl\"\r\n    />\r\n</vdr-affixed-input>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.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: i4$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NumberFormInputComponent, decorators: [{
             type: Component,
@@ -12396,7 +12513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
 class PasswordFormInputComponent {
     static { this.id = 'password-form-input'; }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PasswordFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PasswordFormInputComponent, selector: "vdr-password-form-input", ngImport: i0, template: "<input\r\n    type=\"password\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n/>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PasswordFormInputComponent, selector: "vdr-password-form-input", ngImport: i0, template: "<input\r\n    type=\"password\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n/>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PasswordFormInputComponent, decorators: [{
             type: Component,
@@ -13293,7 +13410,7 @@ class FocalPointControlComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FocalPointControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: { visible: "visible", editable: "editable", width: "width", height: "height", fpx: "fpx", fpy: "fpy" }, outputs: { focalPointChange: "focalPointChange" }, host: { properties: { "style.width.px": "this.width", "style.height.px": "this.height" } }, viewQueries: [{ propertyName: "frame", first: true, predicate: ["frame"], descendants: true, static: true }, { propertyName: "dot", first: true, predicate: ["dot"], descendants: true, static: true }], ngImport: i0, template: "<ng-content></ng-content>\r\n<div class=\"frame\" #frame [style.width.px]=\"width\" [style.height.px]=\"height\">\r\n    <div\r\n        #dot\r\n        class=\"dot\"\r\n        [class.visible]=\"visible\"\r\n        [class.editable]=\"editable\"\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"!editable\"\r\n        cdkDragBoundary=\".frame\"\r\n        (cdkDragEnded)=\"onDragEnded($event)\"\r\n        [cdkDragFreeDragPosition]=\"initialPosition\"\r\n    ></div>\r\n</div>\r\n", styles: [":host{position:relative;display:block}.frame{position:absolute;top:0}.dot{width:20px;height:20px;border-radius:50%;border:2px solid white;position:absolute;visibility:hidden;transition:opacity .3s;box-shadow:0 0 4px 4px #0000006b}.dot.visible{visibility:visible;opacity:.7}.dot.editable{cursor:move;visibility:visible;opacity:1;animation:pulse;animation-duration:.5s;animation-iteration-count:4}@keyframes pulse{0%{border-color:#fff}50%{border-color:var(--color-warning-500)}to{border-color:#fff}}\n"], dependencies: [{ kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: { visible: "visible", editable: "editable", width: "width", height: "height", fpx: "fpx", fpy: "fpy" }, outputs: { focalPointChange: "focalPointChange" }, host: { properties: { "style.width.px": "this.width", "style.height.px": "this.height" } }, viewQueries: [{ propertyName: "frame", first: true, predicate: ["frame"], descendants: true, static: true }, { propertyName: "dot", first: true, predicate: ["dot"], descendants: true, static: true }], ngImport: i0, template: "<ng-content></ng-content>\r\n<div class=\"frame\" #frame [style.width.px]=\"width\" [style.height.px]=\"height\">\r\n    <div\r\n        #dot\r\n        class=\"dot\"\r\n        [class.visible]=\"visible\"\r\n        [class.editable]=\"editable\"\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"!editable\"\r\n        cdkDragBoundary=\".frame\"\r\n        (cdkDragEnded)=\"onDragEnded($event)\"\r\n        [cdkDragFreeDragPosition]=\"initialPosition\"\r\n    ></div>\r\n</div>\r\n", styles: [":host{position:relative;display:block}.frame{position:absolute;top:0}.dot{width:20px;height:20px;border-radius:50%;border:2px solid white;position:absolute;visibility:hidden;transition:opacity .3s;box-shadow:0 0 4px 4px #0000006b}.dot.visible{visibility:visible;opacity:.7}.dot.editable{cursor:move;visibility:visible;opacity:1;animation:pulse;animation-duration:.5s;animation-iteration-count:4}@keyframes pulse{0%{border-color:#fff}50%{border-color:var(--color-warning-500)}to{border-color:#fff}}\n"], dependencies: [{ kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FocalPointControlComponent, decorators: [{
             type: Component,
@@ -13362,7 +13479,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$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 }); }
+        ], 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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.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,
@@ -13532,7 +13649,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$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" }] }); }
+    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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.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,
@@ -13616,9 +13733,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 type: Input
             }] } });
 
+const ASSET_SIZES = ['tiny', 'thumb', 'small', 'medium', 'large', 'full'];
 class AssetPreviewLinksComponent {
     constructor() {
-        this.sizes = ['tiny', 'thumb', 'small', 'medium', 'large', 'full'];
+        this.sizes = ASSET_SIZES;
     }
     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$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 }); }
@@ -13960,13 +14078,13 @@ class AssetPreviewComponent {
         this.disableNextButton = this.assets?.[this.previewAssetIndex + 1]?.id ? false : true;
         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$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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AssetPreviewComponent, deps: [{ token: i4$1.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$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$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.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: i4$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.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,
             args: [{ selector: 'vdr-asset-preview', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
-        }], ctorParameters: () => [{ type: i1$4.FormBuilder }, { type: DataService }, { type: NotificationService }, { type: i0.ChangeDetectorRef }, { type: ModalService }], propDecorators: { asset: [{
+        }], ctorParameters: () => [{ type: i4$1.FormBuilder }, { type: DataService }, { type: NotificationService }, { type: i0.ChangeDetectorRef }, { type: ModalService }], propDecorators: { asset: [{
                 type: Input
             }], assets: [{
                 type: Input
@@ -14655,7 +14773,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$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 }); }
+    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: i4$1.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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.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,
@@ -15003,14 +15121,29 @@ function buildKeymap(schema, mapKeys) {
 }
 
 class ExternalImageDialogComponent {
-    constructor() {
+    constructor(modalService, changeDetector) {
+        this.modalService = modalService;
+        this.changeDetector = changeDetector;
+        this.assets = [];
+        // eslint-disable-next-line @angular-eslint/no-output-native
+        this.change = new EventEmitter();
         this.previewLoaded = false;
+        this.sizes = ASSET_SIZES;
+        this.preset = '';
     }
     ngOnInit() {
+        const initialSrc = this.existing?.src ? this.existing.src : '';
+        if (initialSrc) {
+            const url = new URL(initialSrc);
+            this.preset = url.searchParams.get('preset') || '';
+        }
         this.form = new UntypedFormGroup({
             src: new UntypedFormControl(this.existing ? this.existing.src : '', Validators.required),
             title: new UntypedFormControl(this.existing ? this.existing.title : ''),
             alt: new UntypedFormControl(this.existing ? this.existing.alt : ''),
+            width: new UntypedFormControl(this.existing ? this.existing.width : ''),
+            height: new UntypedFormControl(this.existing ? this.existing.height : ''),
+            dataExternal: new UntypedFormControl(this.existing ? this.existing.dataExternal : true),
         });
     }
     select() {
@@ -15022,13 +15155,55 @@ class ExternalImageDialogComponent {
     onImageError(event) {
         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$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 }); }
+    selectAssets() {
+        this.modalService
+            .fromComponent(AssetPickerDialogComponent, {
+            size: 'xl',
+            locals: {
+                multiSelect: false,
+            },
+        })
+            .subscribe(result => {
+            if (result && result.length) {
+                this.assets = unique(this.assets.concat(result), 'id');
+                this.form.patchValue({
+                    src: result[0].source,
+                    dataExternal: false,
+                });
+                this.form.get('src')?.disable();
+                this.emitChangeEvent(this.assets);
+                this.changeDetector.markForCheck();
+            }
+        });
+    }
+    emitChangeEvent(assets) {
+        this.change.emit({
+            assets,
+        });
+    }
+    onSizeSelect(size) {
+        const url = this.form.get('src')?.value.split('?')[0];
+        const src = `${url}?preset=${size}`;
+        this.form.patchValue({
+            src,
+            width: this.form.get('width')?.value,
+            height: this.form.get('height')?.value,
+        });
+    }
+    removeImage() {
+        this.form.get('src')?.setValue('');
+        this.form.get('src')?.enable();
+        this.form.get('dataExternal')?.setValue(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ExternalImageDialogComponent, deps: [{ token: ModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ExternalImageDialogComponent, selector: "vdr-external-image-dialog", outputs: { change: "change" }, ngImport: i0, template: "<div class=\"clr-row\">\r\n    <div class=\"clr-col-md-5 clr-row clr-justify-content-center\">\r\n        <div class=\"preview text-center clr-col-12 mt-10\">\r\n            <vdr-dropdown>\r\n                <img\r\n                    [src]=\"form.get('src')?.value\"\r\n                    [class.visible]=\"previewLoaded\"\r\n                    vdrDropdownTrigger\r\n                    (load)=\"onImageLoad($event)\"\r\n                    (error)=\"onImageError($event)\"\r\n                    class=\"img-responsive\"\r\n                />\r\n\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        vdrDropdownItem\r\n                        [title]=\"'asset.remove-asset' | translate\"\r\n                        (click)=\"removeImage()\"\r\n                    >\r\n                        <clr-icon shape=\"times\"></clr-icon>\r\n                        {{ 'asset.remove-asset' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\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 class=\"text-center clr-col-12\">\r\n            <div *ngIf=\"previewLoaded && !form.get('dataExternal')?.value\">\r\n                <select name=\"options\" (change)=\"onSizeSelect($event.target.value)\" [(ngModel)]=\"preset\">\r\n                    <option value=\"\" selected>{{ 'asset.size' | translate }}</option>\r\n                    <option *ngFor=\"let size of sizes\" [value]=\"size\">{{ size }}</option>\r\n                </select>\r\n            </div>\r\n\r\n            <button\r\n                class=\"btn btn-icon btn-sm btn-block mt-2\"\r\n                [title]=\"(!previewLoaded ? 'asset.add-asset' : 'asset.change-asset') | translate\"\r\n                (click)=\"selectAssets()\"\r\n            >\r\n                <clr-icon shape=\"attachment\"></clr-icon>\r\n                {{ (!previewLoaded ? 'asset.add-asset' : 'asset.change-asset') | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"clr-col\">\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 mt-2\">\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 mt-2\">\r\n                <label>{{ 'editor.image-alt' | translate }}</label>\r\n                <input clrInput type=\"text\" formControlName=\"alt\" />\r\n            </clr-input-container>\r\n            <clr-input-container class=\"expand mt-2\">\r\n                <label>{{ 'editor.width' | translate }}</label>\r\n                <input clrInput type=\"text\" formControlName=\"width\" />\r\n            </clr-input-container>\r\n            <clr-input-container class=\"expand mt-2\">\r\n                <label>{{ 'editor.height' | translate }}</label>\r\n                <input clrInput type=\"text\" formControlName=\"height\" />\r\n            </clr-input-container>\r\n        </form>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"form.invalid || !previewLoaded\"\r\n    >\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;height:150px}.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.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: i4$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.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: "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: ExternalImageDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-external-image-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex\">\r\n    <form [formGroup]=\"form\" class=\"flex-spacer\" clrForm clrLayout=\"vertical\">\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-src' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"src\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-title' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"title\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-alt' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"alt\" />\r\n        </clr-input-container>\r\n    </form>\r\n    <div class=\"preview\">\r\n        <img\r\n            [src]=\"form.get('src')?.value\"\r\n            [class.visible]=\"previewLoaded\"\r\n            (load)=\"onImageLoad($event)\"\r\n            (error)=\"onImageError($event)\"\r\n        />\r\n        <div class=\"placeholder\" *ngIf=\"!previewLoaded\">\r\n            <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || !previewLoaded\">\r\n        <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"] }]
-        }] });
+            args: [{ selector: 'vdr-external-image-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"clr-row\">\r\n    <div class=\"clr-col-md-5 clr-row clr-justify-content-center\">\r\n        <div class=\"preview text-center clr-col-12 mt-10\">\r\n            <vdr-dropdown>\r\n                <img\r\n                    [src]=\"form.get('src')?.value\"\r\n                    [class.visible]=\"previewLoaded\"\r\n                    vdrDropdownTrigger\r\n                    (load)=\"onImageLoad($event)\"\r\n                    (error)=\"onImageError($event)\"\r\n                    class=\"img-responsive\"\r\n                />\r\n\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        vdrDropdownItem\r\n                        [title]=\"'asset.remove-asset' | translate\"\r\n                        (click)=\"removeImage()\"\r\n                    >\r\n                        <clr-icon shape=\"times\"></clr-icon>\r\n                        {{ 'asset.remove-asset' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\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 class=\"text-center clr-col-12\">\r\n            <div *ngIf=\"previewLoaded && !form.get('dataExternal')?.value\">\r\n                <select name=\"options\" (change)=\"onSizeSelect($event.target.value)\" [(ngModel)]=\"preset\">\r\n                    <option value=\"\" selected>{{ 'asset.size' | translate }}</option>\r\n                    <option *ngFor=\"let size of sizes\" [value]=\"size\">{{ size }}</option>\r\n                </select>\r\n            </div>\r\n\r\n            <button\r\n                class=\"btn btn-icon btn-sm btn-block mt-2\"\r\n                [title]=\"(!previewLoaded ? 'asset.add-asset' : 'asset.change-asset') | translate\"\r\n                (click)=\"selectAssets()\"\r\n            >\r\n                <clr-icon shape=\"attachment\"></clr-icon>\r\n                {{ (!previewLoaded ? 'asset.add-asset' : 'asset.change-asset') | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"clr-col\">\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 mt-2\">\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 mt-2\">\r\n                <label>{{ 'editor.image-alt' | translate }}</label>\r\n                <input clrInput type=\"text\" formControlName=\"alt\" />\r\n            </clr-input-container>\r\n            <clr-input-container class=\"expand mt-2\">\r\n                <label>{{ 'editor.width' | translate }}</label>\r\n                <input clrInput type=\"text\" formControlName=\"width\" />\r\n            </clr-input-container>\r\n            <clr-input-container class=\"expand mt-2\">\r\n                <label>{{ 'editor.height' | translate }}</label>\r\n                <input clrInput type=\"text\" formControlName=\"height\" />\r\n            </clr-input-container>\r\n        </form>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"form.invalid || !previewLoaded\"\r\n    >\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;height:150px}.preview img{max-width:100%;display:none}.preview img.visible{display:block}.preview .placeholder{color:var(--color-grey-300)}\n"] }]
+        }], ctorParameters: () => [{ type: ModalService }, { type: i0.ChangeDetectorRef }], propDecorators: { change: [{
+                type: Output
+            }] } });
 
 function markActive(state, type) {
     const { from, $from, to, empty } = state.selection;
@@ -15070,6 +15245,38 @@ const IconSize = {
     Small: 16,
 };
 
+const imageNode = {
+    inline: true,
+    attrs: {
+        src: {},
+        alt: { default: null },
+        title: { default: null },
+        width: { default: null },
+        height: { default: null },
+        dataExternal: { default: true },
+    },
+    group: 'inline',
+    draggable: true,
+    parseDOM: [
+        {
+            tag: 'img[src]',
+            getAttrs(dom) {
+                return {
+                    src: dom.getAttribute('src'),
+                    title: dom.getAttribute('title'),
+                    alt: dom.getAttribute('alt'),
+                    width: dom.getAttribute('width'),
+                    height: dom.getAttribute('height'),
+                    dataExternal: dom.hasAttribute('data-external'),
+                };
+            },
+        },
+    ],
+    toDOM(node) {
+        const { src, alt, title, width, height, dataExternal } = node.attrs;
+        return ['img', { src, alt, title, width, height, 'data-external': dataExternal }];
+    },
+};
 function insertImageItem(nodeType, modalService) {
     return new MenuItem({
         title: 'Insert image',
@@ -15342,7 +15549,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$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 }); }
+    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: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.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: i4$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.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,
@@ -15875,6 +16082,7 @@ class ProsemirrorService {
         this.mySchema = new Schema({
             nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block')
                 .append(getTableNodes())
+                .update('image', imageNode)
                 .addToEnd('iframe', iframeNode),
             marks: schema.spec.marks.update('link', linkMark),
         });
@@ -16228,7 +16436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
 class RichTextFormInputComponent {
     static { this.id = 'rich-text-form-input'; }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RichTextFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RichTextFormInputComponent, selector: "vdr-rich-text-form-input", ngImport: i0, template: "<vdr-rich-text-editor\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n></vdr-rich-text-editor>\r\n", styles: [":host textarea{resize:both;height:6rem;width:100%}\n"], dependencies: [{ 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: RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RichTextFormInputComponent, selector: "vdr-rich-text-form-input", ngImport: i0, template: "<vdr-rich-text-editor\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n></vdr-rich-text-editor>\r\n", styles: [":host textarea{resize:both;height:6rem;width:100%}\n"], dependencies: [{ kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RichTextFormInputComponent, decorators: [{
             type: Component,
@@ -16258,7 +16466,7 @@ class SelectFormInputComponent {
         return item.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SelectFormInputComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SelectFormInputComponent, selector: "vdr-select-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<select [formControl]=\"formControl\" [vdrDisabled]=\"readonly\">\r\n    <option *ngIf=\"config.nullable\" [ngValue]=\"null\"></option>\r\n    <option *ngFor=\"let option of options;trackBy:trackByFn\" [ngValue]=\"option.value\">\r\n        {{ (option | customFieldLabel:(uiLanguage$ | async)) || option.label || option.value }}\r\n    </option>\r\n</select>\r\n", styles: ["select{width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.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"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: CustomFieldLabelPipe, name: "customFieldLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SelectFormInputComponent, selector: "vdr-select-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<select [formControl]=\"formControl\" [vdrDisabled]=\"readonly\">\r\n    <option *ngIf=\"config.nullable\" [ngValue]=\"null\"></option>\r\n    <option *ngFor=\"let option of options;trackBy:trackByFn\" [ngValue]=\"option.value\">\r\n        {{ (option | customFieldLabel:(uiLanguage$ | async)) || option.label || option.value }}\r\n    </option>\r\n</select>\r\n", styles: ["select{width:100%}\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: i4$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.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"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: CustomFieldLabelPipe, name: "customFieldLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SelectFormInputComponent, decorators: [{
             type: Component,
@@ -16283,7 +16491,7 @@ class TextFormInputComponent {
         return this.config.ui?.suffix || this.config.suffix;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TextFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TextFormInputComponent, selector: "vdr-text-form-input", ngImport: i0, template: "<vdr-affixed-input\r\n    [suffix]=\"suffix\"\r\n    [prefix]=\"prefix\"\r\n>\r\n    <input type=\"text\" [readonly]=\"readonly\" [formControl]=\"formControl\" />\r\n</vdr-affixed-input>\r\n", styles: ["input{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TextFormInputComponent, selector: "vdr-text-form-input", ngImport: i0, template: "<vdr-affixed-input\r\n    [suffix]=\"suffix\"\r\n    [prefix]=\"prefix\"\r\n>\r\n    <input type=\"text\" [readonly]=\"readonly\" [formControl]=\"formControl\" />\r\n</vdr-affixed-input>\r\n", styles: ["input{width:100%}\n"], dependencies: [{ kind: "directive", type: i4$1.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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TextFormInputComponent, decorators: [{
             type: Component,
@@ -16303,7 +16511,7 @@ class TextareaFormInputComponent {
         return this.config.spellcheck === true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TextareaFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TextareaFormInputComponent, selector: "vdr-textarea-form-input", ngImport: i0, template: "<textarea [spellcheck]=\"spellcheck\" autocomplete=\"off\" autocorrect=\"off\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n></textarea>\r\n", styles: [":host textarea{resize:both;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TextareaFormInputComponent, selector: "vdr-textarea-form-input", ngImport: i0, template: "<textarea [spellcheck]=\"spellcheck\" autocomplete=\"off\" autocorrect=\"off\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n></textarea>\r\n", styles: [":host textarea{resize:both;width:100%}\n"], dependencies: [{ kind: "directive", type: i4$1.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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TextareaFormInputComponent, decorators: [{
             type: Component,
@@ -16552,7 +16760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
 
 class AddressFormComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AddressFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AddressFormComponent, selector: "vdr-address-form", inputs: { customFields: "customFields", formGroup: "formGroup", availableCountries: "availableCountries" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n    <vdr-card>\r\n        <vdr-form-field [label]=\"'customer.full-name' | translate\">\r\n            <input formControlName=\"fullName\" type=\"text\" />\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'customer.company' | translate\">\r\n            <input formControlName=\"company\" type=\"text\" />\r\n        </vdr-form-field>\r\n\r\n        <vdr-form-field [label]=\"'customer.street-line-1' | translate\">\r\n            <input formControlName=\"streetLine1\" type=\"text\" />\r\n        </vdr-form-field>\r\n\r\n        <vdr-form-field [label]=\"'customer.street-line-2' | translate\">\r\n            <input formControlName=\"streetLine2\" type=\"text\" />\r\n        </vdr-form-field>\r\n\r\n        <vdr-form-field [label]=\"'customer.city' | translate\">\r\n            <input formControlName=\"city\" type=\"text\" />\r\n        </vdr-form-field>\r\n\r\n        <vdr-form-field [label]=\"'customer.province' | translate\">\r\n            <input formControlName=\"province\" type=\"text\" />\r\n        </vdr-form-field>\r\n\r\n        <vdr-form-field [label]=\"'customer.postal-code' | translate\">\r\n            <input formControlName=\"postalCode\" type=\"text\" />\r\n        </vdr-form-field>\r\n\r\n        <vdr-form-field [label]=\"'customer.country' | translate\">\r\n            <select name=\"countryCode\" formControlName=\"countryCode\">\r\n                <option *ngFor=\"let country of availableCountries\" [value]=\"country.code\">\r\n                    {{ country.name }}\r\n                </option>\r\n            </select>\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'customer.phone-number' | translate\">\r\n            <input formControlName=\"phoneNumber\" type=\"text\" />\r\n        </vdr-form-field>\r\n        <section\r\n            formGroupName=\"customFields\"\r\n            *ngIf=\"formGroup.get('customFields') as customFieldsGroup\"\r\n        >\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Address\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"customFieldsGroup\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </section>\r\n    </vdr-card>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ɵ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: "directive", type: i1$4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { 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: AddressFormComponent, selector: "vdr-address-form", inputs: { customFields: "customFields", formGroup: "formGroup", availableCountries: "availableCountries" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n    <vdr-card>\r\n        <vdr-form-field [label]=\"'customer.full-name' | translate\">\r\n            <input formControlName=\"fullName\" type=\"text\" />\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'customer.company' | translate\">\r\n            <input formControlName=\"company\" type=\"text\" />\r\n        </vdr-form-field>\r\n\r\n        <vdr-form-field [label]=\"'customer.street-line-1' | translate\">\r\n            <input formControlName=\"streetLine1\" type=\"text\" />\r\n        </vdr-form-field>\r\n\r\n        <vdr-form-field [label]=\"'customer.street-line-2' | translate\">\r\n            <input formControlName=\"streetLine2\" type=\"text\" />\r\n        </vdr-form-field>\r\n\r\n        <vdr-form-field [label]=\"'customer.city' | translate\">\r\n            <input formControlName=\"city\" type=\"text\" />\r\n        </vdr-form-field>\r\n\r\n        <vdr-form-field [label]=\"'customer.province' | translate\">\r\n            <input formControlName=\"province\" type=\"text\" />\r\n        </vdr-form-field>\r\n\r\n        <vdr-form-field [label]=\"'customer.postal-code' | translate\">\r\n            <input formControlName=\"postalCode\" type=\"text\" />\r\n        </vdr-form-field>\r\n\r\n        <vdr-form-field [label]=\"'customer.country' | translate\">\r\n            <select name=\"countryCode\" formControlName=\"countryCode\">\r\n                <option *ngFor=\"let country of availableCountries\" [value]=\"country.code\">\r\n                    {{ country.name }}\r\n                </option>\r\n            </select>\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'customer.phone-number' | translate\">\r\n            <input formControlName=\"phoneNumber\" type=\"text\" />\r\n        </vdr-form-field>\r\n        <section\r\n            formGroupName=\"customFields\"\r\n            *ngIf=\"formGroup.get('customFields') as customFieldsGroup\"\r\n        >\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Address\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"customFieldsGroup\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </section>\r\n    </vdr-card>\r\n</form>\r\n", styles: [""], 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: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.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: i4$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AddressFormComponent, decorators: [{
             type: Component,
@@ -16665,16 +16873,20 @@ class AssetsComponent {
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.change = new EventEmitter();
         this.assets = [];
+        this.multiSelect = true;
     }
     selectAssets() {
         this.modalService
             .fromComponent(AssetPickerDialogComponent, {
             size: 'xl',
+            locals: {
+                multiSelect: this.multiSelect,
+            },
         })
             .subscribe(result => {
             if (result && result.length) {
-                this.assets = unique(this.assets.concat(result), 'id');
-                if (!this.featuredAsset) {
+                this.assets = this.multiSelect ? unique(this.assets.concat(result), 'id') : result;
+                if (!this.featuredAsset || !this.multiSelect) {
                     this.featuredAsset = result[0];
                 }
                 this.emitChangeEvent(this.assets, this.featuredAsset);
@@ -16716,7 +16928,7 @@ class AssetsComponent {
         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 }); }
+    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", multiSelect: "multiSelect" }, 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$2.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$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i4$2.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,
@@ -16735,6 +16947,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 type: Output
             }], updatePermissions: [{
                 type: Input
+            }], multiSelect: [{
+                type: Input
             }] } });
 
 /**
@@ -16838,7 +17052,7 @@ class ChannelAssignmentControlComponent {
                 useExisting: ChannelAssignmentControlComponent,
                 multi: true,
             },
-        ], ngImport: i0, template: "<ng-select\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"multiple\"\r\n    [ngModel]=\"value\"\r\n    [clearable]=\"false\"\r\n    [searchable]=\"false\"\r\n    [disabled]=\"disabled\"\r\n    [compareWith]=\"compareFn\"\r\n    (focus)=\"focussed()\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <span aria-hidden=\"true\" class=\"ng-value-icon left\" (click)=\"clear(item)\"> \u00D7 </span>\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        <span class=\"channel-label\">{{ item.code | channelCodeToLabel | translate }}</span>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let item of channels$ | async\" [value]=\"item\" [disabled]=\"channelIsDisabled(item.id)\">\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        {{ item.code | channelCodeToLabel | translate }}\r\n    </ng-option>\r\n</ng-select>\r\n\r\n", styles: [":host{min-width:200px}:host.clr-input{border-bottom:none;padding:0}::ng-deep .ng-value>vdr-channel-badge,::ng-deep .ng-option>vdr-channel-badge{margin-bottom:-1px}::ng-deep .ng-value>vdr-channel-badge{margin-inline-start:6px}.channel-label{margin-inline-end:6px}\n"], dependencies: [{ 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: 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.Default }); }
+        ], ngImport: i0, template: "<ng-select\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"multiple\"\r\n    [ngModel]=\"value\"\r\n    [clearable]=\"false\"\r\n    [searchable]=\"false\"\r\n    [disabled]=\"disabled\"\r\n    [compareWith]=\"compareFn\"\r\n    (focus)=\"focussed()\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <span aria-hidden=\"true\" class=\"ng-value-icon left\" (click)=\"clear(item)\"> \u00D7 </span>\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        <span class=\"channel-label\">{{ item.code | channelCodeToLabel | translate }}</span>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let item of channels$ | async\" [value]=\"item\" [disabled]=\"channelIsDisabled(item.id)\">\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        {{ item.code | channelCodeToLabel | translate }}\r\n    </ng-option>\r\n</ng-select>\r\n\r\n", styles: [":host{min-width:200px}:host.clr-input{border-bottom:none;padding:0}::ng-deep .ng-value>vdr-channel-badge,::ng-deep .ng-option>vdr-channel-badge{margin-bottom:-1px}::ng-deep .ng-value>vdr-channel-badge{margin-inline-start:6px}.channel-label{margin-inline-end:6px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.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: 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.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChannelAssignmentControlComponent, decorators: [{
             type: Component,
@@ -16891,7 +17105,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$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 }); }
+    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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.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,
@@ -17173,11 +17387,11 @@ 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$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" }] }); }
+    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 || 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 && 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 px-2 py-1\">\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,
-            args: [{ selector: 'vdr-dt2-custom-field-column', exportAs: 'row', 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"] }]
+            args: [{ selector: 'vdr-dt2-custom-field-column', exportAs: 'row', template: "<ng-template let-item=\"item\">\r\n    <ng-container\r\n        *ngIf=\"!item.customFields || 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 && 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 px-2 py-1\">\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"] }]
         }], ctorParameters: () => [{ type: DataService }], propDecorators: { customField: [{
                 type: Input
             }], sorts: [{
@@ -17189,7 +17403,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$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" }] }); }
+    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: i4$1.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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.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,
@@ -17203,31 +17417,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 args: [TemplateRef, { static: true }]
             }] } });
 
-class FilterPresetService {
+class DataTableConfigService {
     constructor(localStorageService) {
         this.localStorageService = localStorageService;
-        this._presetChanges = new Subject();
-        this.presetChanges$ = this._presetChanges.asObservable();
     }
-    getDataTableConfig(dataTableId) {
+    getConfig(dataTableId) {
         const dataTableConfig = this.localStorageService.get('dataTableConfig') ?? {};
-        if (!dataTableConfig[dataTableId]) {
-            dataTableConfig[dataTableId] = {
+        if (dataTableId) {
+            return (dataTableConfig[dataTableId] ?? {
                 visibility: [],
                 order: {},
                 showSearchFilterRow: false,
                 filterPresets: [],
-            };
+            });
         }
         return dataTableConfig;
     }
+    setConfig(idOrConfig, maybeConfig) {
+        const currentConfig = this.getConfig();
+        if (typeof idOrConfig === 'string') {
+            if (maybeConfig) {
+                this.localStorageService.set('dataTableConfig', {
+                    ...currentConfig,
+                    [idOrConfig]: maybeConfig,
+                });
+            }
+        }
+        else {
+            this.localStorageService.set('dataTableConfig', { ...currentConfig, ...idOrConfig });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataTableConfigService, deps: [{ token: LocalStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataTableConfigService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataTableConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: LocalStorageService }] });
+
+class FilterPresetService {
+    constructor(dataTableConfigService) {
+        this.dataTableConfigService = dataTableConfigService;
+        this._presetChanges = new Subject();
+        this.presetChanges$ = this._presetChanges.asObservable();
+    }
     getFilterPresets(dataTableId) {
-        const dataTableConfig = this.getDataTableConfig(dataTableId);
-        return dataTableConfig[dataTableId].filterPresets ?? [];
+        const dataTableConfig = this.dataTableConfigService.getConfig(dataTableId);
+        return dataTableConfig.filterPresets ?? [];
     }
     saveFilterPreset(config) {
-        const dataTableConfig = this.getDataTableConfig(config.dataTableId);
-        const filterPresets = dataTableConfig[config.dataTableId].filterPresets ?? [];
+        const dataTableConfig = this.dataTableConfigService.getConfig(config.dataTableId);
+        const filterPresets = dataTableConfig.filterPresets ?? [];
         const existingName = filterPresets.find(p => p.name === config.name);
         if (existingName) {
             existingName.value = config.value;
@@ -17238,36 +17480,36 @@ class FilterPresetService {
                 value: config.value,
             });
         }
-        dataTableConfig[config.dataTableId].filterPresets = filterPresets;
-        this.localStorageService.set('dataTableConfig', dataTableConfig);
+        dataTableConfig.filterPresets = filterPresets;
+        this.dataTableConfigService.setConfig(config.dataTableId, dataTableConfig);
         this._presetChanges.next(filterPresets);
     }
     deleteFilterPreset(config) {
-        const dataTableConfig = this.getDataTableConfig(config.dataTableId);
-        dataTableConfig[config.dataTableId].filterPresets = dataTableConfig[config.dataTableId].filterPresets.filter(p => p.name !== config.name);
-        this.localStorageService.set('dataTableConfig', dataTableConfig);
-        this._presetChanges.next(dataTableConfig[config.dataTableId].filterPresets);
+        const dataTableConfig = this.dataTableConfigService.getConfig(config.dataTableId);
+        dataTableConfig.filterPresets = dataTableConfig.filterPresets.filter(p => p.name !== config.name);
+        this.dataTableConfigService.setConfig(config.dataTableId, dataTableConfig);
+        this._presetChanges.next(dataTableConfig.filterPresets);
     }
     reorderPresets(dataTableId, fromIndex, toIndex) {
         const presets = this.getFilterPresets(dataTableId);
         moveItemInArray(presets, fromIndex, toIndex);
-        const dataTableConfig = this.getDataTableConfig(dataTableId);
-        dataTableConfig[dataTableId].filterPresets = presets;
-        this.localStorageService.set('dataTableConfig', dataTableConfig);
+        const dataTableConfig = this.dataTableConfigService.getConfig(dataTableId);
+        dataTableConfig.filterPresets = presets;
+        this.dataTableConfigService.setConfig(dataTableId, dataTableConfig);
         this._presetChanges.next(presets);
     }
     renameFilterPreset(config) {
-        const dataTableConfig = this.getDataTableConfig(config.dataTableId);
-        const filterPresets = dataTableConfig[config.dataTableId].filterPresets ?? [];
+        const dataTableConfig = this.dataTableConfigService.getConfig(config.dataTableId);
+        const filterPresets = dataTableConfig.filterPresets ?? [];
         const existingName = filterPresets.find(p => p.name === config.oldName);
         if (existingName) {
             existingName.name = config.newName;
-            dataTableConfig[config.dataTableId].filterPresets = filterPresets;
-            this.localStorageService.set('dataTableConfig', dataTableConfig);
+            dataTableConfig.filterPresets = filterPresets;
+            this.dataTableConfigService.setConfig(config.dataTableId, dataTableConfig);
             this._presetChanges.next(filterPresets);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FilterPresetService, deps: [{ token: LocalStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FilterPresetService, deps: [{ token: DataTableConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FilterPresetService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FilterPresetService, decorators: [{
@@ -17275,7 +17517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: LocalStorageService }] });
+        }], ctorParameters: () => [{ type: DataTableConfigService }] });
 
 class DataTableCustomComponentService {
     constructor() {
@@ -17546,7 +17788,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$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 }); }
+    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: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.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: i4$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.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,
@@ -17585,7 +17827,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$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 }); }
+    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$2.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$2.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$2.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,
@@ -17605,7 +17847,7 @@ class RenameFilterPresetDialogComponent {
         this.resolveWith(this.name);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RenameFilterPresetDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RenameFilterPresetDialogComponent, selector: "vdr-rename-filter-preset-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.rename-filter-preset' | translate }}\r\n</ng-template>\r\n    <vdr-form-field>\r\n        <input type=\"text\" [(ngModel)]=\"name\">\r\n    </vdr-form-field>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"rename()\" [disabled]=\"!name\" class=\"button primary\">\r\n       {{ 'common.update' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { 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: RenameFilterPresetDialogComponent, selector: "vdr-rename-filter-preset-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.rename-filter-preset' | translate }}\r\n</ng-template>\r\n    <vdr-form-field>\r\n        <input type=\"text\" [(ngModel)]=\"name\">\r\n    </vdr-form-field>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"rename()\" [disabled]=\"!name\" class=\"button primary\">\r\n       {{ 'common.update' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { 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: RenameFilterPresetDialogComponent, decorators: [{
             type: Component,
@@ -17663,7 +17905,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$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 }); }
+    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$2.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$2.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$2.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,
@@ -17714,7 +17956,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$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 }); }
+    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: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$1.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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.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,
@@ -17793,17 +18035,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
  * @docsCategory components
  */
 class DataTable2Component {
-    constructor(changeDetectorRef, localStorageService, dataService) {
+    constructor(changeDetectorRef, dataService) {
         this.changeDetectorRef = changeDetectorRef;
-        this.localStorageService = localStorageService;
         this.dataService = dataService;
         this.activeIndex = -1;
         this.pageChange = new EventEmitter();
         this.itemsPerPageChange = new EventEmitter();
+        this.visibleColumnsChange = new EventEmitter();
         this.injector = inject(Injector);
         this.route = inject(ActivatedRoute);
         this.filterPresetService = inject(FilterPresetService);
         this.dataTableCustomComponentService = inject(DataTableCustomComponentService);
+        this.dataTableConfigService = inject(DataTableConfigService);
         this.customComponents = new Map();
         // This is used to apply a `user-select: none` CSS rule to the table,
         // which allows shift-click multi-row selection
@@ -17837,8 +18080,8 @@ class DataTable2Component {
     }
     get sortedColumns() {
         const columns = this.allColumns;
-        const dataTableConfig = this.getDataTableConfig();
-        for (const [id, index] of Object.entries(dataTableConfig[this.id].order)) {
+        const dataTableConfig = this.dataTableConfigService.getConfig(this.id);
+        for (const [id, index] of Object.entries(dataTableConfig.order)) {
             const column = columns.find(c => c.id === id);
             const currentIndex = columns.findIndex(c => c.id === id);
             if (currentIndex !== -1 && column) {
@@ -17865,18 +18108,19 @@ class DataTable2Component {
     }
     ngAfterContentInit() {
         this.rowTemplate = this.templateRefs.last;
-        const dataTableConfig = this.getDataTableConfig();
+        const dataTableConfig = this.dataTableConfigService.getConfig(this.id);
         if (!this.id) {
             console.warn(`No id was assigned to the data table component`);
         }
         const updateColumnVisibility = () => {
-            dataTableConfig[this.id].visibility = this.allColumns
+            dataTableConfig.visibility = this.allColumns
                 .filter(c => (c.visible && c.hiddenByDefault) || (!c.visible && !c.hiddenByDefault))
                 .map(c => c.id);
-            this.localStorageService.set('dataTableConfig', dataTableConfig);
+            this.dataTableConfigService.setConfig(this.id, dataTableConfig);
+            this.visibleColumnsChange.emit(this.visibleSortedColumns);
         };
         this.allColumns.forEach(column => {
-            if (dataTableConfig?.[this.id]?.visibility.includes(column.id)) {
+            if (dataTableConfig?.visibility.includes(column.id)) {
                 column.setVisibility(column.hiddenByDefault);
             }
             column.onColumnChange(updateColumnVisibility);
@@ -17889,6 +18133,7 @@ class DataTable2Component {
                 this.customComponents.set(column.id, { config, injector });
             }
         });
+        this.visibleColumnsChange.emit(this.visibleSortedColumns);
         if (this.selectionManager) {
             document.addEventListener('keydown', this.shiftDownHandler, { passive: true });
             document.addEventListener('keyup', this.shiftUpHandler, { passive: true });
@@ -17898,8 +18143,7 @@ class DataTable2Component {
             this.selectionManager.setCurrentItems(this.items);
         }
         this.showSearchFilterRow =
-            !!this.filters?.activeFilters.length ||
-                (dataTableConfig?.[this.id]?.showSearchFilterRow ?? false);
+            !!this.filters?.activeFilters.length || (dataTableConfig?.showSearchFilterRow ?? false);
         this.columns.changes.subscribe(() => {
             this.changeDetectorRef.markForCheck();
         });
@@ -17918,26 +18162,26 @@ class DataTable2Component {
     }
     onColumnReorder(event) {
         const naturalIndex = this.allColumns.findIndex(c => c.id === event.column.id);
-        const dataTableConfig = this.getDataTableConfig();
+        const dataTableConfig = this.dataTableConfigService.getConfig(this.id);
         if (naturalIndex === event.newIndex) {
-            delete dataTableConfig[this.id].order[event.column.id];
+            delete dataTableConfig.order[event.column.id];
         }
         else {
-            dataTableConfig[this.id].order[event.column.id] = event.newIndex;
+            dataTableConfig.order[event.column.id] = event.newIndex;
         }
-        this.localStorageService.set('dataTableConfig', dataTableConfig);
+        this.dataTableConfigService.setConfig(this.id, dataTableConfig);
     }
     onColumnsReset() {
-        const dataTableConfig = this.getDataTableConfig();
-        dataTableConfig[this.id].order = {};
-        dataTableConfig[this.id].visibility = [];
-        this.localStorageService.set('dataTableConfig', dataTableConfig);
+        const dataTableConfig = this.dataTableConfigService.getConfig(this.id);
+        dataTableConfig.order = {};
+        dataTableConfig.visibility = [];
+        this.dataTableConfigService.setConfig(this.id, dataTableConfig);
     }
     toggleSearchFilterRow() {
         this.showSearchFilterRow = !this.showSearchFilterRow;
-        const dataTableConfig = this.getDataTableConfig();
-        dataTableConfig[this.id].showSearchFilterRow = this.showSearchFilterRow;
-        this.localStorageService.set('dataTableConfig', dataTableConfig);
+        const dataTableConfig = this.dataTableConfigService.getConfig(this.id);
+        dataTableConfig.showSearchFilterRow = this.showSearchFilterRow;
+        this.dataTableConfigService.setConfig(this.id, dataTableConfig);
     }
     trackByFn(index, item) {
         if (item.id != null) {
@@ -17953,25 +18197,13 @@ class DataTable2Component {
     onRowClick(item, event) {
         this.selectionManager?.toggleSelection(item, event);
     }
-    getDataTableConfig() {
-        const dataTableConfig = this.localStorageService.get('dataTableConfig') ?? {};
-        if (!dataTableConfig[this.id]) {
-            dataTableConfig[this.id] = {
-                visibility: [],
-                order: {},
-                showSearchFilterRow: false,
-                filterPresets: [],
-            };
-        }
-        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$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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataTable2Component, deps: [{ token: i0.ChangeDetectorRef }, { 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", visibleColumnsChange: "visibleColumnsChange" }, 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,
             args: [{ selector: 'vdr-data-table-2', changeDetection: ChangeDetectionStrategy.OnPush, providers: [PaginationService, FilterPresetService], template: "<vdr-data-table-filter-presets\r\n    *ngIf=\"filters\"\r\n    [filters]=\"filters\"\r\n    [dataTableId]=\"id\"\r\n></vdr-data-table-filter-presets>\r\n<div class=\"table-wrapper\">\r\n    <div class=\"bulk-actions\">\r\n        <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n    </div>\r\n    <table class=\"\" [class.no-select]=\"disableSelect\">\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <vdr-ui-extension-point\r\n                            [locationId]=\"id\"\r\n                            [metadata]=\"column.id\"\r\n                            api=\"dataTable\"\r\n                            [topPx]=\"-6\"\r\n                            [leftPx]=\"-24\"\r\n                            display=\"block\"\r\n                        >\r\n                            <span>{{ column.heading }}</span>\r\n                        </vdr-ui-extension-point>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-add-filter-preset-button\r\n                                    [filters]=\"filters\"\r\n                                    [dataTableId]=\"id\"\r\n                                ></vdr-add-filter-preset-button>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  id: id,\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <ng-container\r\n                            *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n                        >\r\n                            <ng-container\r\n                                *ngComponentOutlet=\"\r\n                                    componentConfig.config.component;\r\n                                    inputs: { rowItem: item };\r\n                                    injector: componentConfig.injector\r\n                                \"\r\n                            ></ng-container>\r\n                        </ng-container>\r\n                        <ng-template #defaultComponent>\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n                            ></ng-container>\r\n                        </ng-template>\r\n                    </div>\r\n                </td>\r\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\r\n            </tr>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n    <vdr-items-per-page-controls\r\n        *ngIf=\"totalItems\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n    ></vdr-items-per-page-controls>\r\n    <div *ngIf=\"totalItems\" class=\"total-items-count\">\r\n        {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n    </div>\r\n\r\n    <vdr-pagination-controls\r\n        *ngIf=\"totalItems\"\r\n        [id]=\"id\"\r\n        [currentPage]=\"currentPage\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        [totalItems]=\"totalItems\"\r\n        (pageChange)=\"pageChange.emit($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);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"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: LocalStorageService }, { type: DataService }], propDecorators: { id: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: DataService }], propDecorators: { id: [{
                 type: Input
             }], items: [{
                 type: Input
@@ -17991,6 +18223,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 type: Output
             }], itemsPerPageChange: [{
                 type: Output
+            }], visibleColumnsChange: [{
+                type: Output
             }], columns: [{
                 type: ContentChildren,
                 args: [DataTable2ColumnComponent]
@@ -18219,7 +18453,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$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 }); }
+    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: i4$1.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: i4$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.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,
@@ -18746,13 +18980,13 @@ class SplitViewComponent {
     close() {
         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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SplitViewComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$5.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$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,
             args: [{ selector: 'vdr-split-view', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$6.DomSanitizer }], propDecorators: { rightPanelOpen: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$5.DomSanitizer }], propDecorators: { rightPanelOpen: [{
                 type: Input
             }], closeClicked: [{
                 type: Output
@@ -19043,7 +19277,7 @@ class ZoneSelectorComponent {
                 useExisting: ZoneSelectorComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true }], ngImport: i0, template: "<ng-select\r\n    [items]=\"zones$ | async\"\r\n    [addTag]=\"false\"\r\n    appendTo=\"body\"\r\n    bindLabel=\"name\"\r\n    bindValue=\"id\"\r\n    [disabled]=\"disabled || readonly\"\r\n    [ngModel]=\"value\"\r\n    (change)=\"onChange($event)\"\r\n>\r\n</ng-select>\r\n", styles: [""], dependencies: [{ 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: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true }], ngImport: i0, template: "<ng-select\r\n    [items]=\"zones$ | async\"\r\n    [addTag]=\"false\"\r\n    appendTo=\"body\"\r\n    bindLabel=\"name\"\r\n    bindValue=\"id\"\r\n    [disabled]=\"disabled || readonly\"\r\n    [ngModel]=\"value\"\r\n    (change)=\"onChange($event)\"\r\n>\r\n</ng-select>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.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: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ZoneSelectorComponent, decorators: [{
             type: Component,
@@ -19346,7 +19580,7 @@ class CurrencyCodeSelectorComponent {
                 useExisting: forwardRef(() => CurrencyCodeSelectorComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<ng-select\r\n    [items]=\"currencyCodes\"\r\n    [addTag]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [searchFn]=\"searchCurrencyCodes\"\r\n    multiple=\"true\"\r\n    appendTo=\"body\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onChangeFn($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <span class=\"ng-value-icon left\" (click)=\"clear.call(null, item)\" aria-hidden=\"true\"> \u00D7 </span>\r\n        <span class=\"ng-value-label\">{{ item | localeCurrencyName }}</span>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">{{ item | localeCurrencyName }}</ng-template>\r\n</ng-select>\r\n", styles: [""], dependencies: [{ 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: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "pipe", type: LocaleCurrencyNamePipe, name: "localeCurrencyName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<ng-select\r\n    [items]=\"currencyCodes\"\r\n    [addTag]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [searchFn]=\"searchCurrencyCodes\"\r\n    multiple=\"true\"\r\n    appendTo=\"body\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onChangeFn($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <span class=\"ng-value-icon left\" (click)=\"clear.call(null, item)\" aria-hidden=\"true\"> \u00D7 </span>\r\n        <span class=\"ng-value-label\">{{ item | localeCurrencyName }}</span>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">{{ item | localeCurrencyName }}</ng-template>\r\n</ng-select>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.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: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "pipe", type: LocaleCurrencyNamePipe, name: "localeCurrencyName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CurrencyCodeSelectorComponent, decorators: [{
             type: Component,
@@ -19409,7 +19643,7 @@ class LanguageCodeSelectorComponent {
                 useExisting: forwardRef(() => LanguageCodeSelectorComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<ng-select\r\n    [items]=\"languageCodes\"\r\n    [addTag]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [searchFn]=\"searchLanguageCodes\"\r\n    multiple=\"true\"\r\n    appendTo=\"body\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onChangeFn($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <span class=\"ng-value-icon left\" (click)=\"clear.call(null, item)\" aria-hidden=\"true\"> \u00D7 </span>\r\n        <span class=\"ng-value-label\">{{ item | localeLanguageName }} ({{ item }})</span>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">{{ item | localeLanguageName }} ({{ item }})</ng-template>\r\n</ng-select>\r\n\r\n", styles: [""], dependencies: [{ 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: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "pipe", type: LocaleLanguageNamePipe, name: "localeLanguageName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<ng-select\r\n    [items]=\"languageCodes\"\r\n    [addTag]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [searchFn]=\"searchLanguageCodes\"\r\n    multiple=\"true\"\r\n    appendTo=\"body\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onChangeFn($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <span class=\"ng-value-icon left\" (click)=\"clear.call(null, item)\" aria-hidden=\"true\"> \u00D7 </span>\r\n        <span class=\"ng-value-label\">{{ item | localeLanguageName }} ({{ item }})</span>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">{{ item | localeLanguageName }} ({{ item }})</ng-template>\r\n</ng-select>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.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: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "pipe", type: LocaleLanguageNamePipe, name: "localeLanguageName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LanguageCodeSelectorComponent, decorators: [{
             type: Component,
@@ -19563,7 +19797,7 @@ class DuplicateEntityDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DuplicateEntityDialogComponent, deps: [{ token: DataService }, { token: NotificationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DuplicateEntityDialogComponent, selector: "vdr-duplicate-entity-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ title || 'common.duplicate-entity' | translate }}\r\n</ng-template>\r\n<div class=\"\">\r\n    <ul>\r\n        <li *ngFor=\"let entity of entities\">\r\n            {{ getEntityName(entity) }}\r\n        </li>\r\n    </ul>\r\n    <ng-container *ngIf=\"entityDuplicators$ | async as duplicators\">\r\n        <select\r\n            name=\"\"\r\n            id=\"\"\r\n            *ngIf=\"1 < duplicators.length\"\r\n            class=\"mt-4\"\r\n            [ngModel]=\"selectedDuplicator\"\r\n            (ngModelChange)=\"setSelectedDuplicator($event)\"\r\n        >\r\n            <option *ngFor=\"let duplicator of duplicators\" [ngValue]=\"duplicator\">\r\n                {{ duplicator.description }} ({{ duplicator.code }})\r\n            </option>\r\n        </select>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"selectedDuplicator as duplicator\">\r\n        <vdr-configurable-input\r\n            *ngIf=\"duplicator.args.length > 0\"\r\n            [hideDescription]=\"true\"\r\n            [operation]=\"duplicatorInstance\"\r\n            [operationDefinition]=\"duplicator\"\r\n            [removable]=\"false\"\r\n            [formControl]=\"formGroup\"\r\n        ></vdr-configurable-input>\r\n    </ng-container>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"duplicate()\" [disabled]=\"!selectedDuplicator\" class=\"btn btn-primary\">\r\n        {{ 'common.duplicate' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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: "component", type: ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position", "hideDescription"], outputs: ["remove"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DuplicateEntityDialogComponent, selector: "vdr-duplicate-entity-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ title || 'common.duplicate-entity' | translate }}\r\n</ng-template>\r\n<div class=\"\">\r\n    <ul>\r\n        <li *ngFor=\"let entity of entities\">\r\n            {{ getEntityName(entity) }}\r\n        </li>\r\n    </ul>\r\n    <ng-container *ngIf=\"entityDuplicators$ | async as duplicators\">\r\n        <select\r\n            name=\"\"\r\n            id=\"\"\r\n            *ngIf=\"1 < duplicators.length\"\r\n            class=\"mt-4\"\r\n            [ngModel]=\"selectedDuplicator\"\r\n            (ngModelChange)=\"setSelectedDuplicator($event)\"\r\n        >\r\n            <option *ngFor=\"let duplicator of duplicators\" [ngValue]=\"duplicator\">\r\n                {{ duplicator.description }} ({{ duplicator.code }})\r\n            </option>\r\n        </select>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"selectedDuplicator as duplicator\">\r\n        <vdr-configurable-input\r\n            *ngIf=\"duplicator.args.length > 0\"\r\n            [hideDescription]=\"true\"\r\n            [operation]=\"duplicatorInstance\"\r\n            [operationDefinition]=\"duplicator\"\r\n            [removable]=\"false\"\r\n            [formControl]=\"formGroup\"\r\n        ></vdr-configurable-input>\r\n    </ng-container>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"duplicate()\" [disabled]=\"!selectedDuplicator\" class=\"btn btn-primary\">\r\n        {{ 'common.duplicate' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], 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: i4$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position", "hideDescription"], outputs: ["remove"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DuplicateEntityDialogComponent, decorators: [{
             type: Component,
@@ -20172,7 +20406,7 @@ class CoreModule {
         });
         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 }], 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$5.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,
@@ -20235,7 +20469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                         AlertsComponent,
                     ],
                 }]
-        }], ctorParameters: () => [{ type: I18nService }, { type: LocalStorageService }, { type: i1$6.Title }, { type: AlertsService }] });
+        }], ctorParameters: () => [{ type: I18nService }, { type: LocalStorageService }, { type: i1$5.Title }, { type: AlertsService }] });
 function HttpLoaderFactory(http, location) {
     // Dynamically get the baseHref, which is configured in the angular.json file
     const baseHref = location.getBaseHrefFromDOM();
@@ -21082,6 +21316,7 @@ class BaseListComponent {
         this.onPageChangeFn = (skip, take) => ({ options: { skip, take } });
         this.refresh$ = new BehaviorSubject(undefined);
         this.defaults = { take: 10, skip: 0 };
+        this.visibleCustomFieldColumnChange$ = new Subject();
     }
     /**
      * @description
@@ -21106,7 +21341,7 @@ class BaseListComponent {
         const fetchPage = ([currentPage, itemsPerPage, _]) => {
             const take = itemsPerPage;
             const skip = (currentPage - 1) * itemsPerPage;
-            this.listQuery.ref.refetch(this.onPageChangeFn(skip, take));
+            this.listQuery.ref?.refetch(this.onPageChangeFn(skip, take));
         };
         this.result$ = this.listQuery.stream$.pipe(shareReplay(1));
         this.items$ = this.result$.pipe(map(data => this.mappingFn(data).items));
@@ -21131,7 +21366,7 @@ class BaseListComponent {
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
-        this.listQuery.completed$.next();
+        this.listQuery.destroy();
     }
     /**
      * @description
@@ -21147,6 +21382,9 @@ class BaseListComponent {
     setItemsPerPage(perPage) {
         this.setQueryParam('perPage', perPage, { replaceUrl: true });
     }
+    setVisibleColumns(columns) {
+        this.visibleCustomFieldColumnChange$.next(columns.filter((c) => c instanceof DataTableCustomFieldColumnComponent));
+    }
     /**
      * @description
      * Re-fetch the current page of results.
@@ -21183,6 +21421,7 @@ class TypedBaseListComponent extends BaseListComponent {
         this.router = inject(Router);
         this.serverConfigService = inject(ServerConfigService);
         this.permissionsService = inject(PermissionsService);
+        this.dataTableConfigService = inject(DataTableConfigService);
         this.refreshStreams = [];
         this.collections = [];
         const destroyRef = inject(DestroyRef);
@@ -21191,7 +21430,16 @@ class TypedBaseListComponent extends BaseListComponent {
         });
     }
     configure(config) {
-        super.setQueryFn((args) => this.dataService.query(config.document).refetchOnChannelChange(), data => config.getItems(data), (skip, take) => config.setVariables?.(skip, take) ?? {});
+        const customFieldsChange$ = this.visibleCustomFieldColumnChange$.pipe(map(columns => columns.map(c => c.customField.name)), distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)));
+        const includeCustomFields = this.dataTableListId
+            ? this.dataTableConfigService.getConfig(this.dataTableListId).visibility
+            : undefined;
+        super.setQueryFn((args) => this.dataService
+            .query(config.document, {}, 'cache-and-network', {
+            includeCustomFields,
+        })
+            .refetchOnChannelChange()
+            .refetchOnCustomFieldsChange(customFieldsChange$), data => config.getItems(data), (skip, take) => config.setVariables?.(skip, take) ?? {});
         this.availableLanguages$ = this.serverConfigService.getAvailableLanguages();
         this.contentLanguage$ = this.dataService.client
             .uiState()
@@ -22646,13 +22894,13 @@ class ExtensionHostComponent {
     isExtensionHostConfig(input) {
         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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ExtensionHostComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$5.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$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,
             args: [{ selector: 'vdr-extension-host', changeDetection: ChangeDetectionStrategy.Default, standalone: true, imports: [SharedModule], providers: [ExtensionHostService], template: "<ng-template [ngIf]=\"openInIframe\" [ngIfElse]=\"launchExtension\">\r\n    <iframe [src]=\"extensionUrl\" #extensionFrame></iframe>\r\n</ng-template>\r\n<ng-template #launchExtension>\r\n    <div class=\"launch-button\" [class.launched]=\"extensionWindowIsOpen\">\r\n        <div>\r\n            <button\r\n                class=\"btn btn-lg btn-primary\"\r\n                [disabled]=\"extensionWindowIsOpen\"\r\n                (click)=\"launchExtensionWindow()\"\r\n            >\r\n                <clr-icon shape=\"pop-out\"></clr-icon>\r\n                {{ 'common.launch-extension' | translate }}\r\n            </button>\r\n            <h3 class=\"window-hint\" [class.visible]=\"extensionWindowIsOpen\">\r\n                {{ 'common.extension-running-in-separate-window' | translate }}\r\n            </h3>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: ["iframe{position:absolute;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"] }]
-        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$6.DomSanitizer }, { type: ExtensionHostService }], propDecorators: { extensionFrame: [{
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$5.DomSanitizer }, { type: ExtensionHostService }], propDecorators: { extensionFrame: [{
                 type: ViewChild,
                 args: ['extensionFrame']
             }] } });
@@ -22752,5 +23000,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, 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, DynamicComponentLoaderComponent, 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 };
+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, ASSET_SIZES, 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, DataTableConfigService, 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, DynamicComponentLoaderComponent, 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, imageNode, 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