@vendure/admin-ui 2.1.0 → 2.1.2

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

@@ -2,11 +2,11 @@ import * as i0 from '@angular/core';
 import { Injectable, Component, isDevMode, Inject, HostListener, ChangeDetectionStrategy, Input, ViewChild, Directive, Optional, ContentChild, EventEmitter, Output, Pipe, HostBinding, Injector, APP_INITIALIZER, NgModule, ChangeDetectorRef, ViewContainerRef, ViewChildren, forwardRef, TemplateRef, SkipSelf, inject, ContentChildren, ElementRef, CUSTOM_ELEMENTS_SCHEMA, 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, mapTo, startWith, mergeMap, catchError, shareReplay, throttleTime, scan, debounceTime, delay, bufferWhen, delayWhen } from 'rxjs/operators';
+import { concatMap, bufferCount, map, filter, distinctUntilChanged, skip, takeUntil, tap, take, finalize, switchMap, mapTo, startWith, first, mergeMap, catchError, shareReplay, throttleTime, scan, debounceTime, delay, bufferWhen, delayWhen } from 'rxjs/operators';
 import * as i1 from 'apollo-angular';
 import { gql, ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
 import { pick } from '@vendure/common/lib/pick';
-import { from, Subject, merge, lastValueFrom, BehaviorSubject, interval, combineLatest, isObservable, switchMap as switchMap$1, of, Observable, timer, EMPTY, concat, forkJoin, fromEvent } from 'rxjs';
+import { from, Subject, merge, lastValueFrom, BehaviorSubject, interval, combineLatest, isObservable, switchMap as switchMap$1, of, map as map$1, Observable, timer, 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';
@@ -15,7 +15,7 @@ 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 { HttpResponse, HttpErrorResponse, HttpClientModule, HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
-import * as i2$2 from '@angular/platform-browser';
+import * as i1$6 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';
@@ -26,6 +26,7 @@ import { ClarityModule } from '@clr/angular';
 import { TemplatePortal } from '@angular/cdk/portal';
 import * as i1$2 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
+import * as i4 from '@angular/cdk/bidi';
 import * as i5 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i1$4 from '@angular/forms';
@@ -34,14 +35,13 @@ import * as i3$1 from '@ng-select/ng-select';
 import { NgSelectComponent, SELECTION_MODEL_FACTORY, NgSelectModule } from '@ng-select/ng-select';
 import { DEFAULT_CHANNEL_CODE, DEFAULT_AUTH_TOKEN_HEADER_KEY } from '@vendure/common/lib/shared-constants';
 import { flatten } from 'lodash';
-import * as i10 from '@angular/cdk/bidi';
 import { CodeJar } from 'codejar';
 import { setContext } from '@apollo/client/link/context';
 import { ApolloLink as ApolloLink$1 } from '@apollo/client/link/core';
 import { createUploadLink } from 'apollo-upload-client';
 import { omit } from '@vendure/common/lib/omit';
 import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
-import * as i4 from '@angular/cdk/drag-drop';
+import * as i4$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import dayjs from 'dayjs';
 import * as i2$1 from 'ngx-pagination';
@@ -6710,7 +6710,8 @@ class Alert {
     }
 }
 class AlertsService {
-    constructor() {
+    constructor(dataService) {
+        this.dataService = dataService;
         this.alertsMap = new Map();
         this.configUpdated = new Subject();
         const alerts$ = this.configUpdated.pipe(mapTo([...this.alertsMap.values()]), startWith([...this.alertsMap.values()]));
@@ -6721,8 +6722,20 @@ class AlertsService {
         }), map(alertStates => alertStates.filter(notNullOrUndefined)));
     }
     configureAlert(config) {
-        this.alertsMap.set(config.id, new Alert(config));
-        this.configUpdated.next();
+        this.hasSufficientPermissions(config.requiredPermissions)
+            .pipe(first())
+            .subscribe(hasSufficientPermissions => {
+            if (hasSufficientPermissions) {
+                this.alertsMap.set(config.id, new Alert(config));
+                this.configUpdated.next();
+            }
+        });
+    }
+    hasSufficientPermissions(permissions) {
+        if (!permissions || permissions.length === 0) {
+            return of(true);
+        }
+        return this.dataService.client.userStatus().stream$.pipe(filter(({ userStatus }) => userStatus.isLoggedIn), map(({ userStatus }) => permissions.some(permission => userStatus.permissions.includes(permission))));
     }
     refresh(id) {
         if (id) {
@@ -6732,7 +6745,7 @@ class AlertsService {
             this.alertsMap.forEach(config => config.runCheck());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AlertsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AlertsService, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AlertsService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AlertsService, decorators: [{
@@ -6740,7 +6753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return [{ type: DataService }]; } });
 
 /**
  * @description
@@ -6798,6 +6811,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
                 type: Input
             }] } });
 
+/** @dynamic */
+class I18nService {
+    get availableLanguages() {
+        return [...this._availableLanguages];
+    }
+    constructor(ngxTranslate, document) {
+        this.ngxTranslate = ngxTranslate;
+        this.document = document;
+        this._availableLanguages = [];
+    }
+    /**
+     * Set the default language
+     */
+    setDefaultLanguage(languageCode) {
+        this.ngxTranslate.setDefaultLang(languageCode);
+    }
+    /**
+     * Set the UI language
+     */
+    setLanguage(language) {
+        this.ngxTranslate.use(language);
+        if (this.document?.documentElement) {
+            this.document.documentElement.lang = language;
+        }
+    }
+    /**
+     * Set the available UI languages
+     */
+    setAvailableLanguages(languages) {
+        this._availableLanguages = languages;
+    }
+    /**
+     * Translate the given key.
+     */
+    translate(key, params) {
+        return this.ngxTranslate.instant(key, params);
+    }
+    /**
+     * Returns true if the given language code is a right-to-left language.
+     */
+    isRTL(languageCode) {
+        const rtlLanguageCodes = [
+            LanguageCode.ar,
+            LanguageCode.he,
+            LanguageCode.fa,
+            LanguageCode.ur,
+            LanguageCode.ps,
+        ];
+        return rtlLanguageCodes.includes(languageCode);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: I18nService, deps: [{ token: i3.TranslateService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: I18nService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: I18nService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i3.TranslateService }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; } });
+
+/**
+ * @description
+ * Provides localization helper functionality.
+ *
+ */
+class LocalizationService {
+    constructor(i18nService, dataService) {
+        this.i18nService = i18nService;
+        this.dataService = dataService;
+        this.uiLanguageAndLocale$ = this.dataService.client
+            ?.uiState()
+            ?.stream$?.pipe(map$1(({ uiState }) => [uiState.language, uiState.locale ?? undefined]));
+        this.direction$ = this.uiLanguageAndLocale$?.pipe(map$1(([languageCode]) => {
+            return this.i18nService.isRTL(languageCode) ? 'rtl' : 'ltr';
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: LocalizationService, deps: [{ token: I18nService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: LocalizationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: LocalizationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: I18nService }, { type: DataService }]; } });
+
 /**
  * A dropdown menu modelled on the Clarity Dropdown component (https://v1.clarity.design/dropdowns).
  *
@@ -6834,13 +6936,15 @@ class DropdownMenuComponent {
             }
         }
     }
-    constructor(overlay, viewContainerRef, dropdown) {
+    constructor(overlay, viewContainerRef, dropdown, localizationService) {
         this.overlay = overlay;
         this.viewContainerRef = viewContainerRef;
         this.dropdown = dropdown;
+        this.localizationService = localizationService;
         this.position = 'bottom-left';
     }
     ngOnInit() {
+        this.direction$ = this.localizationService.direction$;
         this.dropdown.onOpenChange(isOpen => {
             if (isOpen) {
                 this.overlayRef.attach(this.menuPortal);
@@ -6912,41 +7016,45 @@ class DropdownMenuComponent {
         inverted.overlayY = pos.overlayY === 'top' ? 'bottom' : 'top';
         return inverted;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DropdownMenuComponent, deps: [{ token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: DropdownComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DropdownMenuComponent, deps: [{ token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: DropdownComponent }, { token: LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: { position: ["vdrPosition", "position"], customClasses: "customClasses" }, host: { listeners: { "window:keydown.escape": "onEscapeKeydown($event)", "window:keydown": "onArrowKey($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: `
         <ng-template #menu>
-            <div class="dropdown open">
-                <div class="dropdown-menu" [ngClass]="customClasses">
-                    <div
-                        class="dropdown-content-wrapper"
-                        [cdkTrapFocus]="true"
-                        [cdkTrapFocusAutoCapture]="true"
-                    >
-                        <ng-content></ng-content>
+            <div [dir]="direction$ | async">
+                <div class="dropdown open">
+                    <div class="dropdown-menu" [ngClass]="customClasses">
+                        <div
+                            class="dropdown-content-wrapper"
+                            [cdkTrapFocus]="true"
+                            [cdkTrapFocusAutoCapture]="true"
+                        >
+                            <ng-content></ng-content>
+                        </div>
                     </div>
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, styles: [".clear-backdrop{background-color:#ff69b4}::ng-deep .dropdown-menu{max-width:initial}::ng-deep .dropdown-menu .dropdown-item{display:flex;align-items:center}::ng-deep .dropdown-menu .dropdown-item clr-icon{margin-inline-end:3px}::ng-deep .dropdown-menu .dropdown-item:focus{outline:var(--color-dropdown-item-focus-outline) solid 1px;outline-offset:1px 0}.dropdown.open>.dropdown-menu{position:relative;top:0;height:100%;overflow-y:auto}:host{opacity:1;transition:opacity .3s}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, styles: [".clear-backdrop{background-color:#ff69b4}::ng-deep .dropdown-menu{max-width:initial}::ng-deep .dropdown-menu .dropdown-item{display:flex;align-items:center}::ng-deep .dropdown-menu .dropdown-item clr-icon{margin-inline-end:3px}::ng-deep .dropdown-menu .dropdown-item:focus{outline:var(--color-dropdown-item-focus-outline) solid 1px;outline-offset:1px 0}.dropdown.open>.dropdown-menu{position:relative;top:0;height:100%;overflow-y:auto}:host{opacity:1;transition:opacity .3s}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DropdownMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-dropdown-menu', template: `
         <ng-template #menu>
-            <div class="dropdown open">
-                <div class="dropdown-menu" [ngClass]="customClasses">
-                    <div
-                        class="dropdown-content-wrapper"
-                        [cdkTrapFocus]="true"
-                        [cdkTrapFocusAutoCapture]="true"
-                    >
-                        <ng-content></ng-content>
+            <div [dir]="direction$ | async">
+                <div class="dropdown open">
+                    <div class="dropdown-menu" [ngClass]="customClasses">
+                        <div
+                            class="dropdown-content-wrapper"
+                            [cdkTrapFocus]="true"
+                            [cdkTrapFocusAutoCapture]="true"
+                        >
+                            <ng-content></ng-content>
+                        </div>
                     </div>
                 </div>
             </div>
         </ng-template>
     `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".clear-backdrop{background-color:#ff69b4}::ng-deep .dropdown-menu{max-width:initial}::ng-deep .dropdown-menu .dropdown-item{display:flex;align-items:center}::ng-deep .dropdown-menu .dropdown-item clr-icon{margin-inline-end:3px}::ng-deep .dropdown-menu .dropdown-item:focus{outline:var(--color-dropdown-item-focus-outline) solid 1px;outline-offset:1px 0}.dropdown.open>.dropdown-menu{position:relative;top:0;height:100%;overflow-y:auto}:host{opacity:1;transition:opacity .3s}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: DropdownComponent }]; }, propDecorators: { position: [{
+        }], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: DropdownComponent }, { type: LocalizationService }]; }, propDecorators: { position: [{
                 type: Input,
                 args: ['vdrPosition']
             }], customClasses: [{
@@ -7035,7 +7143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
         }], ctorParameters: function () { return [{ type: AlertsService }]; } });
 
 // Auto-generated by the set-version.js script.
-const ADMIN_UI_VERSION = '2.1.0';
+const ADMIN_UI_VERSION = '2.1.2';
 
 /* eslint-disable @angular-eslint/directive-selector */
 class FormFieldControlDirective {
@@ -7166,10 +7274,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
  * directly in templates. See {@link ModalService.fromComponent} method for more detail.
  */
 class ModalDialogComponent {
-    constructor() {
+    /**
+     *
+     */
+    constructor(localizationService) {
+        this.localizationService = localizationService;
         this.titleTemplateRef$ = new Subject();
         this.buttonsTemplateRef$ = new Subject();
     }
+    ngOnInit() {
+        this.direction$ = this.localizationService.direction$;
+    }
     /**
      * This callback is invoked when the childComponentType is instantiated in the
      * template by the {@link DialogComponentOutletComponent}.
@@ -7207,13 +7322,13 @@ class ModalDialogComponent {
             this.closeModal();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ModalDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ModalDialogComponent, selector: "vdr-modal-dialog", ngImport: i0, template: "<clr-modal\r\n    [clrModalOpen]=\"true\"\r\n    (clrModalOpenChange)=\"modalOpenChange($event)\"\r\n    [clrModalClosable]=\"options?.closable\"\r\n    [clrModalSize]=\"options?.size\"\r\n    [ngClass]=\"'modal-valign-' + (options?.verticalAlign || 'center')\"\r\n>\r\n    <h3 class=\"modal-title\"><ng-container *ngTemplateOutlet=\"(titleTemplateRef$ | async)\"></ng-container></h3>\r\n    <div class=\"modal-body\">\r\n        <vdr-dialog-component-outlet\r\n            [component]=\"childComponentType\"\r\n            (create)=\"onCreate($event)\"\r\n        ></vdr-dialog-component-outlet>\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n        <ng-container *ngTemplateOutlet=\"(buttonsTemplateRef$ | async)\"></ng-container>\r\n    </div>\r\n</clr-modal>\r\n", styles: ["::ng-deep clr-modal.modal-valign-top .modal{justify-content:flex-start}::ng-deep clr-modal.modal-valign-bottom .modal{justify-content:flex-end}.modal-body{display:flex;flex-direction:column;container-type:inline-size}\n"], dependencies: [{ kind: "component", type: i1$3.ClrModal, selector: "clr-modal", inputs: ["clrModalOpen", "clrModalClosable", "clrModalCloseButtonAriaLabel", "clrModalSize", "clrModalStaticBackdrop", "clrModalSkipAnimation", "clrModalPreventClose", "clrModalLabelledById"], outputs: ["clrModalOpenChange", "clrModalAlternateClose"] }, { kind: "directive", type: i1$3.ClrModalBody, selector: ".modal-body" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DialogComponentOutletComponent, selector: "vdr-dialog-component-outlet", inputs: ["component"], outputs: ["create"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ModalDialogComponent, deps: [{ token: LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ModalDialogComponent, selector: "vdr-modal-dialog", ngImport: i0, template: "<div [dir]=\"direction$ | async\">\r\n    <clr-modal [clrModalOpen]=\"true\" (clrModalOpenChange)=\"modalOpenChange($event)\"\r\n        [clrModalClosable]=\"options?.closable\" [clrModalSize]=\"options?.size\"\r\n        [ngClass]=\"'modal-valign-' + (options?.verticalAlign || 'center')\">\r\n        <h3 class=\"modal-title\"><ng-container *ngTemplateOutlet=\"(titleTemplateRef$ | async)\"></ng-container></h3>\r\n        <div class=\"modal-body\">\r\n            <vdr-dialog-component-outlet [component]=\"childComponentType\"\r\n                (create)=\"onCreate($event)\"></vdr-dialog-component-outlet>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <ng-container *ngTemplateOutlet=\"(buttonsTemplateRef$ | async)\"></ng-container>\r\n        </div>\r\n    </clr-modal>\r\n</div>", styles: ["::ng-deep clr-modal.modal-valign-top .modal{justify-content:flex-start}::ng-deep clr-modal.modal-valign-bottom .modal{justify-content:flex-end}.modal-body{display:flex;flex-direction:column;container-type:inline-size}\n"], dependencies: [{ kind: "component", type: i1$3.ClrModal, selector: "clr-modal", inputs: ["clrModalOpen", "clrModalClosable", "clrModalCloseButtonAriaLabel", "clrModalSize", "clrModalStaticBackdrop", "clrModalSkipAnimation", "clrModalPreventClose", "clrModalLabelledById"], outputs: ["clrModalOpenChange", "clrModalAlternateClose"] }, { kind: "directive", type: i1$3.ClrModalBody, selector: ".modal-body" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: DialogComponentOutletComponent, selector: "vdr-dialog-component-outlet", inputs: ["component"], outputs: ["create"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ModalDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-modal-dialog', template: "<clr-modal\r\n    [clrModalOpen]=\"true\"\r\n    (clrModalOpenChange)=\"modalOpenChange($event)\"\r\n    [clrModalClosable]=\"options?.closable\"\r\n    [clrModalSize]=\"options?.size\"\r\n    [ngClass]=\"'modal-valign-' + (options?.verticalAlign || 'center')\"\r\n>\r\n    <h3 class=\"modal-title\"><ng-container *ngTemplateOutlet=\"(titleTemplateRef$ | async)\"></ng-container></h3>\r\n    <div class=\"modal-body\">\r\n        <vdr-dialog-component-outlet\r\n            [component]=\"childComponentType\"\r\n            (create)=\"onCreate($event)\"\r\n        ></vdr-dialog-component-outlet>\r\n    </div>\r\n    <div class=\"modal-footer\">\r\n        <ng-container *ngTemplateOutlet=\"(buttonsTemplateRef$ | async)\"></ng-container>\r\n    </div>\r\n</clr-modal>\r\n", styles: ["::ng-deep clr-modal.modal-valign-top .modal{justify-content:flex-start}::ng-deep clr-modal.modal-valign-bottom .modal{justify-content:flex-end}.modal-body{display:flex;flex-direction:column;container-type:inline-size}\n"] }]
-        }] });
+            args: [{ selector: 'vdr-modal-dialog', template: "<div [dir]=\"direction$ | async\">\r\n    <clr-modal [clrModalOpen]=\"true\" (clrModalOpenChange)=\"modalOpenChange($event)\"\r\n        [clrModalClosable]=\"options?.closable\" [clrModalSize]=\"options?.size\"\r\n        [ngClass]=\"'modal-valign-' + (options?.verticalAlign || 'center')\">\r\n        <h3 class=\"modal-title\"><ng-container *ngTemplateOutlet=\"(titleTemplateRef$ | async)\"></ng-container></h3>\r\n        <div class=\"modal-body\">\r\n            <vdr-dialog-component-outlet [component]=\"childComponentType\"\r\n                (create)=\"onCreate($event)\"></vdr-dialog-component-outlet>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <ng-container *ngTemplateOutlet=\"(buttonsTemplateRef$ | async)\"></ng-container>\r\n        </div>\r\n    </clr-modal>\r\n</div>", styles: ["::ng-deep clr-modal.modal-valign-top .modal{justify-content:flex-start}::ng-deep clr-modal.modal-valign-bottom .modal{justify-content:flex-end}.modal-body{display:flex;flex-direction:column;container-type:inline-size}\n"] }]
+        }], ctorParameters: function () { return [{ type: LocalizationService }]; } });
 
 /**
  * A helper directive used to correctly embed the modal buttons in the {@link ModalDialogComponent}.
@@ -8034,69 +8149,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: LocalStorageService }, { type: DataService }, { type: ServerConfigService }]; } });
 
-/** @dynamic */
-class I18nService {
-    get availableLanguages() {
-        return [...this._availableLanguages];
-    }
-    constructor(ngxTranslate, document) {
-        this.ngxTranslate = ngxTranslate;
-        this.document = document;
-        this._availableLanguages = [];
-    }
-    /**
-     * Set the default language
-     */
-    setDefaultLanguage(languageCode) {
-        this.ngxTranslate.setDefaultLang(languageCode);
-    }
-    /**
-     * Set the UI language
-     */
-    setLanguage(language) {
-        this.ngxTranslate.use(language);
-        if (this.document?.documentElement) {
-            this.document.documentElement.lang = language;
-        }
-    }
-    /**
-     * Set the available UI languages
-     */
-    setAvailableLanguages(languages) {
-        this._availableLanguages = languages;
-    }
-    /**
-     * Translate the given key.
-     */
-    translate(key, params) {
-        return this.ngxTranslate.instant(key, params);
-    }
-    /**
-     * Returns true if the given language code is a right-to-left language.
-     */
-    isRTL(languageCode) {
-        const rtlLanguageCodes = [
-            LanguageCode.ar,
-            LanguageCode.he,
-            LanguageCode.fa,
-            LanguageCode.ur,
-            LanguageCode.ps,
-        ];
-        return rtlLanguageCodes.includes(languageCode);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: I18nService, deps: [{ token: i3.TranslateService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: I18nService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: I18nService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: i3.TranslateService }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }]; } });
-
 /**
  * Used by ModalService.dialog() to host a generic configurable modal dialog.
  */
@@ -8431,11 +8483,11 @@ class ThemeSwitcherComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ThemeSwitcherComponent, deps: [{ token: DataService }, { token: LocalStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ThemeSwitcherComponent, selector: "vdr-theme-switcher", host: { listeners: { "click": "onHostClick($event)", "keydown.enter": "onHostClick($event)" } }, ngImport: i0, template: "<button *ngIf=\"activeTheme$ | async as activeTheme\" class=\"theme-toggle\">\r\n    <span>{{ 'common.theme' | translate }}</span>\r\n    <div class=\"theme-icon default\" [class.active]=\"activeTheme === 'default'\">\r\n        <clr-icon shape=\"sun\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n    <div class=\"theme-icon dark\" [class.active]=\"activeTheme === 'dark'\">\r\n        <clr-icon shape=\"moon\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n</button>\r\n", styles: [":host{display:flex;justify-content:start;align-items:center}button.theme-toggle{position:relative;padding-inline-start:20px;border:none;background:transparent;color:var(--clr-dropdown-item-color);cursor:pointer}.theme-icon{position:absolute;top:0;left:6px;z-index:0;opacity:.2;color:var(--color-text-300);transition:opacity .3s,left .3s}.theme-icon.active{z-index:1;left:0;opacity:1}.theme-icon.default.active{color:#d6ae3f}.theme-icon.dark.active{color:#ffdf3a}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ThemeSwitcherComponent, selector: "vdr-theme-switcher", host: { listeners: { "click": "onHostClick($event)", "keydown.enter": "onHostClick($event)" } }, ngImport: i0, template: "<button *ngIf=\"activeTheme$ | async as activeTheme\" class=\"theme-toggle\">\r\n    <span>{{ 'common.theme' | translate }}</span>\r\n    <div class=\"theme-icon default\" [class.active]=\"activeTheme === 'default'\">\r\n        <clr-icon shape=\"sun\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n    <div class=\"theme-icon dark\" [class.active]=\"activeTheme === 'dark'\">\r\n        <clr-icon shape=\"moon\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n</button>\r\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center}button.theme-toggle{position:relative;padding-inline-start:20px;border:none;background:transparent;color:var(--clr-dropdown-item-color);cursor:pointer}.theme-icon{position:absolute;top:0;left:6px;z-index:0;opacity:.2;color:var(--color-text-300);transition:opacity .3s,left .3s}.theme-icon.active{z-index:1;left:0;opacity:1}.theme-icon.default.active{color:#d6ae3f}.theme-icon.dark.active{color:#ffdf3a}:host-context([dir=rtl]) .theme-icon{left:auto;right:6px}:host-context([dir=rtl]) .theme-icon.active{left:auto;right:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ThemeSwitcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-theme-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button *ngIf=\"activeTheme$ | async as activeTheme\" class=\"theme-toggle\">\r\n    <span>{{ 'common.theme' | translate }}</span>\r\n    <div class=\"theme-icon default\" [class.active]=\"activeTheme === 'default'\">\r\n        <clr-icon shape=\"sun\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n    <div class=\"theme-icon dark\" [class.active]=\"activeTheme === 'dark'\">\r\n        <clr-icon shape=\"moon\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n</button>\r\n", styles: [":host{display:flex;justify-content:start;align-items:center}button.theme-toggle{position:relative;padding-inline-start:20px;border:none;background:transparent;color:var(--clr-dropdown-item-color);cursor:pointer}.theme-icon{position:absolute;top:0;left:6px;z-index:0;opacity:.2;color:var(--color-text-300);transition:opacity .3s,left .3s}.theme-icon.active{z-index:1;left:0;opacity:1}.theme-icon.default.active{color:#d6ae3f}.theme-icon.dark.active{color:#ffdf3a}\n"] }]
+            args: [{ selector: 'vdr-theme-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button *ngIf=\"activeTheme$ | async as activeTheme\" class=\"theme-toggle\">\r\n    <span>{{ 'common.theme' | translate }}</span>\r\n    <div class=\"theme-icon default\" [class.active]=\"activeTheme === 'default'\">\r\n        <clr-icon shape=\"sun\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n    <div class=\"theme-icon dark\" [class.active]=\"activeTheme === 'dark'\">\r\n        <clr-icon shape=\"moon\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n</button>\r\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center}button.theme-toggle{position:relative;padding-inline-start:20px;border:none;background:transparent;color:var(--clr-dropdown-item-color);cursor:pointer}.theme-icon{position:absolute;top:0;left:6px;z-index:0;opacity:.2;color:var(--color-text-300);transition:opacity .3s,left .3s}.theme-icon.active{z-index:1;left:0;opacity:1}.theme-icon.default.active{color:#d6ae3f}.theme-icon.dark.active{color:#ffdf3a}:host-context([dir=rtl]) .theme-icon{left:auto;right:6px}:host-context([dir=rtl]) .theme-icon.active{left:auto;right:0}\n"] }]
         }], ctorParameters: function () { return [{ type: DataService }, { type: LocalStorageService }]; }, propDecorators: { onHostClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -9382,7 +9434,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
         }], ctorParameters: function () { return [{ type: DataService }, { type: ChannelService }]; } });
 
 class AppShellComponent {
-    constructor(authService, dataService, router, i18nService, modalService, localStorageService, breadcrumbService) {
+    constructor(authService, dataService, router, i18nService, modalService, localStorageService, breadcrumbService, localizationService) {
         this.authService = authService;
         this.dataService = dataService;
         this.router = router;
@@ -9390,24 +9442,23 @@ class AppShellComponent {
         this.modalService = modalService;
         this.localStorageService = localStorageService;
         this.breadcrumbService = breadcrumbService;
+        this.localizationService = localizationService;
         this.version = ADMIN_UI_VERSION;
         this.availableLanguages = [];
         this.hideVendureBranding = getAppConfig().hideVendureBranding;
         this.devMode = isDevMode();
     }
     ngOnInit() {
+        this.direction$ = this.localizationService.direction$;
+        this.uiLanguageAndLocale$ = this.localizationService.uiLanguageAndLocale$;
         this.userName$ = this.dataService.client
             .userStatus()
             .single$.pipe(map(data => data.userStatus.username));
-        this.uiLanguageAndLocale$ = this.dataService.client
-            .uiState()
-            .stream$.pipe(map(({ uiState }) => [uiState.language, uiState.locale ?? undefined]));
         this.availableLanguages = this.i18nService.availableLanguages;
         this.pageTitle$ = this.breadcrumbService.breadcrumbs$.pipe(map(breadcrumbs => breadcrumbs[breadcrumbs.length - 1].label));
         this.mainNavExpanded$ = this.dataService.client
             .uiState()
             .stream$.pipe(map(({ uiState }) => uiState.mainNavExpanded));
-        this.direction$ = this.uiLanguageAndLocale$.pipe(map(([languageCode]) => (this.i18nService.isRTL(languageCode) ? 'rtl' : 'ltr')));
     }
     selectUiLanguage() {
         this.uiLanguageAndLocale$
@@ -9445,16 +9496,20 @@ class AppShellComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AppShellComponent, deps: [{ token: AuthService }, { token: DataService }, { token: i1$1.Router }, { token: I18nService }, { token: ModalService }, { token: LocalStorageService }, { token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AppShellComponent, selector: "vdr-app-shell", ngImport: i0, template: "<div class=\"app-container\" [dir]=\"direction$ | async\">\r\n    <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"\r\n                ><img src=\"assets/logo-top.webp\" class=\"logo\" style=\"max-width: 100px\"\r\n            /></a>\r\n            <div class=\"collapse-menu\">\r\n                <button class=\"\" (click)=\"collapseNav()\">\r\n                    <clr-icon shape=\"window-close\" size=\"24\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <div class=\"mx-4\">\r\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n        </div>\r\n        <div class=\"main-nav-container\">\r\n            <vdr-main-nav (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"settings-nav-container\">\r\n            <hr />\r\n            <vdr-main-nav displayMode=\"settings\" (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"mx-2\">\r\n            <div *ngIf=\"devMode\" class=\"flex center mb-2\">\r\n                <vdr-dropdown>\r\n                    <button class=\"icon-button dev-mode-button\" vdrDropdownTrigger title=\"DEV MODE\">\r\n                        <clr-icon shape=\"code\" size=\"24\"></clr-icon> DEV MODE\r\n                    </button>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"px-2 py-1\">\r\n                            <div>Version: {{ version }}</div>\r\n                            <div>View UI extension points: <kbd>CTRL + U</kbd></div>\r\n                        </div>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"surface\">\r\n        <div class=\"content-container\">\r\n            <div class=\"top-bar\">\r\n                <div class=\"expand-menu mr-1\">\r\n                    <button class=\"\" (click)=\"expandNav()\">\r\n                        <svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                            fill=\"none\"\r\n                            viewBox=\"0 0 24 24\"\r\n                            stroke-width=\"1.5\"\r\n                            stroke=\"currentColor\"\r\n                            class=\"bars\"\r\n                        >\r\n                            <path\r\n                                stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\"\r\n                                d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\"\r\n                            />\r\n                        </svg>\r\n                    </button>\r\n                </div>\r\n                <div>\r\n                    <vdr-breadcrumb></vdr-breadcrumb>\r\n                </div>\r\n                <div class=\"universal-search flex-spacer\"></div>\r\n                <div class=\"mx-1\">\r\n                    <vdr-alerts></vdr-alerts>\r\n                </div>\r\n                <div>\r\n                    <vdr-user-menu\r\n                        [userName]=\"userName$ | async\"\r\n                        [uiLanguageAndLocale]=\"uiLanguageAndLocale$ | async\"\r\n                        [availableLanguages]=\"availableLanguages\"\r\n                        (selectUiLanguage)=\"selectUiLanguage()\"\r\n                        (logOut)=\"logOut()\"\r\n                    ></vdr-user-menu>\r\n                </div>\r\n            </div>\r\n            <div class=\"content-area\"><router-outlet></router-outlet></div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".app-container{display:flex;height:100vh;overflow:hidden}.left-nav{background-color:var(--color-left-nav-bg);color:var(--color-left-nav-text);display:flex;flex-direction:column;overflow:hidden;height:100%;border-inline-end:1px solid var(--color-weight-150);z-index:2;width:var(--left-nav-width);max-width:var(--left-nav-width)}@media screen and (max-width: 992px){.left-nav.expanded{position:fixed;inset:0;width:100%;max-width:100%;animation:fade-in .2s ease-in-out forwards}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media screen and (min-width: 992px){.expand-menu,.collapse-menu{display:none}}.expand-menu button,.collapse-menu button{border:none;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);color:var(--color-text-100);display:flex;align-items:center;justify-content:center}.expand-menu .bars,.collapse-menu .bars{width:24px;height:24px}.collapse-menu button{height:40px;background-color:var(--color-weight-200)}.main-nav-container{overflow:auto;flex:1}.settings-nav-container{margin:calc(var(--space-unit) * 3) 0}.settings-nav-container hr{margin:0 calc(var(--space-unit) * 4);margin-bottom:calc(var(--space-unit) * 4);border:1px solid var(--color-weight-150);box-shadow:0 1px 0 var(--color-weight-100)}.logo{max-width:100%}.wordmark{font-weight:700;margin-inline-start:12px;font-size:24px;color:var(--color-primary-500)}@media screen and (max-width: 992px){.wordmark{display:none}}.surface{display:flex;flex-direction:column;flex:1;background-color:var(--color-surface-bg)}.content-container{overflow:auto;min-height:100vh;display:flex;flex-direction:column}.branding{display:flex;align-items:center;justify-content:space-between;min-width:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);padding-inline-end:calc(var(--space-unit) * 1.5)}@media screen and (min-width: 992px){.branding{padding:calc(var(--space-unit) * 4)}}.top-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1);background-color:var(--color-page-header)}@media screen and (min-width: 992px){.top-bar{padding:calc(var(--space-unit) * 4);padding-inline-start:var(--surface-margin-left)}}.header-actions{align-items:center}.content-area{position:relative;margin-inline-end:auto;flex:1;display:block;width:100%}.dev-mode-button{opacity:.7;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { kind: "component", type: UserMenuComponent, selector: "vdr-user-menu", inputs: ["userName", "availableLanguages", "uiLanguageAndLocale"], outputs: ["logOut", "selectUiLanguage"] }, { kind: "component", type: MainNavComponent, selector: "vdr-main-nav", inputs: ["displayMode"], outputs: ["itemClick"] }, { kind: "component", type: BreadcrumbComponent, selector: "vdr-breadcrumb" }, { kind: "component", type: ChannelSwitcherComponent, selector: "vdr-channel-switcher" }, { kind: "component", type: AlertsComponent, selector: "vdr-alerts" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AppShellComponent, deps: [{ token: AuthService }, { token: DataService }, { token: i1$1.Router }, { token: I18nService }, { token: ModalService }, { token: LocalStorageService }, { token: BreadcrumbService }, { token: LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AppShellComponent, selector: "vdr-app-shell", ngImport: i0, template: "<div class=\"app-container\" [dir]=\"direction$ | async\">\r\n    <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"\r\n                ><img src=\"assets/logo-top.webp\" class=\"logo\" style=\"max-width: 100px\"\r\n            /></a>\r\n            <div class=\"collapse-menu\">\r\n                <button class=\"\" (click)=\"collapseNav()\">\r\n                    <clr-icon shape=\"window-close\" size=\"24\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <div class=\"mx-4\">\r\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n        </div>\r\n        <div class=\"main-nav-container\">\r\n            <vdr-main-nav (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"settings-nav-container\">\r\n            <hr />\r\n            <vdr-main-nav displayMode=\"settings\" (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"mx-2\">\r\n            <div *ngIf=\"devMode\" class=\"flex center mb-2\">\r\n                <vdr-dropdown>\r\n                    <button class=\"icon-button dev-mode-button\" vdrDropdownTrigger title=\"DEV MODE\">\r\n                        <clr-icon shape=\"code\" size=\"24\"></clr-icon> DEV MODE\r\n                    </button>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"px-2 py-1\">\r\n                            <div>Version: {{ version }}</div>\r\n                            <div>View UI extension points: <kbd>CTRL + U</kbd></div>\r\n                        </div>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"surface\">\r\n        <div class=\"content-container\">\r\n            <div class=\"top-bar\">\r\n                <div class=\"expand-menu mr-1\">\r\n                    <button class=\"\" (click)=\"expandNav()\">\r\n                        <svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                            fill=\"none\"\r\n                            viewBox=\"0 0 24 24\"\r\n                            stroke-width=\"1.5\"\r\n                            stroke=\"currentColor\"\r\n                            class=\"bars\"\r\n                        >\r\n                            <path\r\n                                stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\"\r\n                                d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\"\r\n                            />\r\n                        </svg>\r\n                    </button>\r\n                </div>\r\n                <div>\r\n                    <vdr-breadcrumb></vdr-breadcrumb>\r\n                </div>\r\n                <div class=\"universal-search flex-spacer\"></div>\r\n                <div class=\"mx-1\">\r\n                    <vdr-alerts></vdr-alerts>\r\n                </div>\r\n                <div>\r\n                    <vdr-user-menu\r\n                        [userName]=\"userName$ | async\"\r\n                        [uiLanguageAndLocale]=\"uiLanguageAndLocale$ | async\"\r\n                        [availableLanguages]=\"availableLanguages\"\r\n                        (selectUiLanguage)=\"selectUiLanguage()\"\r\n                        (logOut)=\"logOut()\"\r\n                    ></vdr-user-menu>\r\n                </div>\r\n            </div>\r\n            <div class=\"content-area\"><router-outlet></router-outlet></div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".app-container{display:flex;height:100vh;overflow:hidden}.left-nav{background-color:var(--color-left-nav-bg);color:var(--color-left-nav-text);display:flex;flex-direction:column;overflow:hidden;height:100%;border-inline-end:1px solid var(--color-weight-150);z-index:2;width:var(--left-nav-width);max-width:var(--left-nav-width)}@media screen and (max-width: 992px){.left-nav.expanded{position:fixed;inset:0;width:100%;max-width:100%;animation:fade-in .2s ease-in-out forwards}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media screen and (min-width: 992px){.expand-menu,.collapse-menu{display:none}}.expand-menu button,.collapse-menu button{border:none;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);color:var(--color-text-100);display:flex;align-items:center;justify-content:center}.expand-menu .bars,.collapse-menu .bars{width:24px;height:24px}.collapse-menu button{height:40px;background-color:var(--color-weight-200)}.main-nav-container{overflow:auto;flex:1}.settings-nav-container{margin:calc(var(--space-unit) * 3) 0}.settings-nav-container hr{margin:0 calc(var(--space-unit) * 4);margin-bottom:calc(var(--space-unit) * 4);border:1px solid var(--color-weight-150);box-shadow:0 1px 0 var(--color-weight-100)}.logo{max-width:100%}.wordmark{font-weight:700;margin-inline-start:12px;font-size:24px;color:var(--color-primary-500)}@media screen and (max-width: 992px){.wordmark{display:none}}.surface{display:flex;flex-direction:column;flex:1;background-color:var(--color-surface-bg)}.content-container{overflow:auto;min-height:100vh;display:flex;flex-direction:column}.branding{display:flex;align-items:center;justify-content:space-between;min-width:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);padding-inline-end:calc(var(--space-unit) * 1.5)}@media screen and (min-width: 992px){.branding{padding:calc(var(--space-unit) * 4)}}.top-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1);background-color:var(--color-page-header)}@media screen and (min-width: 992px){.top-bar{padding:calc(var(--space-unit) * 4);padding-inline-start:var(--surface-margin-left)}}.header-actions{align-items:center}.content-area{position:relative;margin-inline-end:auto;flex:1;display:block;width:100%}.dev-mode-button{opacity:.7;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: 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: "16.2.2", ngImport: i0, type: AppShellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-app-shell', template: "<div class=\"app-container\" [dir]=\"direction$ | async\">\r\n    <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"\r\n                ><img src=\"assets/logo-top.webp\" class=\"logo\" style=\"max-width: 100px\"\r\n            /></a>\r\n            <div class=\"collapse-menu\">\r\n                <button class=\"\" (click)=\"collapseNav()\">\r\n                    <clr-icon shape=\"window-close\" size=\"24\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <div class=\"mx-4\">\r\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n        </div>\r\n        <div class=\"main-nav-container\">\r\n            <vdr-main-nav (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"settings-nav-container\">\r\n            <hr />\r\n            <vdr-main-nav displayMode=\"settings\" (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"mx-2\">\r\n            <div *ngIf=\"devMode\" class=\"flex center mb-2\">\r\n                <vdr-dropdown>\r\n                    <button class=\"icon-button dev-mode-button\" vdrDropdownTrigger title=\"DEV MODE\">\r\n                        <clr-icon shape=\"code\" size=\"24\"></clr-icon> DEV MODE\r\n                    </button>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"px-2 py-1\">\r\n                            <div>Version: {{ version }}</div>\r\n                            <div>View UI extension points: <kbd>CTRL + U</kbd></div>\r\n                        </div>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"surface\">\r\n        <div class=\"content-container\">\r\n            <div class=\"top-bar\">\r\n                <div class=\"expand-menu mr-1\">\r\n                    <button class=\"\" (click)=\"expandNav()\">\r\n                        <svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                            fill=\"none\"\r\n                            viewBox=\"0 0 24 24\"\r\n                            stroke-width=\"1.5\"\r\n                            stroke=\"currentColor\"\r\n                            class=\"bars\"\r\n                        >\r\n                            <path\r\n                                stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\"\r\n                                d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\"\r\n                            />\r\n                        </svg>\r\n                    </button>\r\n                </div>\r\n                <div>\r\n                    <vdr-breadcrumb></vdr-breadcrumb>\r\n                </div>\r\n                <div class=\"universal-search flex-spacer\"></div>\r\n                <div class=\"mx-1\">\r\n                    <vdr-alerts></vdr-alerts>\r\n                </div>\r\n                <div>\r\n                    <vdr-user-menu\r\n                        [userName]=\"userName$ | async\"\r\n                        [uiLanguageAndLocale]=\"uiLanguageAndLocale$ | async\"\r\n                        [availableLanguages]=\"availableLanguages\"\r\n                        (selectUiLanguage)=\"selectUiLanguage()\"\r\n                        (logOut)=\"logOut()\"\r\n                    ></vdr-user-menu>\r\n                </div>\r\n            </div>\r\n            <div class=\"content-area\"><router-outlet></router-outlet></div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".app-container{display:flex;height:100vh;overflow:hidden}.left-nav{background-color:var(--color-left-nav-bg);color:var(--color-left-nav-text);display:flex;flex-direction:column;overflow:hidden;height:100%;border-inline-end:1px solid var(--color-weight-150);z-index:2;width:var(--left-nav-width);max-width:var(--left-nav-width)}@media screen and (max-width: 992px){.left-nav.expanded{position:fixed;inset:0;width:100%;max-width:100%;animation:fade-in .2s ease-in-out forwards}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media screen and (min-width: 992px){.expand-menu,.collapse-menu{display:none}}.expand-menu button,.collapse-menu button{border:none;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);color:var(--color-text-100);display:flex;align-items:center;justify-content:center}.expand-menu .bars,.collapse-menu .bars{width:24px;height:24px}.collapse-menu button{height:40px;background-color:var(--color-weight-200)}.main-nav-container{overflow:auto;flex:1}.settings-nav-container{margin:calc(var(--space-unit) * 3) 0}.settings-nav-container hr{margin:0 calc(var(--space-unit) * 4);margin-bottom:calc(var(--space-unit) * 4);border:1px solid var(--color-weight-150);box-shadow:0 1px 0 var(--color-weight-100)}.logo{max-width:100%}.wordmark{font-weight:700;margin-inline-start:12px;font-size:24px;color:var(--color-primary-500)}@media screen and (max-width: 992px){.wordmark{display:none}}.surface{display:flex;flex-direction:column;flex:1;background-color:var(--color-surface-bg)}.content-container{overflow:auto;min-height:100vh;display:flex;flex-direction:column}.branding{display:flex;align-items:center;justify-content:space-between;min-width:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);padding-inline-end:calc(var(--space-unit) * 1.5)}@media screen and (min-width: 992px){.branding{padding:calc(var(--space-unit) * 4)}}.top-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1);background-color:var(--color-page-header)}@media screen and (min-width: 992px){.top-bar{padding:calc(var(--space-unit) * 4);padding-inline-start:var(--surface-margin-left)}}.header-actions{align-items:center}.content-area{position:relative;margin-inline-end:auto;flex:1;display:block;width:100%}.dev-mode-button{opacity:.7;font-size:12px}\n"] }]
-        }], ctorParameters: function () { return [{ type: AuthService }, { type: DataService }, { type: i1$1.Router }, { type: I18nService }, { type: ModalService }, { type: LocalStorageService }, { type: BreadcrumbService }]; } });
+        }], ctorParameters: function () { return [{ type: AuthService }, { type: DataService }, { type: i1$1.Router }, { type: I18nService }, { type: ModalService }, { type: LocalStorageService }, { type: BreadcrumbService }, { type: LocalizationService }]; } });
 
 class NotificationComponent {
-    constructor() {
+    /**
+     *
+     */
+    constructor(localizationService) {
+        this.localizationService = localizationService;
         this.offsetTop = 0;
         this.message = '';
         this.translationVars = {};
@@ -9464,6 +9519,9 @@ class NotificationComponent {
             /* */
         };
     }
+    ngOnInit() {
+        this.direction$ = this.localizationService.direction$;
+    }
     registerOnClickFn(fn) {
         this.onClickFn = fn;
     }
@@ -9510,13 +9568,13 @@ class NotificationComponent {
             return JSON.stringify(message, null, 2);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NotificationComponent, selector: "vdr-notification", host: { listeners: { "click": "onClick()" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n    class=\"notification-wrapper\"\r\n    #wrapper\r\n    [style.top.px]=\"offsetTop\"\r\n    [ngClass]=\"{\r\n        visible: isVisible,\r\n        info: type === 'info',\r\n        success: type === 'success',\r\n        error: type === 'error',\r\n        warning: type === 'warning'\r\n    }\"\r\n>\r\n    <clr-icon [attr.shape]=\"getIcon()\" size=\"24\"></clr-icon>\r\n    {{ stringifyMessage(message) | translate: translationVars }}\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:.95}}:host{position:relative;z-index:1050}:host>.notification-wrapper{display:block;position:fixed;z-index:1001;top:0;right:10px;border-radius:3px;max-width:98vw;word-wrap:break-word;padding:10px;background-color:var(--color-grey-500);color:#fff;transition:opacity 1s,top .3s;opacity:0;white-space:pre-line}:host>.notification-wrapper.success{background-color:var(--color-success-800)}:host>.notification-wrapper.error{background-color:var(--color-error-800)}:host>.notification-wrapper.warning{background-color:var(--color-warning-800)}:host>.notification-wrapper.info{background-color:var(--color-weight-500)}:host>.notification-wrapper.visible{opacity:.95;animation:fadeIn .3s .3s backwards}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NotificationComponent, deps: [{ token: LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NotificationComponent, selector: "vdr-notification", host: { listeners: { "click": "onClick()" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }], ngImport: i0, template: "<div [dir]=\"direction$ | async\" class=\"notification-wrapper\" #wrapper [style.top.px]=\"offsetTop\" [ngClass]=\"{\r\n            visible: isVisible,\r\n            info: type === 'info',\r\n            success: type === 'success',\r\n            error: type === 'error',\r\n            warning: type === 'warning'\r\n        }\">\r\n    <clr-icon [attr.shape]=\"getIcon()\" size=\"24\"></clr-icon>\r\n    {{ stringifyMessage(message) | translate: translationVars }}\r\n</div>", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:.95}}:host{position:relative;z-index:1050}:host>.notification-wrapper{display:block;position:fixed;z-index:1001;top:0;right:10px;border-radius:3px;max-width:98vw;word-wrap:break-word;padding:10px;background-color:var(--color-grey-500);color:#fff;transition:opacity 1s,top .3s;opacity:0;white-space:pre-line}:host>.notification-wrapper.success{background-color:var(--color-success-800)}:host>.notification-wrapper.error{background-color:var(--color-error-800)}:host>.notification-wrapper.warning{background-color:var(--color-warning-800)}:host>.notification-wrapper.info{background-color:var(--color-weight-500)}:host>.notification-wrapper.visible{opacity:.95;animation:fadeIn .3s .3s backwards}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-notification', template: "<div\r\n    class=\"notification-wrapper\"\r\n    #wrapper\r\n    [style.top.px]=\"offsetTop\"\r\n    [ngClass]=\"{\r\n        visible: isVisible,\r\n        info: type === 'info',\r\n        success: type === 'success',\r\n        error: type === 'error',\r\n        warning: type === 'warning'\r\n    }\"\r\n>\r\n    <clr-icon [attr.shape]=\"getIcon()\" size=\"24\"></clr-icon>\r\n    {{ stringifyMessage(message) | translate: translationVars }}\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:.95}}:host{position:relative;z-index:1050}:host>.notification-wrapper{display:block;position:fixed;z-index:1001;top:0;right:10px;border-radius:3px;max-width:98vw;word-wrap:break-word;padding:10px;background-color:var(--color-grey-500);color:#fff;transition:opacity 1s,top .3s;opacity:0;white-space:pre-line}:host>.notification-wrapper.success{background-color:var(--color-success-800)}:host>.notification-wrapper.error{background-color:var(--color-error-800)}:host>.notification-wrapper.warning{background-color:var(--color-warning-800)}:host>.notification-wrapper.info{background-color:var(--color-weight-500)}:host>.notification-wrapper.visible{opacity:.95;animation:fadeIn .3s .3s backwards}\n"] }]
-        }], propDecorators: { wrapper: [{
+            args: [{ selector: 'vdr-notification', template: "<div [dir]=\"direction$ | async\" class=\"notification-wrapper\" #wrapper [style.top.px]=\"offsetTop\" [ngClass]=\"{\r\n            visible: isVisible,\r\n            info: type === 'info',\r\n            success: type === 'success',\r\n            error: type === 'error',\r\n            warning: type === 'warning'\r\n        }\">\r\n    <clr-icon [attr.shape]=\"getIcon()\" size=\"24\"></clr-icon>\r\n    {{ stringifyMessage(message) | translate: translationVars }}\r\n</div>", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:.95}}:host{position:relative;z-index:1050}:host>.notification-wrapper{display:block;position:fixed;z-index:1001;top:0;right:10px;border-radius:3px;max-width:98vw;word-wrap:break-word;padding:10px;background-color:var(--color-grey-500);color:#fff;transition:opacity 1s,top .3s;opacity:0;white-space:pre-line}:host>.notification-wrapper.success{background-color:var(--color-success-800)}:host>.notification-wrapper.error{background-color:var(--color-error-800)}:host>.notification-wrapper.warning{background-color:var(--color-warning-800)}:host>.notification-wrapper.info{background-color:var(--color-weight-500)}:host>.notification-wrapper.visible{opacity:.95;animation:fadeIn .3s .3s backwards}\n"] }]
+        }], ctorParameters: function () { return [{ type: LocalizationService }]; }, propDecorators: { wrapper: [{
                 type: ViewChild,
                 args: ['wrapper', { static: true }]
             }], onClick: [{
@@ -10744,7 +10802,12 @@ class BaseCodeEditorFormInputComponent {
             editor.innerHTML = this.highlight(code, this.getErrorPos(this.errorMessage));
         };
         this.jar = CodeJar(this.editorElementRef.nativeElement, highlight);
+        let isFirstUpdate = true;
         this.jar.onUpdate(value => {
+            if (isFirstUpdate) {
+                isFirstUpdate = false;
+                return;
+            }
             this.formControl.setValue(value);
             this.formControl.markAsDirty();
             this.isValid = this.formControl.valid;
@@ -11287,7 +11350,7 @@ class DynamicFormInputComponent {
                 useExisting: DynamicFormInputComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "singleViewContainer", first: true, predicate: ["single"], descendants: true, read: ViewContainerRef }, { propertyName: "listItemContainers", predicate: ["listItem"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!renderAsList; else list\">\r\n    <ng-container #single></ng-container>\r\n</ng-container>\r\n<ng-template #list>\r\n    <div class=\"list-container\" cdkDropList (cdkDropListDropped)=\"moveListItem($event)\">\r\n        <div\r\n            class=\"list-item-row\"\r\n            *ngFor=\"let item of listItems; trackBy: trackById\"\r\n            cdkDrag\r\n            [cdkDragData]=\"item\"\r\n            [cdkDragLockAxis]=\"'y'\"\r\n        >\r\n            <div class=\"flex-spacer pr-2\">\r\n                <ng-container #listItem></ng-container>\r\n            </div>\r\n            <button\r\n                class=\"button-small\"\r\n                *ngIf=\"!readonly\"\r\n                (click)=\"removeListItem(item)\"\r\n                [title]=\"'common.remove-item-from-list' | translate\"\r\n            >\r\n                <clr-icon shape=\"times\"></clr-icon>\r\n            </button>\r\n            <div class=\"drag-handle\" cdkDragHandle [class.hidden]=\"readonly\">\r\n                <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\r\n            </div>\r\n        </div>\r\n        <button class=\"btn btn-secondary btn-sm\" (click)=\"addListItem()\" *ngIf=\"!readonly\">\r\n            <clr-icon shape=\"plus\"></clr-icon> {{ 'common.add-item-to-list' | translate }}\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{flex:1}.list-container{border:1px solid var(--color-component-border-200);border-radius:3px;padding:12px}.list-item-row{font-size:13px;display:flex;align-items:center;margin:3px 0}.drag-placeholder{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{font-size:13px;background-color:var(--color-component-bg-100);opacity:.8;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.drag-handle{cursor:move}.drag-handle.hidden{display:none}.cdk-drag-placeholder{opacity:.1}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .list-item-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "singleViewContainer", first: true, predicate: ["single"], descendants: true, read: ViewContainerRef }, { propertyName: "listItemContainers", predicate: ["listItem"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!renderAsList; else list\">\r\n    <ng-container #single></ng-container>\r\n</ng-container>\r\n<ng-template #list>\r\n    <div class=\"list-container\" cdkDropList (cdkDropListDropped)=\"moveListItem($event)\">\r\n        <div\r\n            class=\"list-item-row\"\r\n            *ngFor=\"let item of listItems; trackBy: trackById\"\r\n            cdkDrag\r\n            [cdkDragData]=\"item\"\r\n            [cdkDragLockAxis]=\"'y'\"\r\n        >\r\n            <div class=\"flex-spacer pr-2\">\r\n                <ng-container #listItem></ng-container>\r\n            </div>\r\n            <button\r\n                class=\"button-small\"\r\n                *ngIf=\"!readonly\"\r\n                (click)=\"removeListItem(item)\"\r\n                [title]=\"'common.remove-item-from-list' | translate\"\r\n            >\r\n                <clr-icon shape=\"times\"></clr-icon>\r\n            </button>\r\n            <div class=\"drag-handle\" cdkDragHandle [class.hidden]=\"readonly\">\r\n                <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\r\n            </div>\r\n        </div>\r\n        <button class=\"btn btn-secondary btn-sm\" (click)=\"addListItem()\" *ngIf=\"!readonly\">\r\n            <clr-icon shape=\"plus\"></clr-icon> {{ 'common.add-item-to-list' | translate }}\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{flex:1}.list-container{border:1px solid var(--color-component-border-200);border-radius:3px;padding:12px}.list-item-row{font-size:13px;display:flex;align-items:center;margin:3px 0}.drag-placeholder{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{font-size:13px;background-color:var(--color-component-bg-100);opacity:.8;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.drag-handle{cursor:move}.drag-handle.hidden{display:none}.cdk-drag-placeholder{opacity:.1}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .list-item-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DynamicFormInputComponent, decorators: [{
             type: Component,
@@ -11768,10 +11831,12 @@ class CustomerGroupFormInputComponent {
             .pipe(startWith([]));
     }
     selectGroup(group) {
-        this.formControl.setValue(group ?? undefined);
+        this.formControl.setValue(group?.id ?? undefined);
     }
     compareWith(o1, o2) {
-        return o1.id === o2.id;
+        const id1 = typeof o1 === 'string' ? o1 : o1.id;
+        const id2 = typeof o2 === 'string' ? o2 : o2.id;
+        return id1 === id2;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CustomerGroupFormInputComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", 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 }); }
@@ -12171,7 +12236,7 @@ class DatetimePickerComponent {
                 useExisting: DatetimePickerComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "dropdownComponent", first: true, predicate: ["dropdownComponent"], descendants: true, static: true }, { propertyName: "datetimeInput", first: true, predicate: ["datetimeInput"], descendants: true, static: true }, { propertyName: "calendarTable", first: true, predicate: ["calendarTable"], descendants: true }], ngImport: i0, template: "<div class=\"input-wrapper\">\r\n    <input\r\n        readonly\r\n        [ngModel]=\"selected$ | async | localeDate : 'medium'\"\r\n        class=\"selected-datetime\"\r\n        (keydown.enter)=\"dropdownComponent.toggleOpen()\"\r\n        (keydown.space)=\"dropdownComponent.toggleOpen()\"\r\n        #datetimeInput\r\n    />\r\n    <button\r\n        class=\"clear-value-button\"\r\n        [class.visible]=\"!disabled && !readonly && (selected$ | async)\"\r\n        (click)=\"clearValue()\"\r\n    >\r\n        <clr-icon shape=\"times\"></clr-icon>\r\n    </button>\r\n</div>\r\n<vdr-dropdown #dropdownComponent>\r\n    <button class=\"calendar-button\" vdrDropdownTrigger [disabled]=\"readonly || disabled\">\r\n        <clr-icon shape=\"calendar\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu>\r\n        <div\r\n            class=\"datetime-picker\"\r\n            *ngIf=\"current$ | async as currentView\"\r\n            (keydown.escape)=\"closeDatepicker()\"\r\n        >\r\n            <div class=\"controls\">\r\n                <div class=\"selects\">\r\n                    <div class=\"month-select\">\r\n                        <select name=\"month\" [ngModel]=\"currentView.month\" (change)=\"setMonth($event)\">\r\n                            <option [value]=\"1\">{{ 'datetime.month-jan' | translate }}</option>\r\n                            <option [value]=\"2\">{{ 'datetime.month-feb' | translate }}</option>\r\n                            <option [value]=\"3\">{{ 'datetime.month-mar' | translate }}</option>\r\n                            <option [value]=\"4\">{{ 'datetime.month-apr' | translate }}</option>\r\n                            <option [value]=\"5\">{{ 'datetime.month-may' | translate }}</option>\r\n                            <option [value]=\"6\">{{ 'datetime.month-jun' | translate }}</option>\r\n                            <option [value]=\"7\">{{ 'datetime.month-jul' | translate }}</option>\r\n                            <option [value]=\"8\">{{ 'datetime.month-aug' | translate }}</option>\r\n                            <option [value]=\"9\">{{ 'datetime.month-sep' | translate }}</option>\r\n                            <option [value]=\"10\">{{ 'datetime.month-oct' | translate }}</option>\r\n                            <option [value]=\"11\">{{ 'datetime.month-nov' | translate }}</option>\r\n                            <option [value]=\"12\">{{ 'datetime.month-dec' | translate }}</option>\r\n                        </select>\r\n                    </div>\r\n                    <div class=\"year-select\">\r\n                        <select name=\"month\" [ngModel]=\"currentView.year\" (change)=\"setYear($event)\">\r\n                            <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\r\n                        </select>\r\n                    </div>\r\n                </div>\r\n                <div class=\"control-buttons\">\r\n                    <button\r\n                        class=\"btn btn-link btn-sm\"\r\n                        (click)=\"prevMonth()\"\r\n                        [title]=\"'common.view-previous-month' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"caret\" dir=\"left\"></clr-icon>\r\n                    </button>\r\n                    <button\r\n                        class=\"btn btn-link btn-sm\"\r\n                        (click)=\"selectToday()\"\r\n                        [title]=\"'common.select-today' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"event\"></clr-icon>\r\n                    </button>\r\n                    <button\r\n                        class=\"btn btn-link btn-sm\"\r\n                        (click)=\"nextMonth()\"\r\n                        [title]=\"'common.view-next-month' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"caret\" dir=\"right\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <table\r\n                class=\"calendar-table\"\r\n                #calendarTable\r\n                tabindex=\"0\"\r\n                (keydown)=\"handleCalendarKeydown($event)\"\r\n            >\r\n                <thead>\r\n                    <tr>\r\n                        <td *ngFor=\"let weekdayName of weekdays\">\r\n                            {{ weekdayName | translate }}\r\n                        </td>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let week of calendarView$ | async\">\r\n                        <td\r\n                            *ngFor=\"let day of week\"\r\n                            class=\"day-cell\"\r\n                            [class.selected]=\"day.selected\"\r\n                            [class.today]=\"day.isToday\"\r\n                            [class.viewing]=\"day.isViewing\"\r\n                            [class.current-month]=\"day.inCurrentMonth\"\r\n                            [class.disabled]=\"day.disabled\"\r\n                            (keydown.enter)=\"selectDay(day)\"\r\n                            (click)=\"selectDay(day)\"\r\n                        >\r\n                            {{ day.dayOfMonth }}\r\n                        </td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n            <div class=\"time-picker\">\r\n                <span class=\"flex-spacer\"> {{ 'datetime.time' | translate }}: </span>\r\n                <select name=\"hour\" [ngModel]=\"selectedHours$ | async\" (change)=\"setHour($event)\">\r\n                    <option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour | number : '2.0-0' }}</option>\r\n                </select>\r\n                <span>:</span>\r\n                <select name=\"hour\" [ngModel]=\"selectedMinutes$ | async\" (change)=\"setMinute($event)\">\r\n                    <option *ngFor=\"let minute of minutes\" [value]=\"minute\">\r\n                        {{ minute | number : '2.0-0' }}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:flex;width:100%}.input-wrapper{flex:1;display:flex}input.selected-datetime{flex:1;border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-inline-end:none!important}button.clear-value-button{margin:0;border-radius:0;border-inline-start:none;border:none;border-top:1px solid var(--color-weight-200);border-bottom:1px solid var(--color-weight-200);border-inline-end:1px solid var(--color-weight-200);background-color:var(--color-button-bg);color:var(--color-text-100);display:none}button.clear-value-button.visible{display:block}button.calendar-button{margin:0;border-top-left-radius:0;border-bottom-left-radius:0;border:1px solid var(--color-weight-200);border-radius:var(--border-radius-sm);border-inline-start:none;height:100%;background-color:var(--color-button-bg);color:var(--color-text-100)}.datetime-picker{margin:0 12px}table.calendar-table{padding:6px}table.calendar-table:focus{outline:1px solid var(--color-primary-500);box-shadow:0 0 1px 2px var(--color-primary-100)}table.calendar-table td{width:24px;text-align:center;border:1px solid transparent;-webkit-user-select:none;user-select:none}table.calendar-table .day-cell{background-color:var(--color-component-bg-200);color:var(--color-text-100);cursor:pointer;transition:background-color .1s}table.calendar-table .day-cell.current-month{background-color:var(--color-weight-100);color:var(--color-text-100)}table.calendar-table .day-cell.selected{background-color:var(--color-primary-500);color:#fff}table.calendar-table .day-cell.viewing:not(.selected){background-color:var(--color-primary-200)}table.calendar-table .day-cell.today{border:1px solid var(--color-component-border-300)}table.calendar-table .day-cell:hover:not(.selected):not(.disabled){background-color:var(--color-primary-100)}table.calendar-table .day-cell.disabled{cursor:default;color:var(--color-text-200)}.selects{display:flex;justify-content:space-between;margin-bottom:12px}.control-buttons{display:flex}.time-picker{display:flex;align-items:baseline;margin-top:12px}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i10.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: 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$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { 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: "16.2.2", ngImport: i0, type: DatetimePickerComponent, decorators: [{
             type: Component,
@@ -12945,11 +13010,11 @@ class ProductMultiSelectorDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductMultiSelectorDialogComponent, deps: [{ token: DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ProductMultiSelectorDialogComponent, selector: "vdr-product-multi-selector-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span *ngIf=\"mode === 'product'\">{{ 'common.select-products' | translate }}</span>\r\n        <span *ngIf=\"mode === 'variant'\">{{ 'common.select-variants' | translate }}</span>\r\n    </div>\r\n</ng-template>\r\n<vdr-product-search-input\r\n    #productSearchInputComponent\r\n    [facetValueResults]=\"facetValues$ | async\"\r\n    (searchTermChange)=\"setSearchTerm($event)\"\r\n    (facetValueChange)=\"setFacetValueIds($event)\"\r\n></vdr-product-search-input>\r\n<div class=\"flex-wrapper\">\r\n    <div class=\"gallery\">\r\n        <div\r\n            class=\"card\"\r\n            *ngFor=\"let item of (items$ | async) || [] | paginate: paginationConfig; trackBy: trackByFn\"\r\n            (click)=\"toggleSelection(item, $event)\"\r\n            [class.selected]=\"isSelected(item)\"\r\n        >\r\n            <div class=\"card-img\">\r\n                <vdr-select-toggle\r\n                    [selected]=\"isSelected(item)\"\r\n                    [disabled]=\"true\"\r\n                    [hiddenWhenOff]=\"true\"\r\n                ></vdr-select-toggle>\r\n                <img\r\n                    [src]=\"\r\n                        (mode === 'product'\r\n                            ? item.productAsset\r\n                            : item.productVariantAsset || item.productAsset\r\n                        ) | assetPreview: 'thumb'\r\n                    \"\r\n                />\r\n            </div>\r\n            <div class=\"detail\">\r\n                <span [title]=\"mode === 'product' ? item.productName : item.productVariantName\">{{\r\n                    mode === 'product' ? item.productName : item.productVariantName\r\n                }}</span>\r\n                <div *ngIf=\"mode === 'variant'\"><small>{{ item.sku }}</small></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"selection\">\r\n        <div class=\"m-2 flex center\">\r\n            <div>\r\n                {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"clearSelection()\">\r\n                <cds-icon shape=\"times\"></cds-icon> {{ 'common.clear-selection' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"selected-items\">\r\n            <div *ngFor=\"let item of selectionManager.selection\" class=\"flex item-row\">\r\n                <div class=\"\">{{ mode === 'product' ? item.productName : item.productVariantName }}</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button class=\"icon-button\" (click)=\"toggleSelection(item, $event)\">\r\n                        <cds-icon shape=\"times\"></cds-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"selectionManager.selection.length === 0\"\r\n    >\r\n        {{ 'common.select-items-with-count' | translate: { count: selectionManager.selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-direction:1;height:70vh}.flex-wrapper{display:flex;overflow-y:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,125px);grid-template-rows:repeat(auto-fill,200px);grid-gap:10px 20px;padding-inline-start:12px;padding-top:12px;padding-bottom:64px;overflow-y:auto}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.detail{margin:0 3px;font-size:12px;line-height:.8rem}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.selection{width:23vw;max-width:400px;padding:6px;display:flex;flex-direction:column}.selection .selected-items{flex:1;overflow-y:auto}.selection .selected-items .item-row{padding-inline-start:3px}.selection .selected-items .item-row:hover{background-color:var(--color-component-bg-200)}.paging-controls{display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1$3.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: ["facetValueResults"], outputs: ["searchTermChange", "facetValueChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ProductMultiSelectorDialogComponent, selector: "vdr-product-multi-selector-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span *ngIf=\"mode === 'product'\">{{ 'common.select-products' | translate }}</span>\r\n        <span *ngIf=\"mode === 'variant'\">{{ 'common.select-variants' | translate }}</span>\r\n    </div>\r\n</ng-template>\r\n<vdr-product-search-input\r\n    #productSearchInputComponent\r\n    [facetValueResults]=\"facetValues$ | async\"\r\n    (searchTermChange)=\"setSearchTerm($event)\"\r\n    (facetValueChange)=\"setFacetValueIds($event)\"\r\n></vdr-product-search-input>\r\n<div class=\"flex-wrapper\">\r\n    <div class=\"gallery\">\r\n        <div\r\n            class=\"card\"\r\n            *ngFor=\"let item of (items$ | async) || [] | paginate: paginationConfig; trackBy: trackByFn\"\r\n            (click)=\"toggleSelection(item, $event)\"\r\n            [class.selected]=\"isSelected(item)\"\r\n        >\r\n            <div class=\"card-img\">\r\n                <vdr-select-toggle\r\n                    [selected]=\"isSelected(item)\"\r\n                    [disabled]=\"true\"\r\n                    [hiddenWhenOff]=\"true\"\r\n                ></vdr-select-toggle>\r\n                <img\r\n                    [src]=\"\r\n                        (mode === 'product'\r\n                            ? item.productAsset\r\n                            : item.productVariantAsset || item.productAsset\r\n                        ) | assetPreview: 'thumb'\r\n                    \"\r\n                />\r\n            </div>\r\n            <div class=\"detail\">\r\n                <span [title]=\"mode === 'product' ? item.productName : item.productVariantName\">{{\r\n                    mode === 'product' ? item.productName : item.productVariantName\r\n                }}</span>\r\n                <div *ngIf=\"mode === 'product'\">\r\n                    <small>\r\n                        <span class=\"mr-1\">{{ 'common.slug' | translate }}:</span>\r\n                        <code>{{ item.slug }}</code>\r\n                    </small>\r\n                </div>\r\n                <div *ngIf=\"mode === 'variant'\"><small>{{ item.sku }}</small></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"selection\">\r\n        <div class=\"m-2 flex center\">\r\n            <div>\r\n                {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"clearSelection()\">\r\n                <cds-icon shape=\"times\"></cds-icon> {{ 'common.clear-selection' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"selected-items\">\r\n            <div *ngFor=\"let item of selectionManager.selection\" class=\"flex item-row\">\r\n                <div class=\"\">{{ mode === 'product' ? item.productName : item.productVariantName }}</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button class=\"icon-button\" (click)=\"toggleSelection(item, $event)\">\r\n                        <cds-icon shape=\"times\"></cds-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"selectionManager.selection.length === 0\"\r\n    >\r\n        {{ 'common.select-items-with-count' | translate: { count: selectionManager.selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-direction:1;height:70vh}.flex-wrapper{display:flex;overflow-y:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,125px);grid-template-rows:repeat(auto-fill,200px);grid-gap:10px 20px;padding-inline-start:12px;padding-top:12px;padding-bottom:64px;overflow-y:auto}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.detail{margin:0 3px;font-size:12px;line-height:.8rem}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.selection{width:23vw;max-width:400px;padding:6px;display:flex;flex-direction:column}.selection .selected-items{flex:1;overflow-y:auto}.selection .selected-items .item-row{padding-inline-start:3px}.selection .selected-items .item-row:hover{background-color:var(--color-component-bg-200)}.paging-controls{display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1$3.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: ["facetValueResults"], outputs: ["searchTermChange", "facetValueChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductMultiSelectorDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-product-multi-selector-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span *ngIf=\"mode === 'product'\">{{ 'common.select-products' | translate }}</span>\r\n        <span *ngIf=\"mode === 'variant'\">{{ 'common.select-variants' | translate }}</span>\r\n    </div>\r\n</ng-template>\r\n<vdr-product-search-input\r\n    #productSearchInputComponent\r\n    [facetValueResults]=\"facetValues$ | async\"\r\n    (searchTermChange)=\"setSearchTerm($event)\"\r\n    (facetValueChange)=\"setFacetValueIds($event)\"\r\n></vdr-product-search-input>\r\n<div class=\"flex-wrapper\">\r\n    <div class=\"gallery\">\r\n        <div\r\n            class=\"card\"\r\n            *ngFor=\"let item of (items$ | async) || [] | paginate: paginationConfig; trackBy: trackByFn\"\r\n            (click)=\"toggleSelection(item, $event)\"\r\n            [class.selected]=\"isSelected(item)\"\r\n        >\r\n            <div class=\"card-img\">\r\n                <vdr-select-toggle\r\n                    [selected]=\"isSelected(item)\"\r\n                    [disabled]=\"true\"\r\n                    [hiddenWhenOff]=\"true\"\r\n                ></vdr-select-toggle>\r\n                <img\r\n                    [src]=\"\r\n                        (mode === 'product'\r\n                            ? item.productAsset\r\n                            : item.productVariantAsset || item.productAsset\r\n                        ) | assetPreview: 'thumb'\r\n                    \"\r\n                />\r\n            </div>\r\n            <div class=\"detail\">\r\n                <span [title]=\"mode === 'product' ? item.productName : item.productVariantName\">{{\r\n                    mode === 'product' ? item.productName : item.productVariantName\r\n                }}</span>\r\n                <div *ngIf=\"mode === 'variant'\"><small>{{ item.sku }}</small></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"selection\">\r\n        <div class=\"m-2 flex center\">\r\n            <div>\r\n                {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"clearSelection()\">\r\n                <cds-icon shape=\"times\"></cds-icon> {{ 'common.clear-selection' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"selected-items\">\r\n            <div *ngFor=\"let item of selectionManager.selection\" class=\"flex item-row\">\r\n                <div class=\"\">{{ mode === 'product' ? item.productName : item.productVariantName }}</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button class=\"icon-button\" (click)=\"toggleSelection(item, $event)\">\r\n                        <cds-icon shape=\"times\"></cds-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"selectionManager.selection.length === 0\"\r\n    >\r\n        {{ 'common.select-items-with-count' | translate: { count: selectionManager.selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-direction:1;height:70vh}.flex-wrapper{display:flex;overflow-y:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,125px);grid-template-rows:repeat(auto-fill,200px);grid-gap:10px 20px;padding-inline-start:12px;padding-top:12px;padding-bottom:64px;overflow-y:auto}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.detail{margin:0 3px;font-size:12px;line-height:.8rem}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.selection{width:23vw;max-width:400px;padding:6px;display:flex;flex-direction:column}.selection .selected-items{flex:1;overflow-y:auto}.selection .selected-items .item-row{padding-inline-start:3px}.selection .selected-items .item-row:hover{background-color:var(--color-component-bg-200)}.paging-controls{display:flex;align-items:center;justify-content:space-between}\n"] }]
+            args: [{ selector: 'vdr-product-multi-selector-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span *ngIf=\"mode === 'product'\">{{ 'common.select-products' | translate }}</span>\r\n        <span *ngIf=\"mode === 'variant'\">{{ 'common.select-variants' | translate }}</span>\r\n    </div>\r\n</ng-template>\r\n<vdr-product-search-input\r\n    #productSearchInputComponent\r\n    [facetValueResults]=\"facetValues$ | async\"\r\n    (searchTermChange)=\"setSearchTerm($event)\"\r\n    (facetValueChange)=\"setFacetValueIds($event)\"\r\n></vdr-product-search-input>\r\n<div class=\"flex-wrapper\">\r\n    <div class=\"gallery\">\r\n        <div\r\n            class=\"card\"\r\n            *ngFor=\"let item of (items$ | async) || [] | paginate: paginationConfig; trackBy: trackByFn\"\r\n            (click)=\"toggleSelection(item, $event)\"\r\n            [class.selected]=\"isSelected(item)\"\r\n        >\r\n            <div class=\"card-img\">\r\n                <vdr-select-toggle\r\n                    [selected]=\"isSelected(item)\"\r\n                    [disabled]=\"true\"\r\n                    [hiddenWhenOff]=\"true\"\r\n                ></vdr-select-toggle>\r\n                <img\r\n                    [src]=\"\r\n                        (mode === 'product'\r\n                            ? item.productAsset\r\n                            : item.productVariantAsset || item.productAsset\r\n                        ) | assetPreview: 'thumb'\r\n                    \"\r\n                />\r\n            </div>\r\n            <div class=\"detail\">\r\n                <span [title]=\"mode === 'product' ? item.productName : item.productVariantName\">{{\r\n                    mode === 'product' ? item.productName : item.productVariantName\r\n                }}</span>\r\n                <div *ngIf=\"mode === 'product'\">\r\n                    <small>\r\n                        <span class=\"mr-1\">{{ 'common.slug' | translate }}:</span>\r\n                        <code>{{ item.slug }}</code>\r\n                    </small>\r\n                </div>\r\n                <div *ngIf=\"mode === 'variant'\"><small>{{ item.sku }}</small></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"selection\">\r\n        <div class=\"m-2 flex center\">\r\n            <div>\r\n                {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"clearSelection()\">\r\n                <cds-icon shape=\"times\"></cds-icon> {{ 'common.clear-selection' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"selected-items\">\r\n            <div *ngFor=\"let item of selectionManager.selection\" class=\"flex item-row\">\r\n                <div class=\"\">{{ mode === 'product' ? item.productName : item.productVariantName }}</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button class=\"icon-button\" (click)=\"toggleSelection(item, $event)\">\r\n                        <cds-icon shape=\"times\"></cds-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"selectionManager.selection.length === 0\"\r\n    >\r\n        {{ 'common.select-items-with-count' | translate: { count: selectionManager.selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-direction:1;height:70vh}.flex-wrapper{display:flex;overflow-y:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,125px);grid-template-rows:repeat(auto-fill,200px);grid-gap:10px 20px;padding-inline-start:12px;padding-top:12px;padding-bottom:64px;overflow-y:auto}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.detail{margin:0 3px;font-size:12px;line-height:.8rem}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.selection{width:23vw;max-width:400px;padding:6px;display:flex;flex-direction:column}.selection .selected-items{flex:1;overflow-y:auto}.selection .selected-items .item-row{padding-inline-start:3px}.selection .selected-items .item-row:hover{background-color:var(--color-component-bg-200)}.paging-controls{display:flex;align-items:center;justify-content:space-between}\n"] }]
         }], ctorParameters: function () { return [{ type: DataService }, { type: i0.ChangeDetectorRef }]; } });
 
 class ProductMultiSelectorFormInputComponent {
@@ -13369,7 +13434,7 @@ class FocalPointControlComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FocalPointControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: { visible: "visible", editable: "editable", width: "width", height: "height", fpx: "fpx", fpy: "fpy" }, outputs: { focalPointChange: "focalPointChange" }, host: { properties: { "style.width.px": "this.width", "style.height.px": "this.height" } }, viewQueries: [{ propertyName: "frame", first: true, predicate: ["frame"], descendants: true, static: true }, { propertyName: "dot", first: true, predicate: ["dot"], descendants: true, static: true }], ngImport: i0, template: "<ng-content></ng-content>\r\n<div class=\"frame\" #frame [style.width.px]=\"width\" [style.height.px]=\"height\">\r\n    <div\r\n        #dot\r\n        class=\"dot\"\r\n        [class.visible]=\"visible\"\r\n        [class.editable]=\"editable\"\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"!editable\"\r\n        cdkDragBoundary=\".frame\"\r\n        (cdkDragEnded)=\"onDragEnded($event)\"\r\n        [cdkDragFreeDragPosition]=\"initialPosition\"\r\n    ></div>\r\n</div>\r\n", styles: [":host{position:relative;display:block}.frame{position:absolute;top:0}.dot{width:20px;height:20px;border-radius:50%;border:2px solid white;position:absolute;visibility:hidden;transition:opacity .3s;box-shadow:0 0 4px 4px #0000006b}.dot.visible{visibility:visible;opacity:.7}.dot.editable{cursor:move;visibility:visible;opacity:1;animation:pulse;animation-duration:.5s;animation-iteration-count:4}@keyframes pulse{0%{border-color:#fff}50%{border-color:var(--color-warning-500)}to{border-color:#fff}}\n"], dependencies: [{ kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: { visible: "visible", editable: "editable", width: "width", height: "height", fpx: "fpx", fpy: "fpy" }, outputs: { focalPointChange: "focalPointChange" }, host: { properties: { "style.width.px": "this.width", "style.height.px": "this.height" } }, viewQueries: [{ propertyName: "frame", first: true, predicate: ["frame"], descendants: true, static: true }, { propertyName: "dot", first: true, predicate: ["dot"], descendants: true, static: true }], ngImport: i0, template: "<ng-content></ng-content>\r\n<div class=\"frame\" #frame [style.width.px]=\"width\" [style.height.px]=\"height\">\r\n    <div\r\n        #dot\r\n        class=\"dot\"\r\n        [class.visible]=\"visible\"\r\n        [class.editable]=\"editable\"\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"!editable\"\r\n        cdkDragBoundary=\".frame\"\r\n        (cdkDragEnded)=\"onDragEnded($event)\"\r\n        [cdkDragFreeDragPosition]=\"initialPosition\"\r\n    ></div>\r\n</div>\r\n", styles: [":host{position:relative;display:block}.frame{position:absolute;top:0}.dot{width:20px;height:20px;border-radius:50%;border:2px solid white;position:absolute;visibility:hidden;transition:opacity .3s;box-shadow:0 0 4px 4px #0000006b}.dot.visible{visibility:visible;opacity:.7}.dot.editable{cursor:move;visibility:visible;opacity:1;animation:pulse;animation-duration:.5s;animation-iteration-count:4}@keyframes pulse{0%{border-color:#fff}50%{border-color:var(--color-warning-500)}to{border-color:#fff}}\n"], dependencies: [{ kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FocalPointControlComponent, decorators: [{
             type: Component,
@@ -13676,11 +13741,11 @@ class TabbedCustomFieldsComponent {
             .map(([tabName, customFields]) => ({ tabName, customFields }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: TabbedCustomFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: { entityName: "entityName", customFields: "customFields", customFieldsFormGroup: "customFieldsFormGroup", readonly: "readonly", compact: "compact", showLabel: "showLabel" }, ngImport: i0, template: "<ng-container *ngIf=\"1 < tabbedCustomFields.length; else singleGroup\">\r\n    <clr-tabs>\r\n        <clr-tab *ngFor=\"let group of tabbedCustomFields\">\r\n            <button clrTabLink>\r\n                {{\r\n                    group.tabName === defaultTabName\r\n                        ? ('common.general' | translate)\r\n                        : (group.tabName | translate)\r\n                }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive>\r\n                <div class=\"mt-2 form-grid\">\r\n                    <ng-container *ngFor=\"let customField of group.customFields\">\r\n                        <vdr-custom-field-control\r\n                            *ngIf=\"customFieldIsSet(customField.name)\"\r\n                            [entityName]=\"entityName\"\r\n                            [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                            [customField]=\"customField\"\r\n                            [readonly]=\"readonly\"\r\n                            [compact]=\"compact\"\r\n                            [showLabel]=\"showLabel\"\r\n                        ></vdr-custom-field-control>\r\n                    </ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n    </clr-tabs>\r\n</ng-container>\r\n<ng-template #singleGroup>\r\n    <div class=\"form-grid\">\r\n        <ng-container *ngFor=\"let customField of tabbedCustomFields[0]?.customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                [entityName]=\"entityName\"\r\n                [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                [customField]=\"customField\"\r\n                [readonly]=\"readonly\"\r\n                [compact]=\"compact\"\r\n                [showLabel]=\"showLabel\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}::ng-deep clr-tabs .btn.btn-link{box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }, { kind: "component", type: i1$3.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { kind: "component", type: i1$3.ClrTab, selector: "clr-tab" }, { kind: "component", type: i1$3.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { kind: "directive", type: i1$3.ClrTabLink, selector: "[clrTabLink]", inputs: ["id", "clrTabLinkInOverflow"] }, { kind: "directive", type: i1$3.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { kind: "directive", type: i1$3.ÇlrActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: { entityName: "entityName", customFields: "customFields", customFieldsFormGroup: "customFieldsFormGroup", readonly: "readonly", compact: "compact", showLabel: "showLabel" }, ngImport: i0, template: "<ng-container *ngIf=\"1 < tabbedCustomFields.length; else singleGroup\">\r\n    <clr-tabs>\r\n        <clr-tab *ngFor=\"let group of tabbedCustomFields\">\r\n            <button clrTabLink>\r\n                {{\r\n                    group.tabName === defaultTabName\r\n                        ? ('common.general' | translate)\r\n                        : (group.tabName | translate)\r\n                }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive>\r\n                <div class=\"mt-2 form-grid\">\r\n                    <ng-container *ngFor=\"let customField of group.customFields\">\r\n                        <vdr-custom-field-control\r\n                            *ngIf=\"customFieldIsSet(customField.name)\"\r\n                            [entityName]=\"entityName\"\r\n                            [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                            [customField]=\"customField\"\r\n                            [readonly]=\"readonly\"\r\n                            [compact]=\"compact\"\r\n                            [showLabel]=\"showLabel\"\r\n                        ></vdr-custom-field-control>\r\n                    </ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n    </clr-tabs>\r\n</ng-container>\r\n<ng-template #singleGroup>\r\n    <div class=\"form-grid\">\r\n        <ng-container *ngFor=\"let customField of tabbedCustomFields[0]?.customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                [entityName]=\"entityName\"\r\n                [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                [customField]=\"customField\"\r\n                [readonly]=\"readonly\"\r\n                [compact]=\"compact\"\r\n                [showLabel]=\"showLabel\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }, { kind: "component", type: i1$3.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { kind: "component", type: i1$3.ClrTab, selector: "clr-tab" }, { kind: "component", type: i1$3.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { kind: "directive", type: i1$3.ClrTabLink, selector: "[clrTabLink]", inputs: ["id", "clrTabLinkInOverflow"] }, { kind: "directive", type: i1$3.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { kind: "directive", type: i1$3.ÇlrActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: TabbedCustomFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-tabbed-custom-fields', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"1 < tabbedCustomFields.length; else singleGroup\">\r\n    <clr-tabs>\r\n        <clr-tab *ngFor=\"let group of tabbedCustomFields\">\r\n            <button clrTabLink>\r\n                {{\r\n                    group.tabName === defaultTabName\r\n                        ? ('common.general' | translate)\r\n                        : (group.tabName | translate)\r\n                }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive>\r\n                <div class=\"mt-2 form-grid\">\r\n                    <ng-container *ngFor=\"let customField of group.customFields\">\r\n                        <vdr-custom-field-control\r\n                            *ngIf=\"customFieldIsSet(customField.name)\"\r\n                            [entityName]=\"entityName\"\r\n                            [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                            [customField]=\"customField\"\r\n                            [readonly]=\"readonly\"\r\n                            [compact]=\"compact\"\r\n                            [showLabel]=\"showLabel\"\r\n                        ></vdr-custom-field-control>\r\n                    </ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n    </clr-tabs>\r\n</ng-container>\r\n<ng-template #singleGroup>\r\n    <div class=\"form-grid\">\r\n        <ng-container *ngFor=\"let customField of tabbedCustomFields[0]?.customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                [entityName]=\"entityName\"\r\n                [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                [customField]=\"customField\"\r\n                [readonly]=\"readonly\"\r\n                [compact]=\"compact\"\r\n                [showLabel]=\"showLabel\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}::ng-deep clr-tabs .btn.btn-link{box-shadow:none}\n"] }]
+            args: [{ selector: 'vdr-tabbed-custom-fields', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"1 < tabbedCustomFields.length; else singleGroup\">\r\n    <clr-tabs>\r\n        <clr-tab *ngFor=\"let group of tabbedCustomFields\">\r\n            <button clrTabLink>\r\n                {{\r\n                    group.tabName === defaultTabName\r\n                        ? ('common.general' | translate)\r\n                        : (group.tabName | translate)\r\n                }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive>\r\n                <div class=\"mt-2 form-grid\">\r\n                    <ng-container *ngFor=\"let customField of group.customFields\">\r\n                        <vdr-custom-field-control\r\n                            *ngIf=\"customFieldIsSet(customField.name)\"\r\n                            [entityName]=\"entityName\"\r\n                            [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                            [customField]=\"customField\"\r\n                            [readonly]=\"readonly\"\r\n                            [compact]=\"compact\"\r\n                            [showLabel]=\"showLabel\"\r\n                        ></vdr-custom-field-control>\r\n                    </ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n    </clr-tabs>\r\n</ng-container>\r\n<ng-template #singleGroup>\r\n    <div class=\"form-grid\">\r\n        <ng-container *ngFor=\"let customField of tabbedCustomFields[0]?.customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                [entityName]=\"entityName\"\r\n                [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                [customField]=\"customField\"\r\n                [readonly]=\"readonly\"\r\n                [compact]=\"compact\"\r\n                [showLabel]=\"showLabel\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}\n"] }]
         }], propDecorators: { entityName: [{
                 type: Input
             }], customFields: [{
@@ -14704,7 +14769,7 @@ class ObjectTreeComponent {
         return Object.entries(inputValue).map(([key, value]) => ({ key, value }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ObjectTreeComponent, deps: [{ token: ObjectTreeComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: { value: "value", isArrayItem: "isArrayItem" }, usesOnChanges: true, ngImport: i0, template: "<button class=\"icon-button\" (click)=\"expanded = !expanded\" *ngIf=\"depth !== 0 && !isArrayItem\">\r\n    <clr-icon shape=\"caret\" size=\"12\" [dir]=\"expanded ? 'down' : 'right'\"></clr-icon>\r\n</button>\r\n<ul\r\n    class=\"object-tree-node\"\r\n    [ngClass]=\"'depth-' + depth\"\r\n    [class.array-value]=\"valueIsArray\"\r\n    [class.array-item]=\"isArrayItem\"\r\n    [class.expanded]=\"expanded\"\r\n>\r\n    <li *ngFor=\"let entry of entries\">\r\n        <span class=\"key\" *ngIf=\"entry.key\">{{ entry.key }}:</span>\r\n        <ng-container *ngIf=\"isObject(entry.value); else primitive\">\r\n            <vdr-object-tree [value]=\"entry.value\" [isArrayItem]=\"valueIsArray\"></vdr-object-tree>\r\n        </ng-container>\r\n        <ng-template #primitive>\r\n            {{ entry.value }}\r\n        </ng-template>\r\n    </li>\r\n</ul>\r\n", styles: [".object-tree-node{list-style-type:none;line-height:16px;font-size:12px;overflow:hidden;max-height:0}.object-tree-node.depth-0{margin-inline-start:0;margin-top:8px}.object-tree-node.depth-1,.object-tree-node.depth-2,.object-tree-node.depth-3,.object-tree-node.depth-4,.object-tree-node.depth-5,.object-tree-node.depth-6{margin-inline-start:6px}.object-tree-node.expanded{max-height:5000px}.object-tree-node.array-item{margin-top:-16px;margin-inline-start:16px}.object-tree-node.array-value.expanded>li+li{margin-top:6px}.key{color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: { value: "value", isArrayItem: "isArrayItem" }, usesOnChanges: true, ngImport: i0, template: "<button class=\"icon-button\" (click)=\"expanded = !expanded\" *ngIf=\"depth !== 0 && !isArrayItem\">\r\n    <clr-icon shape=\"caret\" size=\"12\" [dir]=\"expanded ? 'down' : 'right'\"></clr-icon>\r\n</button>\r\n<ul\r\n    class=\"object-tree-node\"\r\n    [ngClass]=\"'depth-' + depth\"\r\n    [class.array-value]=\"valueIsArray\"\r\n    [class.array-item]=\"isArrayItem\"\r\n    [class.expanded]=\"expanded\"\r\n>\r\n    <li *ngFor=\"let entry of entries\">\r\n        <span class=\"key\" *ngIf=\"entry.key\">{{ entry.key }}:</span>\r\n        <ng-container *ngIf=\"isObject(entry.value); else primitive\">\r\n            <vdr-object-tree [value]=\"entry.value\" [isArrayItem]=\"valueIsArray\"></vdr-object-tree>\r\n        </ng-container>\r\n        <ng-template #primitive>\r\n            {{ entry.value }}\r\n        </ng-template>\r\n    </li>\r\n</ul>\r\n", styles: [".object-tree-node{list-style-type:none;line-height:16px;font-size:12px;overflow:hidden;max-height:0}.object-tree-node.depth-0{margin-inline-start:0;margin-top:8px}.object-tree-node.depth-1,.object-tree-node.depth-2,.object-tree-node.depth-3,.object-tree-node.depth-4,.object-tree-node.depth-5,.object-tree-node.depth-6{margin-inline-start:6px}.object-tree-node.expanded{max-height:5000px}.object-tree-node.array-item{margin-top:-16px;margin-inline-start:16px}.object-tree-node.array-value.expanded>li+li{margin-top:6px}.key{color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ObjectTreeComponent, decorators: [{
             type: Component,
@@ -17570,7 +17635,7 @@ class DataTableColumnPickerComponent {
         this.resetColumns.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableColumnPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: { columns: "columns", uiLanguage: "uiLanguage" }, outputs: { reorder: "reorder", resetColumns: "resetColumns" }, ngImport: i0, template: "<vdr-dropdown [manualToggle]=\"true\">\r\n    <button class=\"button-small\" vdrDropdownTrigger [title]=\"'common.select-table-columns' | translate\">\r\n        <clr-icon shape=\"view-columns\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n            <div\r\n                *ngFor=\"let column of columns; index as i\"\r\n                class=\"mx-2 column-list\"\r\n                cdkDrag\r\n                cdkDragLockAxis=\"y\"\r\n                [cdkDragData]=\"column\"\r\n            >\r\n                <div cdkDragHandle class=\"drag-handle\" [cdkDragHandleDisabled]=\"column.orderable === false\">\r\n                    <clr-icon shape=\"drag-handle\"></clr-icon>\r\n                </div>\r\n                <label class=\"flex\">\r\n                    <clr-checkbox-container>\r\n                        <clr-checkbox-wrapper>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                clrCheckbox\r\n                                [disabled]=\"column.optional === false\"\r\n                                [indeterminate]=\"column.optional === false\"\r\n                                [checked]=\"column.visible\"\r\n                                (change)=\"toggleColumn(column)\"\r\n                                class=\"mr-1\"\r\n                            />\r\n                            <label>{{ column.heading | translate }}</label>\r\n                        </clr-checkbox-wrapper>\r\n                    </clr-checkbox-container>\r\n                </label>\r\n            </div>\r\n        </div>\r\n        <div class=\"mt-1 pt-1 mx-1 flex center reset-button\">\r\n            <button class=\"button-small\" (click)=\"reset()\">\r\n                <span>{{ 'common.reset-columns' | translate }}</span>\r\n                <clr-icon shape=\"history\"></clr-icon>\r\n            </button>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".column-list{display:flex;align-items:center}.drag-handle{cursor:grab;margin-top:-4px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.reset-button{border-top:1px solid var(--color-weight-125)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1$3.ClrCheckboxContainer, selector: "clr-checkbox-container,clr-toggle-container", inputs: ["clrInline"] }, { kind: "component", type: i1$3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: { columns: "columns", uiLanguage: "uiLanguage" }, outputs: { reorder: "reorder", resetColumns: "resetColumns" }, ngImport: i0, template: "<vdr-dropdown [manualToggle]=\"true\">\r\n    <button class=\"button-small\" vdrDropdownTrigger [title]=\"'common.select-table-columns' | translate\">\r\n        <clr-icon shape=\"view-columns\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n            <div\r\n                *ngFor=\"let column of columns; index as i\"\r\n                class=\"mx-2 column-list\"\r\n                cdkDrag\r\n                cdkDragLockAxis=\"y\"\r\n                [cdkDragData]=\"column\"\r\n            >\r\n                <div cdkDragHandle class=\"drag-handle\" [cdkDragHandleDisabled]=\"column.orderable === false\">\r\n                    <clr-icon shape=\"drag-handle\"></clr-icon>\r\n                </div>\r\n                <label class=\"flex\">\r\n                    <clr-checkbox-container>\r\n                        <clr-checkbox-wrapper>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                clrCheckbox\r\n                                [disabled]=\"column.optional === false\"\r\n                                [indeterminate]=\"column.optional === false\"\r\n                                [checked]=\"column.visible\"\r\n                                (change)=\"toggleColumn(column)\"\r\n                                class=\"mr-1\"\r\n                            />\r\n                            <label>{{ column.heading | translate }}</label>\r\n                        </clr-checkbox-wrapper>\r\n                    </clr-checkbox-container>\r\n                </label>\r\n            </div>\r\n        </div>\r\n        <div class=\"mt-1 pt-1 mx-1 flex center reset-button\">\r\n            <button class=\"button-small\" (click)=\"reset()\">\r\n                <span>{{ 'common.reset-columns' | translate }}</span>\r\n                <clr-icon shape=\"history\"></clr-icon>\r\n            </button>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".column-list{display:flex;align-items:center}.drag-handle{cursor:grab;margin-top:-4px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.reset-button{border-top:1px solid var(--color-weight-125)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1$3.ClrCheckboxContainer, selector: "clr-checkbox-container,clr-toggle-container", inputs: ["clrInline"] }, { kind: "component", type: i1$3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableColumnPickerComponent, decorators: [{
             type: Component,
@@ -17648,7 +17713,7 @@ class DataTableFilterPresetsComponent {
         this.filterPresetService.reorderPresets(this.dataTableId, event.previousIndex, event.currentIndex);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableFilterPresetsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: FilterPresetService }, { token: ModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: { dataTableId: "dataTableId", filters: "filters" }, ngImport: i0, template: "<ng-container *ngIf=\"filterPresets$ | async as filterPresets\">\r\n    <div\r\n        class=\"preset-tabs\"\r\n        *ngIf=\"filters && filterPresets.length\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"horizontal\"\r\n        (cdkDropListDropped)=\"drop($event)\"\r\n    >\r\n        <div\r\n            *ngFor=\"let preset of filterPresets\"\r\n            class=\"preset-tab\"\r\n            [class.active]=\"preset.value === serializedActiveFilters\"\r\n            cdkDrag\r\n            cdkDragBoundary=\".preset-tabs\"\r\n            cdkDragLockAxis=\"x\"\r\n        >\r\n            <div class=\"drag-handle\" cdkDragHandle>\r\n                <clr-icon shape=\"drag-handle\"></clr-icon>\r\n            </div>\r\n            <a\r\n                [routerLink]=\"['./']\"\r\n                [queryParams]=\"preset.value === serializedActiveFilters ? {} : { filters: preset.value, page: 1 }\"\r\n            >\r\n                <div>{{ preset.name }}</div>\r\n            </a>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"/>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                    <button vdrDropdownItem (click)=\"renameFilterPreset(preset.name)\">\r\n                        <clr-icon shape=\"edit\"></clr-icon>\r\n                        {{ 'common.rename-filter-preset' | translate }}\r\n                    </button>\r\n                    <button vdrDropdownItem (click)=\"deleteFilterPreset(preset.name)\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [".preset-tabs{padding-inline-start:var(--surface-margin-left);margin:var(--space-unit) 0;gap:calc(var(--space-unit) * .5);display:flex;overflow-x:auto;overflow-y:hidden}.preset-tab{display:flex;align-items:center;gap:calc(var(--space-unit) * .5);font-size:var(--font-size-sm);white-space:nowrap;text-transform:none;padding:0 calc(var(--space-unit) * 1);border:1px solid var(--color-weight-300);border-radius:var(--border-radius-lg);cursor:pointer}.preset-tab>a{padding-inline-end:0;color:var(--color-weight-600)}.preset-tab.active{border-color:var(--color-primary-700);background-color:var(--color-primary-700);color:var(--color-primary-100)}.preset-tab.active>a{color:var(--color-primary-100)}.preset-tab.active button.icon-button{color:var(--color-primary-100)}.preset-tab-link{display:flex;align-items:center;gap:calc(var(--space-unit) * .5)}.drag-handle{cursor:move}.cdk-drag-preview{box-sizing:border-box;opacity:.8;background:var(--color-weight-100);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.preset-tabs.cdk-drop-list-dragging .preset-tab:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: { dataTableId: "dataTableId", filters: "filters" }, ngImport: i0, template: "<ng-container *ngIf=\"filterPresets$ | async as filterPresets\">\r\n    <div\r\n        class=\"preset-tabs\"\r\n        *ngIf=\"filters && filterPresets.length\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"horizontal\"\r\n        (cdkDropListDropped)=\"drop($event)\"\r\n    >\r\n        <div\r\n            *ngFor=\"let preset of filterPresets\"\r\n            class=\"preset-tab\"\r\n            [class.active]=\"preset.value === serializedActiveFilters\"\r\n            cdkDrag\r\n            cdkDragBoundary=\".preset-tabs\"\r\n            cdkDragLockAxis=\"x\"\r\n        >\r\n            <div class=\"drag-handle\" cdkDragHandle>\r\n                <clr-icon shape=\"drag-handle\"></clr-icon>\r\n            </div>\r\n            <a\r\n                [routerLink]=\"['./']\"\r\n                [queryParams]=\"preset.value === serializedActiveFilters ? {} : { filters: preset.value, page: 1 }\"\r\n            >\r\n                <div>{{ preset.name }}</div>\r\n            </a>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"/>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                    <button vdrDropdownItem (click)=\"renameFilterPreset(preset.name)\">\r\n                        <clr-icon shape=\"edit\"></clr-icon>\r\n                        {{ 'common.rename-filter-preset' | translate }}\r\n                    </button>\r\n                    <button vdrDropdownItem (click)=\"deleteFilterPreset(preset.name)\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n", styles: [".preset-tabs{padding-inline-start:var(--surface-margin-left);margin:var(--space-unit) 0;gap:calc(var(--space-unit) * .5);display:flex;overflow-x:auto;overflow-y:hidden}.preset-tab{display:flex;align-items:center;gap:calc(var(--space-unit) * .5);font-size:var(--font-size-sm);white-space:nowrap;text-transform:none;padding:0 calc(var(--space-unit) * 1);border:1px solid var(--color-weight-300);border-radius:var(--border-radius-lg);cursor:pointer}.preset-tab>a{padding-inline-end:0;color:var(--color-weight-600)}.preset-tab.active{border-color:var(--color-primary-700);background-color:var(--color-primary-700);color:var(--color-primary-100)}.preset-tab.active>a{color:var(--color-primary-100)}.preset-tab.active button.icon-button{color:var(--color-primary-100)}.preset-tab-link{display:flex;align-items:center;gap:calc(var(--space-unit) * .5)}.drag-handle{cursor:move}.cdk-drag-preview{box-sizing:border-box;opacity:.8;background:var(--color-weight-100);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.preset-tabs.cdk-drop-list-dragging .preset-tab:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableFilterPresetsComponent, decorators: [{
             type: Component,
@@ -18211,168 +18276,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
             args: [{ selector: 'vdr-edit-note-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.edit-note' | translate }}\r\n</ng-template>\r\n\r\n<textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n<div class=\"visibility-select\" *ngIf=\"displayPrivacyControls\">\r\n    <clr-checkbox-wrapper>\r\n        <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n        <label>{{ 'order.note-is-private' | translate }}</label>\r\n    </clr-checkbox-wrapper>\r\n    <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n        {{ 'order.note-only-visible-to-administrators' | translate }}\r\n    </span>\r\n    <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n        {{ 'order.note-visible-to-customer' | translate }}\r\n    </span>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"note.length === 0\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-500)}.visibility-select .private{color:var(--color-success-500)}textarea.note{width:100%;height:72px;border-radius:3px;margin-inline-end:6px}\n"] }]
         }] });
 
-class ExtensionHostService {
-    constructor(dataService, notificationService) {
-        this.dataService = dataService;
-        this.notificationService = notificationService;
-        this.cancellationMessage$ = new Subject();
-        this.destroyMessage$ = new Subject();
-        this.handleMessage = (message) => {
-            const { data, origin } = message;
-            if (this.isExtensionMessage(data)) {
-                const cancellation$ = this.cancellationMessage$.pipe(filter(requestId => requestId === data.requestId));
-                const end$ = merge(cancellation$, this.destroyMessage$);
-                switch (data.type) {
-                    case 'cancellation': {
-                        this.cancellationMessage$.next(data.requestId);
-                        break;
-                    }
-                    case 'destroy': {
-                        this.destroyMessage$.next();
-                        break;
-                    }
-                    case 'active-route': {
-                        const routeData = {
-                            url: window.location.href,
-                            origin: window.location.origin,
-                            pathname: window.location.pathname,
-                            params: this.routeSnapshot.params,
-                            queryParams: this.routeSnapshot.queryParams,
-                            fragment: this.routeSnapshot.fragment,
-                        };
-                        this.sendMessage({ data: routeData, error: false, complete: false, requestId: data.requestId }, origin);
-                        this.sendMessage({ data: null, error: false, complete: true, requestId: data.requestId }, origin);
-                        break;
-                    }
-                    case 'graphql-query': {
-                        const { document, variables, fetchPolicy } = data.data;
-                        this.dataService
-                            .query(parse(document), variables, fetchPolicy)
-                            .stream$.pipe(takeUntil(end$))
-                            .subscribe(this.createObserver(data.requestId, origin));
-                        break;
-                    }
-                    case 'graphql-mutation': {
-                        const { document, variables } = data.data;
-                        this.dataService
-                            .mutate(parse(document), variables)
-                            .pipe(takeUntil(end$))
-                            .subscribe(this.createObserver(data.requestId, origin));
-                        break;
-                    }
-                    case 'notification': {
-                        this.notificationService.notify(data.data);
-                        break;
-                    }
-                    default:
-                        assertNever(data);
-                }
-            }
-        };
-    }
-    init(extensionWindow, routeSnapshot) {
-        this.extensionWindow = extensionWindow;
-        this.routeSnapshot = routeSnapshot;
-        window.addEventListener('message', this.handleMessage);
-    }
-    destroy() {
-        window.removeEventListener('message', this.handleMessage);
-        this.destroyMessage$.next();
-    }
-    ngOnDestroy() {
-        this.destroy();
-    }
-    createObserver(requestId, origin) {
-        return {
-            next: data => this.sendMessage({ data, error: false, complete: false, requestId }, origin),
-            error: err => this.sendMessage({ data: err, error: true, complete: false, requestId }, origin),
-            complete: () => this.sendMessage({ data: null, error: false, complete: true, requestId }, origin),
-        };
-    }
-    sendMessage(response, origin) {
-        this.extensionWindow.postMessage(response, origin);
-    }
-    isExtensionMessage(input) {
-        return (input.hasOwnProperty('type') && input.hasOwnProperty('data') && input.hasOwnProperty('requestId'));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ExtensionHostService, deps: [{ token: DataService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ExtensionHostService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ExtensionHostService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: DataService }, { type: NotificationService }]; } });
-
-/**
- * This component uses an iframe to embed an external url into the Admin UI, and uses the PostMessage
- * protocol to allow cross-frame communication between the two frames.
- */
-class ExtensionHostComponent {
-    constructor(route, sanitizer, extensionHostService) {
-        this.route = route;
-        this.sanitizer = sanitizer;
-        this.extensionHostService = extensionHostService;
-        this.openInIframe = true;
-        this.extensionWindowIsOpen = false;
-    }
-    ngOnInit() {
-        const { data } = this.route.snapshot;
-        if (!this.isExtensionHostConfig(data.extensionHostConfig)) {
-            throw new Error(`Expected an ExtensionHostConfig object, got ${JSON.stringify(data.extensionHostConfig)}`);
-        }
-        this.config = data.extensionHostConfig;
-        this.openInIframe = !this.config.openInNewTab;
-        this.extensionUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.config.extensionUrl || 'about:blank');
-    }
-    ngAfterViewInit() {
-        if (this.openInIframe) {
-            const extensionWindow = this.extensionFrame.nativeElement.contentWindow;
-            if (extensionWindow) {
-                this.extensionHostService.init(extensionWindow, this.route.snapshot);
-            }
-        }
-    }
-    ngOnDestroy() {
-        if (this.extensionWindow) {
-            this.extensionWindow.close();
-        }
-    }
-    launchExtensionWindow() {
-        const extensionWindow = window.open(this.config.extensionUrl);
-        if (!extensionWindow) {
-            return;
-        }
-        this.extensionHostService.init(extensionWindow, this.route.snapshot);
-        this.extensionWindowIsOpen = true;
-        this.extensionWindow = extensionWindow;
-        let timer;
-        function pollWindowState(extwindow, onClosed) {
-            if (extwindow.closed) {
-                window.clearTimeout(timer);
-                onClosed();
-            }
-            else {
-                timer = window.setTimeout(() => pollWindowState(extwindow, onClosed), 250);
-            }
-        }
-        pollWindowState(extensionWindow, () => {
-            this.extensionWindowIsOpen = false;
-            this.extensionHostService.destroy();
-        });
-    }
-    isExtensionHostConfig(input) {
-        return input.hasOwnProperty('extensionUrl');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ExtensionHostComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$2.DomSanitizer }, { token: ExtensionHostService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ExtensionHostComponent, selector: "vdr-extension-host", providers: [ExtensionHostService], viewQueries: [{ propertyName: "extensionFrame", first: true, predicate: ["extensionFrame"], descendants: true }], ngImport: i0, template: "<ng-template [ngIf]=\"openInIframe\" [ngIfElse]=\"launchExtension\">\r\n    <iframe [src]=\"extensionUrl\" #extensionFrame></iframe>\r\n</ng-template>\r\n<ng-template #launchExtension>\r\n    <div class=\"launch-button\" [class.launched]=\"extensionWindowIsOpen\">\r\n        <div>\r\n            <button\r\n                class=\"btn btn-lg btn-primary\"\r\n                [disabled]=\"extensionWindowIsOpen\"\r\n                (click)=\"launchExtensionWindow()\"\r\n            >\r\n                <clr-icon shape=\"pop-out\"></clr-icon>\r\n                {{ 'common.launch-extension' | translate }}\r\n            </button>\r\n            <h3 class=\"window-hint\" [class.visible]=\"extensionWindowIsOpen\">\r\n                {{ 'common.extension-running-in-separate-window' | translate }}\r\n            </h3>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: ["iframe{position:absolute;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: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ExtensionHostComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vdr-extension-host', changeDetection: ChangeDetectionStrategy.Default, providers: [ExtensionHostService], template: "<ng-template [ngIf]=\"openInIframe\" [ngIfElse]=\"launchExtension\">\r\n    <iframe [src]=\"extensionUrl\" #extensionFrame></iframe>\r\n</ng-template>\r\n<ng-template #launchExtension>\r\n    <div class=\"launch-button\" [class.launched]=\"extensionWindowIsOpen\">\r\n        <div>\r\n            <button\r\n                class=\"btn btn-lg btn-primary\"\r\n                [disabled]=\"extensionWindowIsOpen\"\r\n                (click)=\"launchExtensionWindow()\"\r\n            >\r\n                <clr-icon shape=\"pop-out\"></clr-icon>\r\n                {{ 'common.launch-extension' | translate }}\r\n            </button>\r\n            <h3 class=\"window-hint\" [class.visible]=\"extensionWindowIsOpen\">\r\n                {{ 'common.extension-running-in-separate-window' | translate }}\r\n            </h3>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: ["iframe{position:absolute;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: function () { return [{ type: i1$1.ActivatedRoute }, { type: i2$2.DomSanitizer }, { type: ExtensionHostService }]; }, propDecorators: { extensionFrame: [{
-                type: ViewChild,
-                args: ['extensionFrame']
-            }] } });
-
 class FormattedAddressComponent {
     getCountryName() {
         if (this.isAddressFragment(this.address)) {
@@ -18778,11 +18681,11 @@ class RadioCardFieldsetComponent {
         this.focussedId = item && this.idFn(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RadioCardFieldsetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: RadioCardFieldsetComponent, selector: "vdr-radio-card-fieldset", inputs: { selectedItemId: "selectedItemId", idFn: "idFn" }, outputs: { selectItem: "selectItem" }, usesOnChanges: true, ngImport: i0, template: `<fieldset><ng-content></ng-content></fieldset> `, isInline: true, styles: ["fieldset{display:flex;align-items:flex-start}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: RadioCardFieldsetComponent, selector: "vdr-radio-card-fieldset", inputs: { selectedItemId: "selectedItemId", idFn: "idFn" }, outputs: { selectItem: "selectItem" }, usesOnChanges: true, ngImport: i0, template: `<fieldset><ng-content></ng-content></fieldset> `, isInline: true, styles: ["fieldset{display:flex;align-items:flex-start;overflow-x:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RadioCardFieldsetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-radio-card-fieldset', template: `<fieldset><ng-content></ng-content></fieldset> `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["fieldset{display:flex;align-items:flex-start}\n"] }]
+            args: [{ selector: 'vdr-radio-card-fieldset', template: `<fieldset><ng-content></ng-content></fieldset> `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["fieldset{display:flex;align-items:flex-start;overflow-x:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedItemId: [{
                 type: Input
             }], idFn: [{
@@ -18895,13 +18798,13 @@ class SplitViewComponent {
     close() {
         this.closeClicked.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SplitViewComponent, deps: [{ token: i0.ViewContainerRef }, { token: i2$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SplitViewComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$6.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: SplitViewComponent, selector: "vdr-split-view", inputs: { rightPanelOpen: "rightPanelOpen" }, outputs: { closeClicked: "closeClicked" }, queries: [{ propertyName: "leftTemplate", first: true, predicate: SplitViewLeftDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "rightTemplate", first: true, predicate: SplitViewRightDirective, descendants: true, read: SplitViewRightDirective, static: true }], viewQueries: [{ propertyName: "resizeHandle", first: true, predicate: ["resizeHandle"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"split-view-wrapper\" [class.expanded]=\"rightPanelOpen\" [class.resizing]=\"resizing$ | async\">\r\n    <div class=\"left-panel\" [style.width]=\"leftPanelWidth$ | async\">\r\n        <ng-container *ngTemplateOutlet=\"leftTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"separator\" [class.hidden]=\"!rightPanelOpen\">\r\n        <div class=\"top\"></div>\r\n        <div class=\"resize-handle\" #resizeHandle>\r\n            <clr-icon shape=\"drag-handle\"></clr-icon>\r\n        </div>\r\n        <div class=\"bottom\"></div>\r\n    </div>\r\n    <div\r\n        class=\"right-panel\"\r\n        [class.expanded]=\"rightPanelOpen\"\r\n        [class.resizing]=\"resizing$ | async\"\r\n        [style.width.px]=\"rightPanelOpen ? (rightPanelWidth$ | async) : 0\"\r\n    >\r\n        <div class=\"close-row\">\r\n            <div class=\"title\" *ngIf=\"rightTemplate.splitViewTitle as title\">{{ title }}</div>\r\n            <button type=\"button\" class=\"button-small\" (click)=\"close()\">\r\n                <clr-icon shape=\"close\"></clr-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <ng-container *ngTemplateOutlet=\"rightTemplate.template\"></ng-container>\r\n    </div>\r\n</div>\r\n", styles: [":host{--separator-border: var(--color-split-view-separator-border);max-width:var(--surface-width)}.split-view-wrapper{display:flex;height:calc(100% - 50px)}.split-view-wrapper.resizing{-webkit-user-select:none;user-select:none}.split-view-wrapper .left-panel{flex:1;overflow:auto;margin-top:0}.split-view-wrapper .left-panel .active{background-color:var(--clr-global-selection-color)}.split-view-wrapper .left-panel.expanded{width:calc(100% - 40vw)}.separator{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-inline-start:-1px;z-index:10}.separator.hidden{display:none}.separator .resize-handle{display:flex;align-items:center;justify-content:center;flex:1;border-inline-start:1px solid var(--separator-border);border-inline-end:1px solid var(--separator-border);cursor:ew-resize;transition:background-color .2s}.separator .top,.separator .bottom{height:48px;width:100%;border-style:solid;border-width:0 1px}.separator .top{border-image:linear-gradient(0deg,var(--separator-border),transparent) 1}.separator .bottom{border-image:linear-gradient(180deg,var(--separator-border),transparent) 1}.resizing{--separator-border: var(--color-split-view-separator-resize-border)}.resizing .resize-handle{color:var(--color-primary-700)}.close-row{display:flex;justify-content:space-between;padding:calc(var(--space-unit) * 1);padding-inline-start:var(--surface-margin-left);padding-inline-end:4px}.right-panel{height:100%;opacity:0;visibility:hidden;overflow:auto}.right-panel:not(.resizing){transition:width .3s,opacity .2s .3s,visibility 0s .3s}.right-panel.expanded{visibility:visible;opacity:1}.right-panel .close-button{margin:0;background:none;border:none;cursor:pointer}.right-panel ::ng-deep table.table{margin-top:0}.right-panel ::ng-deep table.table th{top:0}.right-panel .controls{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", 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: function () { return [{ type: i0.ViewContainerRef }, { type: i2$2.DomSanitizer }]; }, propDecorators: { rightPanelOpen: [{
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1$6.DomSanitizer }]; }, propDecorators: { rightPanelOpen: [{
                 type: Input
             }], closeClicked: [{
                 type: Output
@@ -19646,7 +19549,6 @@ const DECLARATIONS = [
     ChannelAssignmentControlComponent,
     ChannelLabelPipe,
     IfDefaultChannelActiveDirective,
-    ExtensionHostComponent,
     CustomFieldLabelPipe,
     CustomFieldDescriptionPipe,
     FocalPointControlComponent,
@@ -19805,7 +19707,6 @@ class SharedModule {
             ChannelAssignmentControlComponent,
             ChannelLabelPipe,
             IfDefaultChannelActiveDirective,
-            ExtensionHostComponent,
             CustomFieldLabelPipe,
             CustomFieldDescriptionPipe,
             FocalPointControlComponent,
@@ -19977,7 +19878,6 @@ class SharedModule {
             ChannelAssignmentControlComponent,
             ChannelLabelPipe,
             IfDefaultChannelActiveDirective,
-            ExtensionHostComponent,
             CustomFieldLabelPipe,
             CustomFieldDescriptionPipe,
             FocalPointControlComponent,
@@ -20142,6 +20042,7 @@ class CoreModule {
     initAlerts() {
         this.alertsService.configureAlert({
             id: 'pending-search-index-updates',
+            requiredPermissions: [Permission.ReadCatalog, Permission.ReadProduct],
             check: () => this.dataService.product
                 .getPendingSearchIndexUpdates()
                 .mapSingle(({ pendingSearchIndexUpdates }) => pendingSearchIndexUpdates),
@@ -20161,7 +20062,7 @@ class CoreModule {
         });
         this.alertsService.refresh();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CoreModule, deps: [{ token: I18nService }, { token: LocalStorageService }, { token: i2$2.Title }, { token: AlertsService }, { token: DataService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CoreModule, deps: [{ token: I18nService }, { token: LocalStorageService }, { token: i1$6.Title }, { token: AlertsService }, { token: DataService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.2", ngImport: i0, type: CoreModule, declarations: [AppShellComponent,
             UserMenuComponent,
             BaseNavComponent,
@@ -20224,7 +20125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
                         AlertsComponent,
                     ],
                 }]
-        }], ctorParameters: function () { return [{ type: I18nService }, { type: LocalStorageService }, { type: i2$2.Title }, { type: AlertsService }, { type: DataService }, { type: NotificationService }]; } });
+        }], ctorParameters: function () { return [{ type: I18nService }, { type: LocalStorageService }, { type: i1$6.Title }, { type: AlertsService }, { type: DataService }, { type: NotificationService }]; } });
 function HttpLoaderFactory(http, location) {
     // Dynamically get the baseHref, which is configured in the angular.json file
     const baseHref = location.getBaseHrefFromDOM();
@@ -22231,6 +22132,14 @@ function registerRouteComponent(options) {
     const { query, entityKey, variables, getBreadcrumbs } = options;
     const breadcrumbSubject$ = new BehaviorSubject(options.breadcrumb ?? '');
     const titleSubject$ = new BehaviorSubject(options.title);
+    if (getBreadcrumbs != null && (query == null || entityKey == null)) {
+        console.error([
+            `[${options.path ?? 'custom'} route] When using the "getBreadcrumbs" option, the "query" and "entityKey" options must also be provided.`,
+            ``,
+            `Alternatively, use the "breadcrumb" option instead, or use the "PageMetadataService" inside your Angular component`,
+            `or the "usePageMetadata" React hook to set the breadcrumb.`,
+        ].join('\n'));
+    }
     const resolveFn = query && entityKey
         ? createBaseDetailResolveFn({
             query,
@@ -22256,7 +22165,7 @@ function registerRouteComponent(options) {
         data: {
             breadcrumb: breadcrumbSubject$,
             ...(options.routeConfig?.data ?? {}),
-            ...(getBreadcrumbs
+            ...(getBreadcrumbs && query && entityKey
                 ? {
                     breadcrumb: data => data.detail.entity.pipe(map((entity) => getBreadcrumbs(entity))),
                 }
@@ -22306,6 +22215,168 @@ class ExtensionHostConfig {
     }
 }
 
+class ExtensionHostService {
+    constructor(dataService, notificationService) {
+        this.dataService = dataService;
+        this.notificationService = notificationService;
+        this.cancellationMessage$ = new Subject();
+        this.destroyMessage$ = new Subject();
+        this.handleMessage = (message) => {
+            const { data, origin } = message;
+            if (this.isExtensionMessage(data)) {
+                const cancellation$ = this.cancellationMessage$.pipe(filter(requestId => requestId === data.requestId));
+                const end$ = merge(cancellation$, this.destroyMessage$);
+                switch (data.type) {
+                    case 'cancellation': {
+                        this.cancellationMessage$.next(data.requestId);
+                        break;
+                    }
+                    case 'destroy': {
+                        this.destroyMessage$.next();
+                        break;
+                    }
+                    case 'active-route': {
+                        const routeData = {
+                            url: window.location.href,
+                            origin: window.location.origin,
+                            pathname: window.location.pathname,
+                            params: this.routeSnapshot.params,
+                            queryParams: this.routeSnapshot.queryParams,
+                            fragment: this.routeSnapshot.fragment,
+                        };
+                        this.sendMessage({ data: routeData, error: false, complete: false, requestId: data.requestId }, origin);
+                        this.sendMessage({ data: null, error: false, complete: true, requestId: data.requestId }, origin);
+                        break;
+                    }
+                    case 'graphql-query': {
+                        const { document, variables, fetchPolicy } = data.data;
+                        this.dataService
+                            .query(parse(document), variables, fetchPolicy)
+                            .stream$.pipe(takeUntil(end$))
+                            .subscribe(this.createObserver(data.requestId, origin));
+                        break;
+                    }
+                    case 'graphql-mutation': {
+                        const { document, variables } = data.data;
+                        this.dataService
+                            .mutate(parse(document), variables)
+                            .pipe(takeUntil(end$))
+                            .subscribe(this.createObserver(data.requestId, origin));
+                        break;
+                    }
+                    case 'notification': {
+                        this.notificationService.notify(data.data);
+                        break;
+                    }
+                    default:
+                        assertNever(data);
+                }
+            }
+        };
+    }
+    init(extensionWindow, routeSnapshot) {
+        this.extensionWindow = extensionWindow;
+        this.routeSnapshot = routeSnapshot;
+        window.addEventListener('message', this.handleMessage);
+    }
+    destroy() {
+        window.removeEventListener('message', this.handleMessage);
+        this.destroyMessage$.next();
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    createObserver(requestId, origin) {
+        return {
+            next: data => this.sendMessage({ data, error: false, complete: false, requestId }, origin),
+            error: err => this.sendMessage({ data: err, error: true, complete: false, requestId }, origin),
+            complete: () => this.sendMessage({ data: null, error: false, complete: true, requestId }, origin),
+        };
+    }
+    sendMessage(response, origin) {
+        this.extensionWindow.postMessage(response, origin);
+    }
+    isExtensionMessage(input) {
+        return (input.hasOwnProperty('type') && input.hasOwnProperty('data') && input.hasOwnProperty('requestId'));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ExtensionHostService, deps: [{ token: DataService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ExtensionHostService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ExtensionHostService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: DataService }, { type: NotificationService }]; } });
+
+/**
+ * This component uses an iframe to embed an external url into the Admin UI, and uses the PostMessage
+ * protocol to allow cross-frame communication between the two frames.
+ */
+class ExtensionHostComponent {
+    constructor(route, sanitizer, extensionHostService) {
+        this.route = route;
+        this.sanitizer = sanitizer;
+        this.extensionHostService = extensionHostService;
+        this.openInIframe = true;
+        this.extensionWindowIsOpen = false;
+    }
+    ngOnInit() {
+        const { data } = this.route.snapshot;
+        if (!this.isExtensionHostConfig(data.extensionHostConfig)) {
+            throw new Error(`Expected an ExtensionHostConfig object, got ${JSON.stringify(data.extensionHostConfig)}`);
+        }
+        this.config = data.extensionHostConfig;
+        this.openInIframe = !this.config.openInNewTab;
+        this.extensionUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.config.extensionUrl || 'about:blank');
+    }
+    ngAfterViewInit() {
+        if (this.openInIframe) {
+            const extensionWindow = this.extensionFrame.nativeElement.contentWindow;
+            if (extensionWindow) {
+                this.extensionHostService.init(extensionWindow, this.route.snapshot);
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this.extensionWindow) {
+            this.extensionWindow.close();
+        }
+    }
+    launchExtensionWindow() {
+        const extensionWindow = window.open(this.config.extensionUrl);
+        if (!extensionWindow) {
+            return;
+        }
+        this.extensionHostService.init(extensionWindow, this.route.snapshot);
+        this.extensionWindowIsOpen = true;
+        this.extensionWindow = extensionWindow;
+        let timer;
+        function pollWindowState(extwindow, onClosed) {
+            if (extwindow.closed) {
+                window.clearTimeout(timer);
+                onClosed();
+            }
+            else {
+                timer = window.setTimeout(() => pollWindowState(extwindow, onClosed), 250);
+            }
+        }
+        pollWindowState(extensionWindow, () => {
+            this.extensionWindowIsOpen = false;
+            this.extensionHostService.destroy();
+        });
+    }
+    isExtensionHostConfig(input) {
+        return input.hasOwnProperty('extensionUrl');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ExtensionHostComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$6.DomSanitizer }, { token: ExtensionHostService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ExtensionHostComponent, isStandalone: true, selector: "vdr-extension-host", providers: [ExtensionHostService], viewQueries: [{ propertyName: "extensionFrame", first: true, predicate: ["extensionFrame"], descendants: true }], ngImport: i0, template: "<ng-template [ngIf]=\"openInIframe\" [ngIfElse]=\"launchExtension\">\r\n    <iframe [src]=\"extensionUrl\" #extensionFrame></iframe>\r\n</ng-template>\r\n<ng-template #launchExtension>\r\n    <div class=\"launch-button\" [class.launched]=\"extensionWindowIsOpen\">\r\n        <div>\r\n            <button\r\n                class=\"btn btn-lg btn-primary\"\r\n                [disabled]=\"extensionWindowIsOpen\"\r\n                (click)=\"launchExtensionWindow()\"\r\n            >\r\n                <clr-icon shape=\"pop-out\"></clr-icon>\r\n                {{ 'common.launch-extension' | translate }}\r\n            </button>\r\n            <h3 class=\"window-hint\" [class.visible]=\"extensionWindowIsOpen\">\r\n                {{ 'common.extension-running-in-separate-window' | translate }}\r\n            </h3>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: ["iframe{position:absolute;inset:0;width:100%;height:100%;border:none}.launch-button{position:absolute;inset:0;width:100%;height:100%;border:none;padding:24px;display:flex;align-items:center;justify-content:center;transition:background-color .3s;text-align:center}.launch-button.launched{background-color:var(--color-component-bg-300)}.window-hint{visibility:hidden;opacity:0;transition:visibility .3s 0,opacity .3s}.window-hint.visible{visibility:visible;opacity:1;transition:visibility 0,opacity .3s}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", 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: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$6.DomSanitizer }, { type: ExtensionHostService }]; }, propDecorators: { extensionFrame: [{
+                type: ViewChild,
+                args: ['extensionFrame']
+            }] } });
+
 /**
  * This function is used to conveniently configure a UI extension route to
  * host an external URL from the Admin UI using the {@link ExtensionHostComponent}
@@ -22401,5 +22472,5 @@ function unicodePatternValidator(patternRe) {
  * Generated bundle index. Do not edit.
  */
 
-export { ADDRESS_FRAGMENT, ADD_CUSTOMERS_TO_GROUP, ADD_ITEM_TO_DRAFT_ORDER, ADD_MANUAL_PAYMENT_TO_ORDER, ADD_MEMBERS_TO_ZONE, ADD_NOTE_TO_CUSTOMER, ADD_NOTE_TO_ORDER, ADD_OPTION_GROUP_TO_PRODUCT, ADD_OPTION_TO_GROUP, ADJUST_DRAFT_ORDER_LINE, ADMINISTRATOR_FRAGMENT, ADMIN_UI_VERSION, ALL_CUSTOM_FIELDS_FRAGMENT, APPLY_COUPON_CODE_TO_DRAFT_ORDER, ASSET_FRAGMENT, ASSET_PREVIEW_QUERY, ASSIGN_COLLECTIONS_TO_CHANNEL, ASSIGN_FACETS_TO_CHANNEL, ASSIGN_PRODUCTS_TO_CHANNEL, ASSIGN_ROLE_TO_ADMINISTRATOR, ASSIGN_VARIANTS_TO_CHANNEL, ATTEMPT_LOGIN, AUTH_REDIRECT_PARAM, ActionBarComponent, ActionBarItemsComponent, ActionBarLeftComponent, ActionBarRightComponent, AddCustomersToGroupDocument, AddFilterPresetButtonComponent, AddItemToDraftOrderDocument, AddManualPaymentDocument, AddMembersToZoneDocument, AddNoteToCustomerDocument, AddNoteToOrderDocument, AddOptionGroupToProductDocument, AddOptionToGroupDocument, AddressFormComponent, AddressFragmentDoc, AdjustDraftOrderLineDocument, AdjustmentType, AdministratorDataService, AdministratorFragmentDoc, AdministratorListItemFragmentDoc, AffixedInputComponent, Alert, AlertsComponent, AlertsService, AngularRouteComponent, AppComponent, AppComponentModule, AppShellComponent, ApplyCouponCodeToDraftOrderDocument, AssetDetailQueryDocument, AssetFileInputComponent, AssetFragmentDoc, AssetGalleryComponent, AssetPickerDialogComponent, AssetPreviewComponent, AssetPreviewDialogComponent, AssetPreviewLinksComponent, AssetPreviewPipe, AssetPreviewQueryDocument, AssetSearchInputComponent, AssetType, AssignCollectionsToChannelDocument, AssignFacetsToChannelDocument, AssignPaymentMethodsToChannelDocument, AssignProductsToChannelDocument, AssignPromotionsToChannelDocument, AssignRoleToAdministratorDocument, AssignShippingMethodsToChannelDocument, AssignStockLocationsToChannelDocument, AssignToChannelDialogComponent, AssignVariantsToChannelDocument, AttemptLoginDocument, AuthDataService, AuthGuard, AuthService, BOOLEAN_CUSTOM_FIELD_FRAGMENT, BaseCodeEditorFormInputComponent, BaseDataService, BaseDetailComponent, BaseEntityResolver, BaseListComponent, BaseNavComponent, BooleanCustomFieldFragmentDoc, BooleanFormInputComponent, BreadcrumbComponent, BreadcrumbService, BulkActionMenuComponent, BulkActionRegistryService, CANCEL_JOB, CANCEL_ORDER, CANCEL_PAYMENT, CHANNEL_FRAGMENT, COLLECTION_FOR_LIST_FRAGMENT, COLLECTION_FRAGMENT, CONFIGURABLE_OPERATION_DEF_FRAGMENT, CONFIGURABLE_OPERATION_FRAGMENT, COUNTRY_FRAGMENT, CREATE_ADMINISTRATOR, CREATE_ASSETS, CREATE_CHANNEL, CREATE_COLLECTION, CREATE_COUNTRY, CREATE_CUSTOMER, CREATE_CUSTOMER_ADDRESS, CREATE_CUSTOMER_GROUP, CREATE_DRAFT_ORDER, CREATE_FACET, CREATE_FACET_VALUES, CREATE_FULFILLMENT, CREATE_PAYMENT_METHOD, CREATE_PRODUCT, CREATE_PRODUCT_OPTION_GROUP, CREATE_PRODUCT_VARIANTS, CREATE_PROMOTION, CREATE_ROLE, CREATE_SELLER, CREATE_SHIPPING_METHOD, CREATE_TAG, CREATE_TAX_CATEGORY, CREATE_TAX_RATE, CREATE_ZONE, CURRENT_USER_FRAGMENT, CUSTOMER_FRAGMENT, CUSTOMER_GROUP_FRAGMENT, CUSTOM_FIELD_CONFIG_FRAGMENT, CanDeactivateDetailGuard, CancelJobDocument, CancelOrderDocument, CancelPaymentDocument, CardComponent, CardControlsDirective, ChannelAssignmentControlComponent, ChannelBadgeComponent, ChannelFragmentDoc, ChannelLabelPipe, ChannelService, ChannelSwitcherComponent, ChartComponent, CheckJobsLink, ChipComponent, ClientDataService, CollectionDataService, CollectionDetailQueryDocument, CollectionForListFragmentDoc, CollectionFragmentDoc, CombinationModeFormInputComponent, ComponentRegistryService, ConfigurableInputComponent, ConfigurableOperationDefFragmentDoc, ConfigurableOperationFragmentDoc, ContextMenuComponent, ContextMenuService, CoreModule, CountryFragmentDoc, CountryListItemFragmentDoc, CreateAdministratorDocument, CreateAssetsDocument, CreateChannelDocument, CreateCollectionDocument, CreateCountryDocument, CreateCustomerAddressDocument, CreateCustomerDocument, CreateCustomerGroupDocument, CreateDraftOrderDocument, CreateFacetDocument, CreateFacetValuesDocument, CreateFulfillmentDocument, CreatePaymentMethodDocument, CreateProductDocument, CreateProductOptionGroupDocument, CreateProductVariantsDocument, CreatePromotionDocument, CreateRoleDocument, CreateSellerDocument, CreateShippingMethodDocument, CreateStockLocationDocument, CreateTagDocument, CreateTaxCategoryDocument, CreateTaxRateDocument, CreateZoneDocument, CurrencyCode, CurrencyCodeSelectorComponent, CurrencyFormInputComponent, CurrencyInputComponent, CurrentUserFragmentDoc, CustomDetailComponentHostComponent, CustomDetailComponentService, CustomFieldComponentService, CustomFieldConfigFragmentDoc, CustomFieldControlComponent, CustomFieldDescriptionPipe, CustomFieldLabelPipe, CustomFieldsFragmentDoc, CustomFilterComponentDirective, CustomHttpTranslationLoader, CustomerDataService, CustomerDetailQueryDocument, CustomerFragmentDoc, CustomerGroupDetailFragmentDoc, CustomerGroupFormInputComponent, CustomerGroupFragmentDoc, CustomerLabelComponent, CustomerListItemFragmentDoc, CustomerListQueryDocument, DATE_TIME_CUSTOM_FIELD_FRAGMENT, DELETE_ADMINISTRATOR, DELETE_ADMINISTRATORS, DELETE_ASSETS, DELETE_CHANNEL, DELETE_CHANNELS, DELETE_COLLECTION, DELETE_COLLECTIONS, DELETE_COUNTRIES, DELETE_COUNTRY, DELETE_CUSTOMER, DELETE_CUSTOMERS, DELETE_CUSTOMER_ADDRESS, DELETE_CUSTOMER_GROUP, DELETE_CUSTOMER_GROUPS, DELETE_CUSTOMER_NOTE, DELETE_DRAFT_ORDER, DELETE_FACET, DELETE_FACETS, DELETE_FACET_VALUES, DELETE_ORDER_NOTE, DELETE_PAYMENT_METHOD, DELETE_PAYMENT_METHODS, DELETE_PRODUCT, DELETE_PRODUCTS, DELETE_PRODUCT_OPTION, DELETE_PRODUCT_VARIANT, DELETE_PRODUCT_VARIANTS, DELETE_PROMOTION, DELETE_PROMOTIONS, DELETE_ROLE, DELETE_ROLES, DELETE_SELLER, DELETE_SELLERS, DELETE_SHIPPING_METHOD, DELETE_SHIPPING_METHODS, DELETE_TAG, DELETE_TAX_CATEGORIES, DELETE_TAX_CATEGORY, DELETE_TAX_RATE, DELETE_TAX_RATES, DELETE_ZONE, DELETE_ZONES, DISCOUNT_FRAGMENT, DRAFT_ORDER_ELIGIBLE_SHIPPING_METHODS, DashboardWidgetService, DataModule, DataService, DataTable2ColumnComponent, DataTable2Component, DataTable2SearchComponent, DataTableColumnComponent, DataTableColumnPickerComponent, DataTableComponent, DataTableCustomComponentService, DataTableCustomFieldColumnComponent, DataTableFilter, DataTableFilterCollection, DataTableFilterLabelComponent, DataTableFilterPresetsComponent, DataTableFiltersComponent, DataTableSort, DataTableSortCollection, DateFormInputComponent, DateTimeCustomFieldFragmentDoc, DatetimePickerComponent, DatetimePickerService, DefaultInterceptor, DeleteAdministratorDocument, DeleteAdministratorsDocument, DeleteAssetsDocument, DeleteChannelDocument, DeleteChannelsDocument, DeleteCollectionDocument, DeleteCollectionsDocument, DeleteCountriesDocument, DeleteCountryDocument, DeleteCustomerAddressDocument, DeleteCustomerDocument, DeleteCustomerGroupDocument, DeleteCustomerGroupsDocument, DeleteCustomerNoteDocument, DeleteCustomersDocument, DeleteDraftOrderDocument, DeleteFacetDocument, DeleteFacetValuesDocument, DeleteFacetsDocument, DeleteOrderNoteDocument, DeletePaymentMethodDocument, DeletePaymentMethodsDocument, DeleteProductDocument, DeleteProductOptionDocument, DeleteProductVariantDocument, DeleteProductVariantsDocument, DeleteProductsDocument, DeletePromotionDocument, DeletePromotionsDocument, DeleteRoleDocument, DeleteRolesDocument, DeleteSellerDocument, DeleteSellersDocument, DeleteShippingMethodDocument, DeleteShippingMethodsDocument, DeleteStockLocationsDocument, DeleteTagDocument, DeleteTaxCategoriesDocument, DeleteTaxCategoryDocument, DeleteTaxRateDocument, DeleteTaxRatesDocument, DeleteZoneDocument, DeleteZonesDocument, DeletionResult, DialogButtonsDirective, DialogComponentOutletComponent, DialogTitleDirective, DisabledDirective, DiscountFragmentDoc, DraftOrderEligibleShippingMethodsDocument, DropdownComponent, DropdownItemDirective, DropdownMenuComponent, DropdownTriggerDirective, DurationPipe, DynamicFormInputComponent, ERROR_RESULT_FRAGMENT, EditNoteDialogComponent, EmptyPlaceholderComponent, EntityInfoComponent, ErrorCode, ErrorResultFragmentDoc, ExtensionHostComponent, ExtensionHostConfig, ExtensionHostService, ExternalImageDialogComponent, FACET_VALUE_FRAGMENT, FACET_WITH_VALUES_FRAGMENT, FACET_WITH_VALUE_LIST_FRAGMENT, FLOAT_CUSTOM_FIELD_FRAGMENT, FULFILLMENT_FRAGMENT, FacetDataService, FacetValueChipComponent, FacetValueFormInputComponent, FacetValueFragmentDoc, FacetValueSelectorComponent, FacetWithValueListFragmentDoc, FacetWithValuesFragmentDoc, FetchAdapter, FileSizePipe, FilterPresetService, FilterWithValue, FloatCustomFieldFragmentDoc, FocalPointControlComponent, FormFieldComponent, FormFieldControlDirective, FormItemComponent, FormattedAddressComponent, FulfillmentFragmentDoc, GET_ACTIVE_ADMINISTRATOR, GET_ACTIVE_CHANNEL, GET_ADJUSTMENT_OPERATIONS, GET_ASSET, GET_ASSET_LIST, GET_AVAILABLE_COUNTRIES, GET_CHANNELS, GET_CLIENT_STATE, GET_COLLECTION_CONTENTS, GET_COLLECTION_FILTERS, GET_COLLECTION_LIST, GET_CURRENT_USER, GET_CUSTOMER_GROUPS, GET_CUSTOMER_GROUP_WITH_CUSTOMERS, GET_CUSTOMER_HISTORY, GET_CUSTOMER_LIST, GET_FACET_VALUE_LIST, GET_GLOBAL_SETTINGS, GET_JOBS_BY_ID, GET_JOBS_LIST, GET_JOB_INFO, GET_JOB_QUEUE_LIST, GET_NEWTORK_STATUS, GET_ORDER, GET_ORDERS_LIST, GET_ORDER_HISTORY, GET_PAYMENT_METHOD_OPERATIONS, GET_PENDING_SEARCH_INDEX_UPDATES, GET_PRODUCT_LIST, GET_PRODUCT_OPTION_GROUP, GET_PRODUCT_OPTION_GROUPS, GET_PRODUCT_SIMPLE, GET_PRODUCT_VARIANT, GET_PRODUCT_VARIANTS_FOR_MULTI_SELECTOR, GET_PRODUCT_VARIANT_LIST, GET_PRODUCT_VARIANT_LIST_FOR_PRODUCT, GET_PRODUCT_VARIANT_LIST_SIMPLE, GET_PRODUCT_VARIANT_OPTIONS, GET_PRODUCT_WITH_VARIANTS, GET_ROLES, GET_SELLERS, GET_SERVER_CONFIG, GET_SHIPPING_METHOD_OPERATIONS, GET_TAG, GET_TAG_LIST, GET_TAX_CATEGORIES, GET_TAX_RATE_LIST_SIMPLE, GET_UI_STATE, GET_USER_STATUS, GET_ZONE, GET_ZONE_SELECTOR_LIST, GLOBAL_SETTINGS_FRAGMENT, GetActiveAdministratorDocument, GetActiveChannelDocument, GetAddManualPaymentMethodListDocument, GetAdjustmentOperationsDocument, GetAdministratorDetailDocument, GetAdministratorListDocument, GetAllJobsDocument, GetAssetDocument, GetAssetListDocument, GetAvailableCountriesDocument, GetChannelDetailDocument, GetChannelListDocument, GetChannelsDocument, GetClientStateDocument, GetCollectionContentsDocument, GetCollectionFiltersDocument, GetCollectionListDocument, GetCountryDetailDocument, GetCountryListDocument, GetCouponCodeSelectorPromotionListDocument, GetCurrentUserDocument, GetCustomerAddressesDocument, GetCustomerGroupDetailDocument, GetCustomerGroupListDocument, GetCustomerGroupWithCustomersDocument, GetCustomerGroupsDocument, GetCustomerHistoryDocument, GetCustomerListDocument, GetFacetDetailDocument, GetFacetListDocument, GetFacetValueListDocument, GetGlobalSettingsDetailDocument, GetGlobalSettingsDocument, GetJobInfoDocument, GetJobQueueListDocument, GetJobsByIdDocument, GetLatestOrdersDocument, GetNetworkStatusDocument, GetOrderChartDataDocument, GetOrderDocument, GetOrderHistoryDocument, GetOrderListDocument, GetOrderSummaryDocument, GetPaymentMethodDetailDocument, GetPaymentMethodListDocument, GetPaymentMethodOperationsDocument, GetPendingSearchIndexUpdatesDocument, GetProductDetailDocument, GetProductListDocument, GetProductOptionGroupDocument, GetProductOptionGroupsDocument, GetProductSimpleDocument, GetProductVariantDetailDocument, GetProductVariantDocument, GetProductVariantListDocument, GetProductVariantListForProductDocument, GetProductVariantListSimpleDocument, GetProductVariantOptionsDocument, GetProductVariantsForMultiSelectorDocument, GetProductVariantsQuickJumpDocument, GetProductWithVariantsDocument, GetProductsWithFacetValuesByIdsDocument, GetProfileDetailDocument, GetPromotionDetailDocument, GetPromotionListDocument, GetRoleDetailDocument, GetRoleListDocument, GetRolesDocument, GetSellerDetailDocument, GetSellerListDocument, GetSellerOrdersDocument, GetSellersDocument, GetServerConfigDocument, GetShippingMethodDetailDocument, GetShippingMethodListDocument, GetShippingMethodOperationsDocument, GetStockLocationDetailDocument, GetStockLocationListDocument, GetTagDocument, GetTagListDocument, GetTaxCategoriesDocument, GetTaxCategoryDetailDocument, GetTaxCategoryListDocument, GetTaxRateDetailDocument, GetTaxRateListDocument, GetTaxRateListSimpleDocument, GetUiStateDocument, GetUserStatusDocument, GetVariantsWithFacetValuesByIdsDocument, GetZoneDetailDocument, GetZoneDocument, GetZoneListDocument, GetZoneMembersDocument, GetZoneSelectorListDocument, GlobalFlag, GlobalSettingsDetailFragmentDoc, GlobalSettingsFragmentDoc, HasPermissionPipe, HealthCheckService, HelpTooltipComponent, HistoryEntryComponentService, HistoryEntryDetailComponent, HistoryEntryType, HtmlEditorFormInputComponent, HttpLoaderFactory, I18nService, INT_CUSTOM_FIELD_FRAGMENT, IconSize, IfDefaultChannelActiveDirective, IfDirectiveBase, IfMultichannelDirective, IfPermissionsDirective, InjectableTranslateMessageFormatCompiler, IntCustomFieldFragmentDoc, ItemsPerPageControlsComponent, JOB_INFO_FRAGMENT, JobInfoFragmentDoc, JobQueueService, JobState, JsonEditorFormInputComponent, LOCALE_STRING_CUSTOM_FIELD_FRAGMENT, LOCALE_TEXT_CUSTOM_FIELD_FRAGMENT, LOG_OUT, LabeledDataComponent, LanguageCode, LanguageCodeSelectorComponent, LanguageSelectorComponent, LinkDialogComponent, LocalStorageService, LocaleBasePipe, LocaleCurrencyNamePipe, LocaleCurrencyPipe, LocaleDatePipe, LocaleLanguageNamePipe, LocaleRegionNamePipe, LocaleStringCustomFieldFragmentDoc, LocaleTextCustomFieldFragmentDoc, LocalizedTextComponent, LogOutDocument, LogicalOperator, MODIFY_ORDER, MOVE_COLLECTION, MainNavComponent, ManageTagsDialogComponent, MetricInterval, MetricType, ModalDialogComponent, ModalService, ModifyOrderDocument, MoveCollectionDocument, NavBuilderService, NotificationComponent, NotificationService, NumberFormInputComponent, ORDER_ADDRESS_FRAGMENT, ORDER_DETAIL_FRAGMENT, ORDER_FRAGMENT, ORDER_LINE_FRAGMENT, ObjectTreeComponent, OmitTypenameLink, OrderAddressFragmentDoc, OrderDataService, OrderDetailFragmentDoc, OrderDetailQueryDocument, OrderFragmentDoc, OrderLineFragmentDoc, OrderStateLabelComponent, OrderType, OverlayHostComponent, OverlayHostService, PAYMENT_FRAGMENT, PAYMENT_METHOD_FRAGMENT, PAYMENT_WITH_REFUNDS_FRAGMENT, PREVIEW_COLLECTION_CONTENTS, PRODUCT_DETAIL_FRAGMENT, PRODUCT_FOR_LIST_FRAGMENT, PRODUCT_OPTION_FRAGMENT, PRODUCT_OPTION_GROUP_FRAGMENT, PRODUCT_OPTION_GROUP_WITH_OPTIONS_FRAGMENT, PRODUCT_SELECTOR_SEARCH, PRODUCT_VARIANT_FRAGMENT, PROMOTION_FRAGMENT, PageBlockComponent, PageBodyComponent, PageComponent, PageDetailLayoutComponent, PageDetailSidebarComponent, PageEntityInfoComponent, PageHeaderComponent, PageHeaderDescriptionComponent, PageHeaderTabsComponent, PageMetadataService, PageService, PageTitleComponent, PaginationControlsComponent, PasswordFormInputComponent, PaymentFragmentDoc, PaymentMethodFragmentDoc, PaymentMethodListItemFragmentDoc, PaymentWithRefundsFragmentDoc, PercentageSuffixInputComponent, Permission, PreviewCollectionContentsDocument, ProductDataService, ProductDetailFragmentDoc, ProductForListFragmentDoc, ProductListQueryDocument, ProductListQueryProductFragmentFragmentDoc, ProductMultiSelectorDialogComponent, ProductMultiSelectorFormInputComponent, ProductOptionFragmentDoc, ProductOptionGroupFragmentDoc, ProductOptionGroupWithOptionsFragmentDoc, ProductSearchInputComponent, ProductSelectorFormInputComponent, ProductSelectorSearchDocument, ProductVariantDetailQueryProductVariantFragmentFragmentDoc, ProductVariantFragmentDoc, ProductVariantListQueryDocument, ProductVariantListQueryProductVariantFragmentFragmentDoc, ProductVariantSelectorComponent, ProductVariantUpdateMutationDocument, ProfileDetailFragmentDoc, PromotionDataService, PromotionFragmentDoc, ProsemirrorService, QueryResult, REFUND_FRAGMENT, REFUND_ORDER, REINDEX, RELATION_ASSET_INPUT_QUERY, RELATION_CUSTOM_FIELD_FRAGMENT, REMOVE_COLLECTIONS_FROM_CHANNEL, REMOVE_COUPON_CODE_FROM_DRAFT_ORDER, REMOVE_CUSTOMERS_FROM_GROUP, REMOVE_DRAFT_ORDER_LINE, REMOVE_FACETS_FROM_CHANNEL, REMOVE_MEMBERS_FROM_ZONE, REMOVE_OPTION_GROUP_FROM_PRODUCT, REMOVE_PRODUCTS_FROM_CHANNEL, REMOVE_VARIANTS_FROM_CHANNEL, REQUEST_COMPLETED, REQUEST_STARTED, ROLE_FRAGMENT, ROUTE_COMPONENT_OPTIONS, RUN_PENDING_SEARCH_INDEX_UPDATES, RadioCardComponent, RadioCardFieldsetComponent, RawHtmlDialogComponent, RefundFragmentDoc, RefundOrderDocument, ReindexDocument, RelationAssetInputComponent, RelationAssetInputQueryDocument, RelationCardComponent, RelationCardDetailDirective, RelationCardPreviewDirective, RelationCustomFieldFragmentDoc, RelationCustomerInputComponent, RelationFormInputComponent, RelationGenericInputComponent, RelationProductInputComponent, RelationProductVariantInputComponent, RelationSelectorDialogComponent, RemoveCollectionsFromChannelDocument, RemoveCouponCodeFromDraftOrderDocument, RemoveCustomersFromGroupDocument, RemoveDraftOrderLineDocument, RemoveFacetsFromChannelDocument, RemoveMembersFromZoneDocument, RemoveOptionGroupFromProductDocument, RemovePaymentMethodsFromChannelDocument, RemoveProductsFromChannelDocument, RemovePromotionsFromChannelDocument, RemoveShippingMethodsFromChannelDocument, RemoveStockLocationsFromChannelDocument, RemoveVariantsFromChannelDocument, RenameFilterPresetDialogComponent, RequestCompletedDocument, RequestStartedDocument, RichTextEditorComponent, RichTextFormInputComponent, RoleFragmentDoc, RouteComponent, RunPendingSearchIndexUpdatesDocument, SEARCH_PRODUCTS, SELLER_FRAGMENT, SETTLE_PAYMENT, SETTLE_REFUND, SET_ACTIVE_CHANNEL, SET_AS_LOGGED_IN, SET_AS_LOGGED_OUT, SET_BILLING_ADDRESS_FOR_DRAFT_ORDER, SET_CONTENT_LANGUAGE, SET_CUSTOMER_FOR_DRAFT_ORDER, SET_DISPLAY_UI_EXTENSION_POINTS, SET_DRAFT_ORDER_SHIPPING_METHOD, SET_MAIN_NAV_EXPANDED, SET_SHIPPING_ADDRESS_FOR_DRAFT_ORDER, SET_UI_LANGUAGE_AND_LOCALE, SET_UI_LOCALE, SET_UI_THEME, SHIPPING_METHOD_FRAGMENT, STRING_CUSTOM_FIELD_FRAGMENT, SearchProductsDocument, SelectFormInputComponent, SelectToggleComponent, SelectionManager, SellerDetailFragmentDoc, SellerFragmentDoc, SellerListItemFragmentDoc, SentenceCasePipe, ServerConfigService, SetActiveChannelDocument, SetAsLoggedInDocument, SetAsLoggedOutDocument, SetContentLanguageDocument, SetCustomerForDraftOrderDocument, SetDisplayUiExtensionPointsDocument, SetDraftOrderBillingAddressDocument, SetDraftOrderShippingAddressDocument, SetDraftOrderShippingMethodDocument, SetMainNavExpandedDocument, SetUiLanguageDocument, SetUiLocaleDocument, SetUiThemeDocument, SettingsDataService, SettingsNavComponent, SettlePaymentDocument, SettleRefundDocument, SharedModule, ShippingMethodDataService, ShippingMethodFragmentDoc, ShippingMethodListItemFragmentDoc, SimpleDialogComponent, SingleSearchSelectionModel, SingleSearchSelectionModelFactory, SortOrder, SortPipe, SplitViewComponent, SplitViewLeftDirective, SplitViewRightDirective, StateI18nTokenPipe, StatusBadgeComponent, StockLocationDetailFragmentDoc, StockLocationListItemFragmentDoc, StockMovementType, StringCustomFieldFragmentDoc, StringToColorPipe, SubMenuWithIcon, TAG_FRAGMENT, TAX_CATEGORY_FRAGMENT, TAX_RATE_FRAGMENT, TEST_ELIGIBLE_SHIPPING_METHODS, TEST_SHIPPING_METHOD, TEXT_CUSTOM_FIELD_FRAGMENT, TRANSITION_FULFILLMENT_TO_STATE, TRANSITION_ORDER_TO_STATE, TRANSITION_PAYMENT_TO_STATE, TabbedCustomFieldsComponent, TableRowActionComponent, TagFragmentDoc, TagSelectorComponent, TaxCategoryFragmentDoc, TaxRateFragmentDoc, TestEligibleShippingMethodsDocument, TestShippingMethodDocument, TextCustomFieldFragmentDoc, TextFormInputComponent, TextareaFormInputComponent, ThemeSwitcherComponent, TimeAgoPipe, TimelineEntryComponent, TitleInputComponent, TransitionFulfillmentToStateDocument, TransitionOrderToStateDocument, TransitionPaymentToStateDocument, TypedBaseDetailComponent, TypedBaseListComponent, UPDATE_ACTIVE_ADMINISTRATOR, UPDATE_ADMINISTRATOR, UPDATE_ASSET, UPDATE_CHANNEL, UPDATE_COLLECTION, UPDATE_COUNTRY, UPDATE_CUSTOMER, UPDATE_CUSTOMER_ADDRESS, UPDATE_CUSTOMER_GROUP, UPDATE_CUSTOMER_NOTE, UPDATE_FACET, UPDATE_FACET_VALUES, UPDATE_GLOBAL_SETTINGS, UPDATE_ORDER_CUSTOM_FIELDS, UPDATE_ORDER_NOTE, UPDATE_PAYMENT_METHOD, UPDATE_PRODUCT, UPDATE_PRODUCT_OPTION, UPDATE_PRODUCT_OPTION_GROUP, UPDATE_PRODUCT_VARIANTS, UPDATE_PROMOTION, UPDATE_ROLE, UPDATE_SELLER, UPDATE_SHIPPING_METHOD, UPDATE_TAG, UPDATE_TAX_CATEGORY, UPDATE_TAX_RATE, UPDATE_USER_CHANNELS, UPDATE_ZONE, USER_STATUS_FRAGMENT, UiExtensionPointComponent, UiLanguageSwitcherDialogComponent, UpdateActiveAdministratorDocument, UpdateAdministratorDocument, UpdateAssetDocument, UpdateChannelDocument, UpdateCollectionDocument, UpdateCountryDocument, UpdateCustomerAddressDocument, UpdateCustomerDocument, UpdateCustomerGroupDocument, UpdateCustomerNoteDocument, UpdateFacetDocument, UpdateFacetValuesDocument, UpdateGlobalSettingsDocument, UpdateOrderCustomFieldsDocument, UpdateOrderNoteDocument, UpdatePaymentMethodDocument, UpdateProductDocument, UpdateProductOptionDocument, UpdateProductOptionGroupDocument, UpdateProductVariantsDocument, UpdateProductsBulkDocument, UpdatePromotionDocument, UpdateRoleDocument, UpdateSellerDocument, UpdateShippingMethodDocument, UpdateStockLocationDocument, UpdateTagDocument, UpdateTaxCategoryDocument, UpdateTaxRateDocument, UpdateUserChannelsDocument, UpdateVariantsBulkDocument, UpdateZoneDocument, UserMenuComponent, UserStatusFragmentDoc, ZONE_FRAGMENT, ZoneDetailFragmentDoc, ZoneFragmentDoc, ZoneListItemFragmentDoc, ZoneSelectorComponent, addActionBarItem, addCustomFields, addNavMenuItem, addNavMenuSection, addTable, blockQuoteRule, buildInputRules, buildKeymap, buildMenuItems, bulletListRule, canInsert, clientResolvers, codeBlockRule, configurableDefinitionToInstance, configurableOperationValueIsValid, createApollo, createBaseDetailResolveFn, createBulkAssignToChannelAction, createBulkDeleteAction, createBulkRemoveFromChannelAction, createResolveData, createUpdatedTranslatable, currentChannelIsNotDefault, customMenuPlugin, dayOfWeekIndex, defaultFormInputs, detailBreadcrumb, detailComponentWithResolver, encodeConfigArgValue, findTranslation, getAppConfig, getChannelCodeFromUserStatus, getClientDefaults, getConfigArgValue, getCustomFieldsDefaults, getDefaultConfigArgValue, getDefaultUiLanguage, getDefaultUiLocale, getDefaultValue, getMarkRange, getOrderStateTranslationToken, getServerLocation, getTableMenu, getTableNodes, headingRule, hostExternalFrame, iframeNode, iframeNodeView, imageContextMenuPlugin, initializeServerConfigService, insertImageItem, interpolateDescription, result as introspectionResult, isEntityCreateOrUpdateMutation, isMultiChannel, jsonValidator, linkItem, linkMark, linkSelectPlugin, loadAppConfig, markActive, orderedListRule, rawEditorPlugin, registerBulkAction, registerCustomDetailComponent, registerDashboardWidget, registerDataTableComponent, registerDefaultFormInputs, registerFormInputComponent, registerHistoryEntryComponent, registerPageTab, registerRouteComponent, removeReadonlyCustomFields, renderClarityIcon, setDashboardWidgetLayout, stringToColor, tableContextMenuPlugin, titleSetter, toConfigurableOperationInput, tooltipPlugin, transformRelationCustomFieldInputs, unicodePatternValidator, weekDayNames, wrapInMenuItemWithIcon };
+export { ADDRESS_FRAGMENT, ADD_CUSTOMERS_TO_GROUP, ADD_ITEM_TO_DRAFT_ORDER, ADD_MANUAL_PAYMENT_TO_ORDER, ADD_MEMBERS_TO_ZONE, ADD_NOTE_TO_CUSTOMER, ADD_NOTE_TO_ORDER, ADD_OPTION_GROUP_TO_PRODUCT, ADD_OPTION_TO_GROUP, ADJUST_DRAFT_ORDER_LINE, ADMINISTRATOR_FRAGMENT, ADMIN_UI_VERSION, ALL_CUSTOM_FIELDS_FRAGMENT, APPLY_COUPON_CODE_TO_DRAFT_ORDER, ASSET_FRAGMENT, ASSET_PREVIEW_QUERY, ASSIGN_COLLECTIONS_TO_CHANNEL, ASSIGN_FACETS_TO_CHANNEL, ASSIGN_PRODUCTS_TO_CHANNEL, ASSIGN_ROLE_TO_ADMINISTRATOR, ASSIGN_VARIANTS_TO_CHANNEL, ATTEMPT_LOGIN, AUTH_REDIRECT_PARAM, ActionBarComponent, ActionBarItemsComponent, ActionBarLeftComponent, ActionBarRightComponent, AddCustomersToGroupDocument, AddFilterPresetButtonComponent, AddItemToDraftOrderDocument, AddManualPaymentDocument, AddMembersToZoneDocument, AddNoteToCustomerDocument, AddNoteToOrderDocument, AddOptionGroupToProductDocument, AddOptionToGroupDocument, AddressFormComponent, AddressFragmentDoc, AdjustDraftOrderLineDocument, AdjustmentType, AdministratorDataService, AdministratorFragmentDoc, AdministratorListItemFragmentDoc, AffixedInputComponent, Alert, AlertsComponent, AlertsService, AngularRouteComponent, AppComponent, AppComponentModule, AppShellComponent, ApplyCouponCodeToDraftOrderDocument, AssetDetailQueryDocument, AssetFileInputComponent, AssetFragmentDoc, AssetGalleryComponent, AssetPickerDialogComponent, AssetPreviewComponent, AssetPreviewDialogComponent, AssetPreviewLinksComponent, AssetPreviewPipe, AssetPreviewQueryDocument, AssetSearchInputComponent, AssetType, AssignCollectionsToChannelDocument, AssignFacetsToChannelDocument, AssignPaymentMethodsToChannelDocument, AssignProductsToChannelDocument, AssignPromotionsToChannelDocument, AssignRoleToAdministratorDocument, AssignShippingMethodsToChannelDocument, AssignStockLocationsToChannelDocument, AssignToChannelDialogComponent, AssignVariantsToChannelDocument, AttemptLoginDocument, AuthDataService, AuthGuard, AuthService, BOOLEAN_CUSTOM_FIELD_FRAGMENT, BaseCodeEditorFormInputComponent, BaseDataService, BaseDetailComponent, BaseEntityResolver, BaseListComponent, BaseNavComponent, BooleanCustomFieldFragmentDoc, BooleanFormInputComponent, BreadcrumbComponent, BreadcrumbService, BulkActionMenuComponent, BulkActionRegistryService, CANCEL_JOB, CANCEL_ORDER, CANCEL_PAYMENT, CHANNEL_FRAGMENT, COLLECTION_FOR_LIST_FRAGMENT, COLLECTION_FRAGMENT, CONFIGURABLE_OPERATION_DEF_FRAGMENT, CONFIGURABLE_OPERATION_FRAGMENT, COUNTRY_FRAGMENT, CREATE_ADMINISTRATOR, CREATE_ASSETS, CREATE_CHANNEL, CREATE_COLLECTION, CREATE_COUNTRY, CREATE_CUSTOMER, CREATE_CUSTOMER_ADDRESS, CREATE_CUSTOMER_GROUP, CREATE_DRAFT_ORDER, CREATE_FACET, CREATE_FACET_VALUES, CREATE_FULFILLMENT, CREATE_PAYMENT_METHOD, CREATE_PRODUCT, CREATE_PRODUCT_OPTION_GROUP, CREATE_PRODUCT_VARIANTS, CREATE_PROMOTION, CREATE_ROLE, CREATE_SELLER, CREATE_SHIPPING_METHOD, CREATE_TAG, CREATE_TAX_CATEGORY, CREATE_TAX_RATE, CREATE_ZONE, CURRENT_USER_FRAGMENT, CUSTOMER_FRAGMENT, CUSTOMER_GROUP_FRAGMENT, CUSTOM_FIELD_CONFIG_FRAGMENT, CanDeactivateDetailGuard, CancelJobDocument, CancelOrderDocument, CancelPaymentDocument, CardComponent, CardControlsDirective, ChannelAssignmentControlComponent, ChannelBadgeComponent, ChannelFragmentDoc, ChannelLabelPipe, ChannelService, ChannelSwitcherComponent, ChartComponent, CheckJobsLink, ChipComponent, ClientDataService, CollectionDataService, CollectionDetailQueryDocument, CollectionForListFragmentDoc, CollectionFragmentDoc, CombinationModeFormInputComponent, ComponentRegistryService, ConfigurableInputComponent, ConfigurableOperationDefFragmentDoc, ConfigurableOperationFragmentDoc, ContextMenuComponent, ContextMenuService, CoreModule, CountryFragmentDoc, CountryListItemFragmentDoc, CreateAdministratorDocument, CreateAssetsDocument, CreateChannelDocument, CreateCollectionDocument, CreateCountryDocument, CreateCustomerAddressDocument, CreateCustomerDocument, CreateCustomerGroupDocument, CreateDraftOrderDocument, CreateFacetDocument, CreateFacetValuesDocument, CreateFulfillmentDocument, CreatePaymentMethodDocument, CreateProductDocument, CreateProductOptionGroupDocument, CreateProductVariantsDocument, CreatePromotionDocument, CreateRoleDocument, CreateSellerDocument, CreateShippingMethodDocument, CreateStockLocationDocument, CreateTagDocument, CreateTaxCategoryDocument, CreateTaxRateDocument, CreateZoneDocument, CurrencyCode, CurrencyCodeSelectorComponent, CurrencyFormInputComponent, CurrencyInputComponent, CurrentUserFragmentDoc, CustomDetailComponentHostComponent, CustomDetailComponentService, CustomFieldComponentService, CustomFieldConfigFragmentDoc, CustomFieldControlComponent, CustomFieldDescriptionPipe, CustomFieldLabelPipe, CustomFieldsFragmentDoc, CustomFilterComponentDirective, CustomHttpTranslationLoader, CustomerDataService, CustomerDetailQueryDocument, CustomerFragmentDoc, CustomerGroupDetailFragmentDoc, CustomerGroupFormInputComponent, CustomerGroupFragmentDoc, CustomerLabelComponent, CustomerListItemFragmentDoc, CustomerListQueryDocument, DATE_TIME_CUSTOM_FIELD_FRAGMENT, DELETE_ADMINISTRATOR, DELETE_ADMINISTRATORS, DELETE_ASSETS, DELETE_CHANNEL, DELETE_CHANNELS, DELETE_COLLECTION, DELETE_COLLECTIONS, DELETE_COUNTRIES, DELETE_COUNTRY, DELETE_CUSTOMER, DELETE_CUSTOMERS, DELETE_CUSTOMER_ADDRESS, DELETE_CUSTOMER_GROUP, DELETE_CUSTOMER_GROUPS, DELETE_CUSTOMER_NOTE, DELETE_DRAFT_ORDER, DELETE_FACET, DELETE_FACETS, DELETE_FACET_VALUES, DELETE_ORDER_NOTE, DELETE_PAYMENT_METHOD, DELETE_PAYMENT_METHODS, DELETE_PRODUCT, DELETE_PRODUCTS, DELETE_PRODUCT_OPTION, DELETE_PRODUCT_VARIANT, DELETE_PRODUCT_VARIANTS, DELETE_PROMOTION, DELETE_PROMOTIONS, DELETE_ROLE, DELETE_ROLES, DELETE_SELLER, DELETE_SELLERS, DELETE_SHIPPING_METHOD, DELETE_SHIPPING_METHODS, DELETE_TAG, DELETE_TAX_CATEGORIES, DELETE_TAX_CATEGORY, DELETE_TAX_RATE, DELETE_TAX_RATES, DELETE_ZONE, DELETE_ZONES, DISCOUNT_FRAGMENT, DRAFT_ORDER_ELIGIBLE_SHIPPING_METHODS, DashboardWidgetService, DataModule, DataService, DataTable2ColumnComponent, DataTable2Component, DataTable2SearchComponent, DataTableColumnComponent, DataTableColumnPickerComponent, DataTableComponent, DataTableCustomComponentService, DataTableCustomFieldColumnComponent, DataTableFilter, DataTableFilterCollection, DataTableFilterLabelComponent, DataTableFilterPresetsComponent, DataTableFiltersComponent, DataTableSort, DataTableSortCollection, DateFormInputComponent, DateTimeCustomFieldFragmentDoc, DatetimePickerComponent, DatetimePickerService, DefaultInterceptor, DeleteAdministratorDocument, DeleteAdministratorsDocument, DeleteAssetsDocument, DeleteChannelDocument, DeleteChannelsDocument, DeleteCollectionDocument, DeleteCollectionsDocument, DeleteCountriesDocument, DeleteCountryDocument, DeleteCustomerAddressDocument, DeleteCustomerDocument, DeleteCustomerGroupDocument, DeleteCustomerGroupsDocument, DeleteCustomerNoteDocument, DeleteCustomersDocument, DeleteDraftOrderDocument, DeleteFacetDocument, DeleteFacetValuesDocument, DeleteFacetsDocument, DeleteOrderNoteDocument, DeletePaymentMethodDocument, DeletePaymentMethodsDocument, DeleteProductDocument, DeleteProductOptionDocument, DeleteProductVariantDocument, DeleteProductVariantsDocument, DeleteProductsDocument, DeletePromotionDocument, DeletePromotionsDocument, DeleteRoleDocument, DeleteRolesDocument, DeleteSellerDocument, DeleteSellersDocument, DeleteShippingMethodDocument, DeleteShippingMethodsDocument, DeleteStockLocationsDocument, DeleteTagDocument, DeleteTaxCategoriesDocument, DeleteTaxCategoryDocument, DeleteTaxRateDocument, DeleteTaxRatesDocument, DeleteZoneDocument, DeleteZonesDocument, DeletionResult, DialogButtonsDirective, DialogComponentOutletComponent, DialogTitleDirective, DisabledDirective, DiscountFragmentDoc, DraftOrderEligibleShippingMethodsDocument, DropdownComponent, DropdownItemDirective, DropdownMenuComponent, DropdownTriggerDirective, DurationPipe, DynamicFormInputComponent, ERROR_RESULT_FRAGMENT, EditNoteDialogComponent, EmptyPlaceholderComponent, EntityInfoComponent, ErrorCode, ErrorResultFragmentDoc, ExtensionHostComponent, ExtensionHostConfig, ExtensionHostService, ExternalImageDialogComponent, FACET_VALUE_FRAGMENT, FACET_WITH_VALUES_FRAGMENT, FACET_WITH_VALUE_LIST_FRAGMENT, FLOAT_CUSTOM_FIELD_FRAGMENT, FULFILLMENT_FRAGMENT, FacetDataService, FacetValueChipComponent, FacetValueFormInputComponent, FacetValueFragmentDoc, FacetValueSelectorComponent, FacetWithValueListFragmentDoc, FacetWithValuesFragmentDoc, FetchAdapter, FileSizePipe, FilterPresetService, FilterWithValue, FloatCustomFieldFragmentDoc, FocalPointControlComponent, FormFieldComponent, FormFieldControlDirective, FormItemComponent, FormattedAddressComponent, FulfillmentFragmentDoc, GET_ACTIVE_ADMINISTRATOR, GET_ACTIVE_CHANNEL, GET_ADJUSTMENT_OPERATIONS, GET_ASSET, GET_ASSET_LIST, GET_AVAILABLE_COUNTRIES, GET_CHANNELS, GET_CLIENT_STATE, GET_COLLECTION_CONTENTS, GET_COLLECTION_FILTERS, GET_COLLECTION_LIST, GET_CURRENT_USER, GET_CUSTOMER_GROUPS, GET_CUSTOMER_GROUP_WITH_CUSTOMERS, GET_CUSTOMER_HISTORY, GET_CUSTOMER_LIST, GET_FACET_VALUE_LIST, GET_GLOBAL_SETTINGS, GET_JOBS_BY_ID, GET_JOBS_LIST, GET_JOB_INFO, GET_JOB_QUEUE_LIST, GET_NEWTORK_STATUS, GET_ORDER, GET_ORDERS_LIST, GET_ORDER_HISTORY, GET_PAYMENT_METHOD_OPERATIONS, GET_PENDING_SEARCH_INDEX_UPDATES, GET_PRODUCT_LIST, GET_PRODUCT_OPTION_GROUP, GET_PRODUCT_OPTION_GROUPS, GET_PRODUCT_SIMPLE, GET_PRODUCT_VARIANT, GET_PRODUCT_VARIANTS_FOR_MULTI_SELECTOR, GET_PRODUCT_VARIANT_LIST, GET_PRODUCT_VARIANT_LIST_FOR_PRODUCT, GET_PRODUCT_VARIANT_LIST_SIMPLE, GET_PRODUCT_VARIANT_OPTIONS, GET_PRODUCT_WITH_VARIANTS, GET_ROLES, GET_SELLERS, GET_SERVER_CONFIG, GET_SHIPPING_METHOD_OPERATIONS, GET_TAG, GET_TAG_LIST, GET_TAX_CATEGORIES, GET_TAX_RATE_LIST_SIMPLE, GET_UI_STATE, GET_USER_STATUS, GET_ZONE, GET_ZONE_SELECTOR_LIST, GLOBAL_SETTINGS_FRAGMENT, GetActiveAdministratorDocument, GetActiveChannelDocument, GetAddManualPaymentMethodListDocument, GetAdjustmentOperationsDocument, GetAdministratorDetailDocument, GetAdministratorListDocument, GetAllJobsDocument, GetAssetDocument, GetAssetListDocument, GetAvailableCountriesDocument, GetChannelDetailDocument, GetChannelListDocument, GetChannelsDocument, GetClientStateDocument, GetCollectionContentsDocument, GetCollectionFiltersDocument, GetCollectionListDocument, GetCountryDetailDocument, GetCountryListDocument, GetCouponCodeSelectorPromotionListDocument, GetCurrentUserDocument, GetCustomerAddressesDocument, GetCustomerGroupDetailDocument, GetCustomerGroupListDocument, GetCustomerGroupWithCustomersDocument, GetCustomerGroupsDocument, GetCustomerHistoryDocument, GetCustomerListDocument, GetFacetDetailDocument, GetFacetListDocument, GetFacetValueListDocument, GetGlobalSettingsDetailDocument, GetGlobalSettingsDocument, GetJobInfoDocument, GetJobQueueListDocument, GetJobsByIdDocument, GetLatestOrdersDocument, GetNetworkStatusDocument, GetOrderChartDataDocument, GetOrderDocument, GetOrderHistoryDocument, GetOrderListDocument, GetOrderSummaryDocument, GetPaymentMethodDetailDocument, GetPaymentMethodListDocument, GetPaymentMethodOperationsDocument, GetPendingSearchIndexUpdatesDocument, GetProductDetailDocument, GetProductListDocument, GetProductOptionGroupDocument, GetProductOptionGroupsDocument, GetProductSimpleDocument, GetProductVariantDetailDocument, GetProductVariantDocument, GetProductVariantListDocument, GetProductVariantListForProductDocument, GetProductVariantListSimpleDocument, GetProductVariantOptionsDocument, GetProductVariantsForMultiSelectorDocument, GetProductVariantsQuickJumpDocument, GetProductWithVariantsDocument, GetProductsWithFacetValuesByIdsDocument, GetProfileDetailDocument, GetPromotionDetailDocument, GetPromotionListDocument, GetRoleDetailDocument, GetRoleListDocument, GetRolesDocument, GetSellerDetailDocument, GetSellerListDocument, GetSellerOrdersDocument, GetSellersDocument, GetServerConfigDocument, GetShippingMethodDetailDocument, GetShippingMethodListDocument, GetShippingMethodOperationsDocument, GetStockLocationDetailDocument, GetStockLocationListDocument, GetTagDocument, GetTagListDocument, GetTaxCategoriesDocument, GetTaxCategoryDetailDocument, GetTaxCategoryListDocument, GetTaxRateDetailDocument, GetTaxRateListDocument, GetTaxRateListSimpleDocument, GetUiStateDocument, GetUserStatusDocument, GetVariantsWithFacetValuesByIdsDocument, GetZoneDetailDocument, GetZoneDocument, GetZoneListDocument, GetZoneMembersDocument, GetZoneSelectorListDocument, GlobalFlag, GlobalSettingsDetailFragmentDoc, GlobalSettingsFragmentDoc, HasPermissionPipe, HealthCheckService, HelpTooltipComponent, HistoryEntryComponentService, HistoryEntryDetailComponent, HistoryEntryType, HtmlEditorFormInputComponent, HttpLoaderFactory, I18nService, INT_CUSTOM_FIELD_FRAGMENT, IconSize, IfDefaultChannelActiveDirective, IfDirectiveBase, IfMultichannelDirective, IfPermissionsDirective, InjectableTranslateMessageFormatCompiler, IntCustomFieldFragmentDoc, ItemsPerPageControlsComponent, JOB_INFO_FRAGMENT, JobInfoFragmentDoc, JobQueueService, JobState, JsonEditorFormInputComponent, LOCALE_STRING_CUSTOM_FIELD_FRAGMENT, LOCALE_TEXT_CUSTOM_FIELD_FRAGMENT, LOG_OUT, LabeledDataComponent, LanguageCode, LanguageCodeSelectorComponent, LanguageSelectorComponent, LinkDialogComponent, LocalStorageService, LocaleBasePipe, LocaleCurrencyNamePipe, LocaleCurrencyPipe, LocaleDatePipe, LocaleLanguageNamePipe, LocaleRegionNamePipe, LocaleStringCustomFieldFragmentDoc, LocaleTextCustomFieldFragmentDoc, 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, PreviewCollectionContentsDocument, ProductDataService, ProductDetailFragmentDoc, ProductForListFragmentDoc, ProductListQueryDocument, ProductListQueryProductFragmentFragmentDoc, ProductMultiSelectorDialogComponent, ProductMultiSelectorFormInputComponent, ProductOptionFragmentDoc, ProductOptionGroupFragmentDoc, ProductOptionGroupWithOptionsFragmentDoc, ProductSearchInputComponent, ProductSelectorFormInputComponent, ProductSelectorSearchDocument, ProductVariantDetailQueryProductVariantFragmentFragmentDoc, ProductVariantFragmentDoc, ProductVariantListQueryDocument, ProductVariantListQueryProductVariantFragmentFragmentDoc, ProductVariantSelectorComponent, ProductVariantUpdateMutationDocument, ProfileDetailFragmentDoc, PromotionDataService, PromotionFragmentDoc, ProsemirrorService, QueryResult, REFUND_FRAGMENT, REFUND_ORDER, REINDEX, RELATION_ASSET_INPUT_QUERY, RELATION_CUSTOM_FIELD_FRAGMENT, REMOVE_COLLECTIONS_FROM_CHANNEL, REMOVE_COUPON_CODE_FROM_DRAFT_ORDER, REMOVE_CUSTOMERS_FROM_GROUP, REMOVE_DRAFT_ORDER_LINE, REMOVE_FACETS_FROM_CHANNEL, REMOVE_MEMBERS_FROM_ZONE, REMOVE_OPTION_GROUP_FROM_PRODUCT, REMOVE_PRODUCTS_FROM_CHANNEL, REMOVE_VARIANTS_FROM_CHANNEL, REQUEST_COMPLETED, REQUEST_STARTED, ROLE_FRAGMENT, ROUTE_COMPONENT_OPTIONS, RUN_PENDING_SEARCH_INDEX_UPDATES, RadioCardComponent, RadioCardFieldsetComponent, RawHtmlDialogComponent, RefundFragmentDoc, RefundOrderDocument, ReindexDocument, RelationAssetInputComponent, RelationAssetInputQueryDocument, RelationCardComponent, RelationCardDetailDirective, RelationCardPreviewDirective, RelationCustomFieldFragmentDoc, RelationCustomerInputComponent, RelationFormInputComponent, RelationGenericInputComponent, RelationProductInputComponent, RelationProductVariantInputComponent, RelationSelectorDialogComponent, RemoveCollectionsFromChannelDocument, RemoveCouponCodeFromDraftOrderDocument, RemoveCustomersFromGroupDocument, RemoveDraftOrderLineDocument, RemoveFacetsFromChannelDocument, RemoveMembersFromZoneDocument, RemoveOptionGroupFromProductDocument, RemovePaymentMethodsFromChannelDocument, RemoveProductsFromChannelDocument, RemovePromotionsFromChannelDocument, RemoveShippingMethodsFromChannelDocument, RemoveStockLocationsFromChannelDocument, RemoveVariantsFromChannelDocument, RenameFilterPresetDialogComponent, RequestCompletedDocument, RequestStartedDocument, RichTextEditorComponent, RichTextFormInputComponent, RoleFragmentDoc, RouteComponent, RunPendingSearchIndexUpdatesDocument, SEARCH_PRODUCTS, SELLER_FRAGMENT, SETTLE_PAYMENT, SETTLE_REFUND, SET_ACTIVE_CHANNEL, SET_AS_LOGGED_IN, SET_AS_LOGGED_OUT, SET_BILLING_ADDRESS_FOR_DRAFT_ORDER, SET_CONTENT_LANGUAGE, SET_CUSTOMER_FOR_DRAFT_ORDER, SET_DISPLAY_UI_EXTENSION_POINTS, SET_DRAFT_ORDER_SHIPPING_METHOD, SET_MAIN_NAV_EXPANDED, SET_SHIPPING_ADDRESS_FOR_DRAFT_ORDER, SET_UI_LANGUAGE_AND_LOCALE, SET_UI_LOCALE, SET_UI_THEME, SHIPPING_METHOD_FRAGMENT, STRING_CUSTOM_FIELD_FRAGMENT, SearchProductsDocument, SelectFormInputComponent, SelectToggleComponent, SelectionManager, SellerDetailFragmentDoc, SellerFragmentDoc, SellerListItemFragmentDoc, SentenceCasePipe, ServerConfigService, SetActiveChannelDocument, SetAsLoggedInDocument, SetAsLoggedOutDocument, SetContentLanguageDocument, SetCustomerForDraftOrderDocument, SetDisplayUiExtensionPointsDocument, SetDraftOrderBillingAddressDocument, SetDraftOrderShippingAddressDocument, SetDraftOrderShippingMethodDocument, SetMainNavExpandedDocument, SetUiLanguageDocument, SetUiLocaleDocument, SetUiThemeDocument, SettingsDataService, SettingsNavComponent, SettlePaymentDocument, SettleRefundDocument, SharedModule, ShippingMethodDataService, ShippingMethodFragmentDoc, ShippingMethodListItemFragmentDoc, SimpleDialogComponent, SingleSearchSelectionModel, SingleSearchSelectionModelFactory, SortOrder, SortPipe, SplitViewComponent, SplitViewLeftDirective, SplitViewRightDirective, StateI18nTokenPipe, StatusBadgeComponent, StockLocationDetailFragmentDoc, StockLocationListItemFragmentDoc, StockMovementType, StringCustomFieldFragmentDoc, StringToColorPipe, SubMenuWithIcon, TAG_FRAGMENT, TAX_CATEGORY_FRAGMENT, TAX_RATE_FRAGMENT, TEST_ELIGIBLE_SHIPPING_METHODS, TEST_SHIPPING_METHOD, TEXT_CUSTOM_FIELD_FRAGMENT, TRANSITION_FULFILLMENT_TO_STATE, TRANSITION_ORDER_TO_STATE, TRANSITION_PAYMENT_TO_STATE, TabbedCustomFieldsComponent, TableRowActionComponent, TagFragmentDoc, TagSelectorComponent, TaxCategoryFragmentDoc, TaxRateFragmentDoc, TestEligibleShippingMethodsDocument, TestShippingMethodDocument, TextCustomFieldFragmentDoc, TextFormInputComponent, TextareaFormInputComponent, ThemeSwitcherComponent, TimeAgoPipe, TimelineEntryComponent, TitleInputComponent, TransitionFulfillmentToStateDocument, TransitionOrderToStateDocument, TransitionPaymentToStateDocument, TypedBaseDetailComponent, TypedBaseListComponent, UPDATE_ACTIVE_ADMINISTRATOR, UPDATE_ADMINISTRATOR, UPDATE_ASSET, UPDATE_CHANNEL, UPDATE_COLLECTION, UPDATE_COUNTRY, UPDATE_CUSTOMER, UPDATE_CUSTOMER_ADDRESS, UPDATE_CUSTOMER_GROUP, UPDATE_CUSTOMER_NOTE, UPDATE_FACET, UPDATE_FACET_VALUES, UPDATE_GLOBAL_SETTINGS, UPDATE_ORDER_CUSTOM_FIELDS, UPDATE_ORDER_NOTE, UPDATE_PAYMENT_METHOD, UPDATE_PRODUCT, UPDATE_PRODUCT_OPTION, UPDATE_PRODUCT_OPTION_GROUP, UPDATE_PRODUCT_VARIANTS, UPDATE_PROMOTION, UPDATE_ROLE, UPDATE_SELLER, UPDATE_SHIPPING_METHOD, UPDATE_TAG, UPDATE_TAX_CATEGORY, UPDATE_TAX_RATE, UPDATE_USER_CHANNELS, UPDATE_ZONE, USER_STATUS_FRAGMENT, UiExtensionPointComponent, UiLanguageSwitcherDialogComponent, UpdateActiveAdministratorDocument, UpdateAdministratorDocument, UpdateAssetDocument, UpdateChannelDocument, UpdateCollectionDocument, UpdateCountryDocument, UpdateCustomerAddressDocument, UpdateCustomerDocument, UpdateCustomerGroupDocument, UpdateCustomerNoteDocument, UpdateFacetDocument, UpdateFacetValuesDocument, UpdateGlobalSettingsDocument, UpdateOrderCustomFieldsDocument, UpdateOrderNoteDocument, UpdatePaymentMethodDocument, UpdateProductDocument, UpdateProductOptionDocument, UpdateProductOptionGroupDocument, UpdateProductVariantsDocument, UpdateProductsBulkDocument, UpdatePromotionDocument, UpdateRoleDocument, UpdateSellerDocument, UpdateShippingMethodDocument, UpdateStockLocationDocument, UpdateTagDocument, UpdateTaxCategoryDocument, UpdateTaxRateDocument, UpdateUserChannelsDocument, UpdateVariantsBulkDocument, UpdateZoneDocument, UserMenuComponent, UserStatusFragmentDoc, ZONE_FRAGMENT, ZoneDetailFragmentDoc, ZoneFragmentDoc, ZoneListItemFragmentDoc, ZoneSelectorComponent, addActionBarItem, addCustomFields, addNavMenuItem, addNavMenuSection, addTable, blockQuoteRule, buildInputRules, buildKeymap, buildMenuItems, bulletListRule, canInsert, clientResolvers, codeBlockRule, configurableDefinitionToInstance, configurableOperationValueIsValid, createApollo, createBaseDetailResolveFn, createBulkAssignToChannelAction, createBulkDeleteAction, createBulkRemoveFromChannelAction, createResolveData, createUpdatedTranslatable, currentChannelIsNotDefault, customMenuPlugin, dayOfWeekIndex, defaultFormInputs, detailBreadcrumb, detailComponentWithResolver, encodeConfigArgValue, findTranslation, getAppConfig, getChannelCodeFromUserStatus, getClientDefaults, getConfigArgValue, getCustomFieldsDefaults, getDefaultConfigArgValue, getDefaultUiLanguage, getDefaultUiLocale, getDefaultValue, getMarkRange, getOrderStateTranslationToken, getServerLocation, getTableMenu, getTableNodes, headingRule, hostExternalFrame, iframeNode, iframeNodeView, imageContextMenuPlugin, initializeServerConfigService, insertImageItem, interpolateDescription, result as introspectionResult, isEntityCreateOrUpdateMutation, isMultiChannel, jsonValidator, linkItem, linkMark, linkSelectPlugin, loadAppConfig, markActive, orderedListRule, rawEditorPlugin, registerBulkAction, registerCustomDetailComponent, registerDashboardWidget, registerDataTableComponent, registerDefaultFormInputs, registerFormInputComponent, registerHistoryEntryComponent, registerPageTab, registerRouteComponent, removeReadonlyCustomFields, renderClarityIcon, setDashboardWidgetLayout, stringToColor, tableContextMenuPlugin, titleSetter, toConfigurableOperationInput, tooltipPlugin, transformRelationCustomFieldInputs, unicodePatternValidator, weekDayNames, wrapInMenuItemWithIcon };
 //# sourceMappingURL=vendure-admin-ui-core.mjs.map