npm - @vendure/admin-ui - Versions diffs - 2.0.0-next.10 → 2.0.0-next.11 - Mend

@vendure/admin-ui 2.0.0-next.10 → 2.0.0-next.11

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

Files changed (55) hide show

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

@@ -15,7 +15,7 @@ import * as i1$1 from '@angular/common/http';
 import { HttpResponse, HttpErrorResponse, HttpClientModule, HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
 import * as i1$2 from '@angular/router';
 import { NavigationEnd, PRIMARY_OUTLET, RouterModule, ActivationStart } from '@angular/router';
-import * as i2$2 from '@angular/platform-browser';
+import * as i2$1 from '@angular/platform-browser';
 import { BrowserModule, Title } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import * as i7 from '@ngx-translate/core';
@@ -23,7 +23,7 @@ import { TranslateModule, TranslateLoader, TranslateCompiler } from '@ngx-transl
 import { TranslateMessageFormatCompiler, MESSAGE_FORMAT_CONFIG } from 'ngx-translate-messageformat-compiler';
 import * as i1$3 from '@clr/angular';
 import { ClarityModule } from '@clr/angular';
-import * as i2 from '@angular/forms';
+import * as i3$1 from '@angular/forms';
 import { FormControl, FormArray, NG_VALUE_ACCESSOR, FormGroup, Validators, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DEFAULT_CHANNEL_CODE, DEFAULT_AUTH_TOKEN_HEADER_KEY } from '@vendure/common/lib/shared-constants';
 import { TemplatePortal } from '@angular/cdk/portal';
@@ -37,9 +37,9 @@ import { createUploadLink } from 'apollo-upload-client';
 import { omit } from '@vendure/common/lib/omit';
 import { __awaiter } from 'tslib';
 import { CodeJar } from 'codejar';
-import * as i3$1 from '@angular/cdk/drag-drop';
+import * as i3$2 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i2$1 from '@ng-select/ng-select';
+import * as i2 from '@ng-select/ng-select';
 import { NgSelectComponent, SELECTION_MODEL_FACTORY, NgSelectModule } from '@ng-select/ng-select';
 import dayjs from 'dayjs';
 import * as i9 from '@angular/cdk/bidi';
@@ -5967,13 +5967,13 @@ class FormFieldControlDirective {
         }
     }
 }
-FormFieldControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FormFieldControlDirective, deps: [{ token: i0.ElementRef }, { token: i2.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+FormFieldControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FormFieldControlDirective, deps: [{ token: i0.ElementRef }, { token: i3$1.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 FormFieldControlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: FormFieldControlDirective, selector: "input, textarea, select", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FormFieldControlDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'input, textarea, select' }]
         }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i2.NgControl, decorators: [{
+        return [{ type: i0.ElementRef }, { type: i3$1.NgControl, decorators: [{
                         type: Optional
                     }] }];
     } });
@@ -6651,7 +6651,7 @@ class UiLanguageSwitcherDialogComponent {
     }
 }
 UiLanguageSwitcherDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: UiLanguageSwitcherDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UiLanguageSwitcherDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: UiLanguageSwitcherDialogComponent, selector: "vdr-ui-language-switcher", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'common.select-display-language' | translate }}</ng-template>\r\n<div class=\"clr-row\">\r\n    <div class=\"clr-col-md-6\">\r\n        <clr-select-container>\r\n            <label>{{ 'common.language' | translate }}</label>\r\n            <select\r\n                clrSelect\r\n                name=\"options\"\r\n                [(ngModel)]=\"currentLanguage\"\r\n                (ngModelChange)=\"updatePreviewLocale()\"\r\n            >\r\n                <option *ngFor=\"let code of availableLanguages | sort\" [value]=\"code\">\r\n                    {{ code | uppercase }} ({{ code | localeLanguageName }})\r\n                </option>\r\n            </select>\r\n        </clr-select-container>\r\n    </div>\r\n    <div class=\"clr-col-md-6\">\r\n        <clr-datalist-container>\r\n            <label>{{ 'common.locale' | translate }}</label>\r\n            <input\r\n                clrDatalistInput\r\n                [(ngModel)]=\"currentLocale\"\r\n                (ngModelChange)=\"updatePreviewLocale()\"\r\n                [placeholder]=\"'common.browser-default' | translate\"\r\n                class=\"locale\"\r\n                name=\"Locale\"\r\n            />\r\n            <datalist>\r\n                <option *ngFor=\"let locale of availableLocales\" [value]=\"locale\">\r\n                    {{ locale }} ({{ locale | localeRegionName }})\r\n                </option>\r\n            </datalist>\r\n        </clr-datalist-container>\r\n    </div>\r\n</div>\r\n<div class=\"card\">\r\n    <div class=\"card-header\">\r\n        <span class=\"p2\">{{ 'common.sample-formatting' | translate }}:</span><strong>{{ previewLocale | localeLanguageName:previewLocale }}</strong>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"clr-row\">\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.medium-date' | translate\">\r\n                    {{ now | localeDate: 'medium':previewLocale }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'common.short-date' | translate\">\r\n                    {{ now | localeDate: 'short':previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <select clrSelect name=\"currency\" class=\"currency\" [(ngModel)]=\"selectedCurrencyCode\">\r\n                    <option *ngFor=\"let code of availableCurrencyCodes | sort\" [value]=\"code\">\r\n                        {{ code | uppercase }} ({{ code | localeCurrencyName: 'full':previewLocale }})\r\n                    </option>\r\n                </select>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                    {{ 12345 | localeCurrency: selectedCurrencyCode:previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-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)=\"setLanguage()\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.set-language' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: ["select.currency{max-width:200px}input.locale{text-transform:uppercase}\n"], components: [{ type: i1$3.ClrSelectContainer, selector: "clr-select-container" }, { type: i1$3.ClrDatalistContainer, selector: "clr-datalist-container" }, { type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }], directives: [{ type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$3.ClrSelect, selector: "[clrSelect]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$3.ClrDatalistInput, selector: "[clrDatalistInput]" }, { type: i1$3.ClrDatalist, selector: "datalist", inputs: ["id"] }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i7.TranslatePipe, "sort": SortPipe, "uppercase": i3.UpperCasePipe, "localeLanguageName": LocaleLanguageNamePipe, "localeRegionName": LocaleRegionNamePipe, "localeDate": LocaleDatePipe, "localeCurrencyName": LocaleCurrencyNamePipe, "localeCurrency": LocaleCurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiLanguageSwitcherDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: UiLanguageSwitcherDialogComponent, selector: "vdr-ui-language-switcher", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'common.select-display-language' | translate }}</ng-template>\r\n<div class=\"clr-row\">\r\n    <div class=\"clr-col-md-6\">\r\n        <clr-select-container>\r\n            <label>{{ 'common.language' | translate }}</label>\r\n            <select\r\n                clrSelect\r\n                name=\"options\"\r\n                [(ngModel)]=\"currentLanguage\"\r\n                (ngModelChange)=\"updatePreviewLocale()\"\r\n            >\r\n                <option *ngFor=\"let code of availableLanguages | sort\" [value]=\"code\">\r\n                    {{ code | uppercase }} ({{ code | localeLanguageName }})\r\n                </option>\r\n            </select>\r\n        </clr-select-container>\r\n    </div>\r\n    <div class=\"clr-col-md-6\">\r\n        <clr-datalist-container>\r\n            <label>{{ 'common.locale' | translate }}</label>\r\n            <input\r\n                clrDatalistInput\r\n                [(ngModel)]=\"currentLocale\"\r\n                (ngModelChange)=\"updatePreviewLocale()\"\r\n                [placeholder]=\"'common.browser-default' | translate\"\r\n                class=\"locale\"\r\n                name=\"Locale\"\r\n            />\r\n            <datalist>\r\n                <option *ngFor=\"let locale of availableLocales\" [value]=\"locale\">\r\n                    {{ locale }} ({{ locale | localeRegionName }})\r\n                </option>\r\n            </datalist>\r\n        </clr-datalist-container>\r\n    </div>\r\n</div>\r\n<div class=\"card\">\r\n    <div class=\"card-header\">\r\n        <span class=\"p2\">{{ 'common.sample-formatting' | translate }}:</span><strong>{{ previewLocale | localeLanguageName:previewLocale }}</strong>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"clr-row\">\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.medium-date' | translate\">\r\n                    {{ now | localeDate: 'medium':previewLocale }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'common.short-date' | translate\">\r\n                    {{ now | localeDate: 'short':previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <select clrSelect name=\"currency\" class=\"currency\" [(ngModel)]=\"selectedCurrencyCode\">\r\n                    <option *ngFor=\"let code of availableCurrencyCodes | sort\" [value]=\"code\">\r\n                        {{ code | uppercase }} ({{ code | localeCurrencyName: 'full':previewLocale }})\r\n                    </option>\r\n                </select>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                    {{ 12345 | localeCurrency: selectedCurrencyCode:previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-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)=\"setLanguage()\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.set-language' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: ["select.currency{max-width:200px}input.locale{text-transform:uppercase}\n"], components: [{ type: i1$3.ClrSelectContainer, selector: "clr-select-container" }, { type: i1$3.ClrDatalistContainer, selector: "clr-datalist-container" }, { type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }], directives: [{ type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$3.ClrSelect, selector: "[clrSelect]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$3.ClrDatalistInput, selector: "[clrDatalistInput]" }, { type: i1$3.ClrDatalist, selector: "datalist", inputs: ["id"] }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i7.TranslatePipe, "sort": SortPipe, "uppercase": i3.UpperCasePipe, "localeLanguageName": LocaleLanguageNamePipe, "localeRegionName": LocaleRegionNamePipe, "localeDate": LocaleDatePipe, "localeCurrencyName": LocaleCurrencyNamePipe, "localeCurrency": LocaleCurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: UiLanguageSwitcherDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-ui-language-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'common.select-display-language' | translate }}</ng-template>\r\n<div class=\"clr-row\">\r\n    <div class=\"clr-col-md-6\">\r\n        <clr-select-container>\r\n            <label>{{ 'common.language' | translate }}</label>\r\n            <select\r\n                clrSelect\r\n                name=\"options\"\r\n                [(ngModel)]=\"currentLanguage\"\r\n                (ngModelChange)=\"updatePreviewLocale()\"\r\n            >\r\n                <option *ngFor=\"let code of availableLanguages | sort\" [value]=\"code\">\r\n                    {{ code | uppercase }} ({{ code | localeLanguageName }})\r\n                </option>\r\n            </select>\r\n        </clr-select-container>\r\n    </div>\r\n    <div class=\"clr-col-md-6\">\r\n        <clr-datalist-container>\r\n            <label>{{ 'common.locale' | translate }}</label>\r\n            <input\r\n                clrDatalistInput\r\n                [(ngModel)]=\"currentLocale\"\r\n                (ngModelChange)=\"updatePreviewLocale()\"\r\n                [placeholder]=\"'common.browser-default' | translate\"\r\n                class=\"locale\"\r\n                name=\"Locale\"\r\n            />\r\n            <datalist>\r\n                <option *ngFor=\"let locale of availableLocales\" [value]=\"locale\">\r\n                    {{ locale }} ({{ locale | localeRegionName }})\r\n                </option>\r\n            </datalist>\r\n        </clr-datalist-container>\r\n    </div>\r\n</div>\r\n<div class=\"card\">\r\n    <div class=\"card-header\">\r\n        <span class=\"p2\">{{ 'common.sample-formatting' | translate }}:</span><strong>{{ previewLocale | localeLanguageName:previewLocale }}</strong>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"clr-row\">\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.medium-date' | translate\">\r\n                    {{ now | localeDate: 'medium':previewLocale }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'common.short-date' | translate\">\r\n                    {{ now | localeDate: 'short':previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <select clrSelect name=\"currency\" class=\"currency\" [(ngModel)]=\"selectedCurrencyCode\">\r\n                    <option *ngFor=\"let code of availableCurrencyCodes | sort\" [value]=\"code\">\r\n                        {{ code | uppercase }} ({{ code | localeCurrencyName: 'full':previewLocale }})\r\n                    </option>\r\n                </select>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                    {{ 12345 | localeCurrency: selectedCurrencyCode:previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-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)=\"setLanguage()\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.set-language' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: ["select.currency{max-width:200px}input.locale{text-transform:uppercase}\n"] }]
@@ -7253,7 +7253,7 @@ class ChannelSwitcherComponent {
     }
 }
 ChannelSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ChannelSwitcherComponent, deps: [{ token: DataService }, { token: LocalStorageService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ChannelSwitcherComponent, selector: "vdr-channel-switcher", ngImport: i0, template: "<ng-container>\r\n    <vdr-dropdown>\r\n        <button class=\"btn btn-link active-channel\" vdrDropdownTrigger>\r\n            <vdr-channel-badge [channelCode]=\"activeChannelCode$ | async\"></vdr-channel-badge>\r\n            <span class=\"active-channel\">{{\r\n                activeChannelCode$ | async | channelCodeToLabel | translate\r\n            }}</span>\r\n            <span class=\"trigger\"><clr-icon shape=\"caret down\"></clr-icon></span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <input\r\n                *ngIf=\"((channelCount$ | async) || 0) >= displayFilterThreshold\"\r\n                [formControl]=\"filterControl\"\r\n                type=\"text\"\r\n                class=\"ml2 mr2\"\r\n                [placeholder]=\"'common.filter' | translate\"\r\n            />\r\n            <button\r\n                *ngFor=\"let channel of channels$ | async\"\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"setActiveChannel(channel.id)\"\r\n            >\r\n                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                {{ channel.code | channelCodeToLabel | translate }}\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [":host{display:flex;align-items:center;margin:0 .5rem;height:2.5rem}.active-channel{color:var(--color-grey-200)}.active-channel clr-icon{color:#fff}\n"], components: [{ type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe, "channelCodeToLabel": ChannelLabelPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ChannelSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ChannelSwitcherComponent, selector: "vdr-channel-switcher", ngImport: i0, template: "<ng-container>\r\n    <vdr-dropdown>\r\n        <button class=\"btn btn-link active-channel\" vdrDropdownTrigger>\r\n            <vdr-channel-badge [channelCode]=\"activeChannelCode$ | async\"></vdr-channel-badge>\r\n            <span class=\"active-channel\">{{\r\n                activeChannelCode$ | async | channelCodeToLabel | translate\r\n            }}</span>\r\n            <span class=\"trigger\"><clr-icon shape=\"caret down\"></clr-icon></span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <input\r\n                *ngIf=\"((channelCount$ | async) || 0) >= displayFilterThreshold\"\r\n                [formControl]=\"filterControl\"\r\n                type=\"text\"\r\n                class=\"ml2 mr2\"\r\n                [placeholder]=\"'common.filter' | translate\"\r\n            />\r\n            <button\r\n                *ngFor=\"let channel of channels$ | async\"\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"setActiveChannel(channel.id)\"\r\n            >\r\n                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                {{ channel.code | channelCodeToLabel | translate }}\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [":host{display:flex;align-items:center;margin:0 .5rem;height:2.5rem}.active-channel{color:var(--color-grey-200)}.active-channel clr-icon{color:#fff}\n"], components: [{ type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe, "channelCodeToLabel": ChannelLabelPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ChannelSwitcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-channel-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\r\n    <vdr-dropdown>\r\n        <button class=\"btn btn-link active-channel\" vdrDropdownTrigger>\r\n            <vdr-channel-badge [channelCode]=\"activeChannelCode$ | async\"></vdr-channel-badge>\r\n            <span class=\"active-channel\">{{\r\n                activeChannelCode$ | async | channelCodeToLabel | translate\r\n            }}</span>\r\n            <span class=\"trigger\"><clr-icon shape=\"caret down\"></clr-icon></span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <input\r\n                *ngIf=\"((channelCount$ | async) || 0) >= displayFilterThreshold\"\r\n                [formControl]=\"filterControl\"\r\n                type=\"text\"\r\n                class=\"ml2 mr2\"\r\n                [placeholder]=\"'common.filter' | translate\"\r\n            />\r\n            <button\r\n                *ngFor=\"let channel of channels$ | async\"\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"setActiveChannel(channel.id)\"\r\n            >\r\n                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                {{ channel.code | channelCodeToLabel | translate }}\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [":host{display:flex;align-items:center;margin:0 .5rem;height:2.5rem}.active-channel{color:var(--color-grey-200)}.active-channel clr-icon{color:#fff}\n"] }]
@@ -8098,10 +8098,10 @@ class MainNavComponent {
     }
 }
 MainNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MainNavComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: NavBuilderService }, { token: HealthCheckService }, { token: JobQueueService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-MainNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: MainNavComponent, selector: "vdr-main-nav", ngImport: i0, template: "<nav class=\"sidenav\" [clr-nav-level]=\"2\">\r\n    <section class=\"sidenav-content\">\r\n        <ng-container *ngFor=\"let section of navBuilderService.navMenuConfig$ | async\">\r\n            <section\r\n                class=\"nav-group\"\r\n                [attr.data-section-id]=\"section.id\"\r\n                [class.collapsible]=\"section.collapsible\"\r\n                *ngIf=\"shouldDisplayLink(section)\"\r\n            >\r\n                <vdr-ui-extension-point [locationId]=\"section.id\" api=\"navMenu\" [topPx]=\"-6\" [leftPx]=\"8\">\r\n                    <ng-container *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\">\r\n                        <vdr-status-badge\r\n                            *ngIf=\"sectionBadge !== 'none'\"\r\n                            [type]=\"sectionBadge\"\r\n                        ></vdr-status-badge>\r\n                    </ng-container>\r\n                    <input [id]=\"section.id\" type=\"checkbox\" [checked]=\"section.collapsedByDefault\" />\r\n                    <label class=\"nav-group-header\" [for]=\"section.id\">{{ section.label | translate }}</label>\r\n                    <ul class=\"nav-list\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <li *ngIf=\"shouldDisplayLink(item)\">\r\n                                <a\r\n                                    class=\"nav-link\"\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    routerLinkActive=\"active\"\r\n                                    (click)=\"item.onClick && item.onClick($event)\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon [attr.shape]=\"item.icon || 'block'\" size=\"20\"></clr-icon>\r\n                                    {{ item.label | translate }}\r\n                                </a>\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                </vdr-ui-extension-point>\r\n            </section>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n", styles: [":host{order:-1;background-color:var(--clr-nav-background-color)}nav.sidenav{height:100%;width:10.8rem;border-right-color:var(--clr-sidenav-border-color)}.sidenav .nav-group .nav-list{margin:0}.sidenav .nav-group .nav-group-header{margin:0;line-height:1.2}.sidenav .nav-group .nav-link{display:inline-flex;line-height:1rem;padding-right:.6rem}.nav-list clr-icon{flex-shrink:0;margin-right:12px}.nav-group{-webkit-hyphens:auto;hyphens:auto}.nav-group,.nav-link{position:relative}.nav-group vdr-status-badge{left:10px;top:6px}.nav-link vdr-status-badge{left:25px;top:3px}\n"], components: [{ type: UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "topPx", "leftPx", "api"] }, { type: StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }], directives: [{ type: i1$3.ClrNavLevel, selector: "[clr-nav-level]", inputs: ["clr-nav-level"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe } });
+MainNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: MainNavComponent, selector: "vdr-main-nav", ngImport: i0, template: "<nav class=\"sidenav\" [clr-nav-level]=\"2\">\r\n    <section class=\"sidenav-content\">\r\n        <ng-container *ngFor=\"let section of navBuilderService.navMenuConfig$ | async\">\r\n            <section\r\n                class=\"nav-group\"\r\n                [attr.data-section-id]=\"section.id\"\r\n                [class.collapsible]=\"section.collapsible\"\r\n                *ngIf=\"shouldDisplayLink(section)\"\r\n            >\r\n                <vdr-ui-extension-point [locationId]=\"section.id\" api=\"navMenu\" [topPx]=\"-6\" [leftPx]=\"8\">\r\n                    <ng-container *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\">\r\n                        <vdr-status-badge\r\n                            *ngIf=\"sectionBadge !== 'none'\"\r\n                            [type]=\"sectionBadge\"\r\n                        ></vdr-status-badge>\r\n                    </ng-container>\r\n                    <input [id]=\"section.id\" type=\"checkbox\" [checked]=\"section.collapsedByDefault\" />\r\n                    <label class=\"nav-group-header\" [for]=\"section.id\">{{ section.label | translate }}</label>\r\n                    <ul class=\"nav-list\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <li *ngIf=\"shouldDisplayLink(item)\">\r\n                                <a\r\n                                    class=\"nav-link\"\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    routerLinkActive=\"active\"\r\n                                    (click)=\"item.onClick && item.onClick($event)\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon [attr.shape]=\"item.icon || 'block'\" size=\"20\"></clr-icon>\r\n                                    {{ item.label | translate }}\r\n                                </a>\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                </vdr-ui-extension-point>\r\n            </section>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n", styles: [":host{order:-1;background-color:var(--clr-nav-background-color)}nav.sidenav{height:100%;border-right-color:var(--clr-sidenav-border-color)}.sidenav .nav-group .nav-list{margin:0}.sidenav .nav-group .nav-group-header{margin:0;line-height:1.2}.sidenav .nav-group .nav-link{display:inline-flex;line-height:1rem;padding-right:.6rem}.nav-list clr-icon{flex-shrink:0;margin-right:12px}.nav-group{-webkit-hyphens:auto;hyphens:auto}.nav-group,.nav-link{position:relative}.nav-group vdr-status-badge{left:10px;top:6px}.nav-link vdr-status-badge{left:25px;top:3px}\n"], components: [{ type: UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "topPx", "leftPx", "api"] }, { type: StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }], directives: [{ type: i1$3.ClrNavLevel, selector: "[clr-nav-level]", inputs: ["clr-nav-level"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MainNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-main-nav', template: "<nav class=\"sidenav\" [clr-nav-level]=\"2\">\r\n    <section class=\"sidenav-content\">\r\n        <ng-container *ngFor=\"let section of navBuilderService.navMenuConfig$ | async\">\r\n            <section\r\n                class=\"nav-group\"\r\n                [attr.data-section-id]=\"section.id\"\r\n                [class.collapsible]=\"section.collapsible\"\r\n                *ngIf=\"shouldDisplayLink(section)\"\r\n            >\r\n                <vdr-ui-extension-point [locationId]=\"section.id\" api=\"navMenu\" [topPx]=\"-6\" [leftPx]=\"8\">\r\n                    <ng-container *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\">\r\n                        <vdr-status-badge\r\n                            *ngIf=\"sectionBadge !== 'none'\"\r\n                            [type]=\"sectionBadge\"\r\n                        ></vdr-status-badge>\r\n                    </ng-container>\r\n                    <input [id]=\"section.id\" type=\"checkbox\" [checked]=\"section.collapsedByDefault\" />\r\n                    <label class=\"nav-group-header\" [for]=\"section.id\">{{ section.label | translate }}</label>\r\n                    <ul class=\"nav-list\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <li *ngIf=\"shouldDisplayLink(item)\">\r\n                                <a\r\n                                    class=\"nav-link\"\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    routerLinkActive=\"active\"\r\n                                    (click)=\"item.onClick && item.onClick($event)\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon [attr.shape]=\"item.icon || 'block'\" size=\"20\"></clr-icon>\r\n                                    {{ item.label | translate }}\r\n                                </a>\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                </vdr-ui-extension-point>\r\n            </section>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n", styles: [":host{order:-1;background-color:var(--clr-nav-background-color)}nav.sidenav{height:100%;width:10.8rem;border-right-color:var(--clr-sidenav-border-color)}.sidenav .nav-group .nav-list{margin:0}.sidenav .nav-group .nav-group-header{margin:0;line-height:1.2}.sidenav .nav-group .nav-link{display:inline-flex;line-height:1rem;padding-right:.6rem}.nav-list clr-icon{flex-shrink:0;margin-right:12px}.nav-group{-webkit-hyphens:auto;hyphens:auto}.nav-group,.nav-link{position:relative}.nav-group vdr-status-badge{left:10px;top:6px}.nav-link vdr-status-badge{left:25px;top:3px}\n"] }]
+            args: [{ selector: 'vdr-main-nav', template: "<nav class=\"sidenav\" [clr-nav-level]=\"2\">\r\n    <section class=\"sidenav-content\">\r\n        <ng-container *ngFor=\"let section of navBuilderService.navMenuConfig$ | async\">\r\n            <section\r\n                class=\"nav-group\"\r\n                [attr.data-section-id]=\"section.id\"\r\n                [class.collapsible]=\"section.collapsible\"\r\n                *ngIf=\"shouldDisplayLink(section)\"\r\n            >\r\n                <vdr-ui-extension-point [locationId]=\"section.id\" api=\"navMenu\" [topPx]=\"-6\" [leftPx]=\"8\">\r\n                    <ng-container *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\">\r\n                        <vdr-status-badge\r\n                            *ngIf=\"sectionBadge !== 'none'\"\r\n                            [type]=\"sectionBadge\"\r\n                        ></vdr-status-badge>\r\n                    </ng-container>\r\n                    <input [id]=\"section.id\" type=\"checkbox\" [checked]=\"section.collapsedByDefault\" />\r\n                    <label class=\"nav-group-header\" [for]=\"section.id\">{{ section.label | translate }}</label>\r\n                    <ul class=\"nav-list\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <li *ngIf=\"shouldDisplayLink(item)\">\r\n                                <a\r\n                                    class=\"nav-link\"\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    routerLinkActive=\"active\"\r\n                                    (click)=\"item.onClick && item.onClick($event)\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon [attr.shape]=\"item.icon || 'block'\" size=\"20\"></clr-icon>\r\n                                    {{ item.label | translate }}\r\n                                </a>\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                </vdr-ui-extension-point>\r\n            </section>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n", styles: [":host{order:-1;background-color:var(--clr-nav-background-color)}nav.sidenav{height:100%;border-right-color:var(--clr-sidenav-border-color)}.sidenav .nav-group .nav-list{margin:0}.sidenav .nav-group .nav-group-header{margin:0;line-height:1.2}.sidenav .nav-group .nav-link{display:inline-flex;line-height:1rem;padding-right:.6rem}.nav-list clr-icon{flex-shrink:0;margin-right:12px}.nav-group{-webkit-hyphens:auto;hyphens:auto}.nav-group,.nav-link{position:relative}.nav-group vdr-status-badge{left:10px;top:6px}.nav-link vdr-status-badge{left:25px;top:3px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }, { type: NavBuilderService }, { type: HealthCheckService }, { type: JobQueueService }, { type: DataService }]; } });
 /**
@@ -8267,10 +8267,10 @@ class AppShellComponent {
     }
 }
 AppShellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AppShellComponent, deps: [{ token: AuthService }, { token: DataService }, { token: i1$2.Router }, { token: I18nService }, { token: ModalService }, { token: LocalStorageService }], target: i0.ɵɵFactoryTarget.Component });
-AppShellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AppShellComponent, selector: "vdr-app-shell", ngImport: i0, template: "<clr-main-container>\r\n    <clr-header>\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\"><img src=\"assets/logo-75px.png\" class=\"logo\" /><span class=\"wordmark\" *ngIf=\"!hideVendureBranding\">vendure</span></a>\r\n        </div>\r\n        <div class=\"header-nav\"></div>\r\n        <div class=\"header-actions\">\r\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n            <vdr-user-menu [userName]=\"userName$ | async\"\r\n                           [uiLanguageAndLocale]=\"uiLanguageAndLocale$ | async\"\r\n                           [availableLanguages]=\"availableLanguages\"\r\n                           (selectUiLanguage)=\"selectUiLanguage()\"\r\n                           (logOut)=\"logOut()\"></vdr-user-menu>\r\n        </div>\r\n    </clr-header>\r\n    <nav class=\"subnav\"><vdr-breadcrumb></vdr-breadcrumb></nav>\r\n\r\n    <div class=\"content-container\">\r\n        <div class=\"content-area\"><router-outlet></router-outlet></div>\r\n        <vdr-main-nav></vdr-main-nav>\r\n    </div>\r\n</clr-main-container>\r\n", styles: [".branding{min-width:0}.logo{width:40px}.wordmark{font-weight:700;margin-left:12px;font-size:24px;color:var(--color-primary-500)}@media screen and (min-width: 768px){vdr-breadcrumb{margin-left:10.8rem}}.header-actions{align-items:center}.content-area{position:relative}::ng-deep .header{background-image:linear-gradient(to right,var(--color-header-gradient-from),var(--color-header-gradient-to))}\n"], components: [{ type: i1$3.ClrHeader, selector: "clr-header" }, { type: ChannelSwitcherComponent, selector: "vdr-channel-switcher" }, { type: UserMenuComponent, selector: "vdr-user-menu", inputs: ["userName", "availableLanguages", "uiLanguageAndLocale"], outputs: ["logOut", "selectUiLanguage"] }, { type: BreadcrumbComponent, selector: "vdr-breadcrumb" }, { type: MainNavComponent, selector: "vdr-main-nav" }], directives: [{ type: i1$3.ClrMainContainer, selector: "clr-main-container" }, { type: i1$3.MainContainerWillyWonka, selector: "clr-main-container" }, { type: i1$3.NavDetectionOompaLoompa, selector: "clr-header" }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { type: i1$2.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "async": i3.AsyncPipe } });
+AppShellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AppShellComponent, selector: "vdr-app-shell", ngImport: i0, template: "<clr-main-container>\r\n    <clr-header>\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\"><img src=\"assets/logo-75px.png\" class=\"logo\" /><span class=\"wordmark\" *ngIf=\"!hideVendureBranding\">vendure</span></a>\r\n        </div>\r\n        <div class=\"header-nav\"></div>\r\n        <div class=\"header-actions\">\r\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n            <vdr-user-menu [userName]=\"userName$ | async\"\r\n                           [uiLanguageAndLocale]=\"uiLanguageAndLocale$ | async\"\r\n                           [availableLanguages]=\"availableLanguages\"\r\n                           (selectUiLanguage)=\"selectUiLanguage()\"\r\n                           (logOut)=\"logOut()\"></vdr-user-menu>\r\n        </div>\r\n    </clr-header>\r\n    <nav class=\"subnav\"><vdr-breadcrumb></vdr-breadcrumb></nav>\r\n\r\n    <div class=\"content-container\">\r\n        <div class=\"content-area\"><router-outlet></router-outlet></div>\r\n        <vdr-main-nav></vdr-main-nav>\r\n    </div>\r\n</clr-main-container>\r\n", styles: [".branding{min-width:0}.logo{width:40px}.wordmark{font-weight:700;margin-left:12px;font-size:24px;color:var(--color-primary-500)}@media screen and (min-width: 768px){vdr-breadcrumb{margin-left:18%}}.header-actions{align-items:center}.content-area{position:relative}::ng-deep .header{background-image:linear-gradient(to right,var(--color-header-gradient-from),var(--color-header-gradient-to))}\n"], components: [{ type: i1$3.ClrHeader, selector: "clr-header" }, { type: ChannelSwitcherComponent, selector: "vdr-channel-switcher" }, { type: UserMenuComponent, selector: "vdr-user-menu", inputs: ["userName", "availableLanguages", "uiLanguageAndLocale"], outputs: ["logOut", "selectUiLanguage"] }, { type: BreadcrumbComponent, selector: "vdr-breadcrumb" }, { type: MainNavComponent, selector: "vdr-main-nav" }], directives: [{ type: i1$3.ClrMainContainer, selector: "clr-main-container" }, { type: i1$3.MainContainerWillyWonka, selector: "clr-main-container" }, { type: i1$3.NavDetectionOompaLoompa, selector: "clr-header" }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { type: i1$2.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AppShellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-app-shell', template: "<clr-main-container>\r\n    <clr-header>\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\"><img src=\"assets/logo-75px.png\" class=\"logo\" /><span class=\"wordmark\" *ngIf=\"!hideVendureBranding\">vendure</span></a>\r\n        </div>\r\n        <div class=\"header-nav\"></div>\r\n        <div class=\"header-actions\">\r\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n            <vdr-user-menu [userName]=\"userName$ | async\"\r\n                           [uiLanguageAndLocale]=\"uiLanguageAndLocale$ | async\"\r\n                           [availableLanguages]=\"availableLanguages\"\r\n                           (selectUiLanguage)=\"selectUiLanguage()\"\r\n                           (logOut)=\"logOut()\"></vdr-user-menu>\r\n        </div>\r\n    </clr-header>\r\n    <nav class=\"subnav\"><vdr-breadcrumb></vdr-breadcrumb></nav>\r\n\r\n    <div class=\"content-container\">\r\n        <div class=\"content-area\"><router-outlet></router-outlet></div>\r\n        <vdr-main-nav></vdr-main-nav>\r\n    </div>\r\n</clr-main-container>\r\n", styles: [".branding{min-width:0}.logo{width:40px}.wordmark{font-weight:700;margin-left:12px;font-size:24px;color:var(--color-primary-500)}@media screen and (min-width: 768px){vdr-breadcrumb{margin-left:10.8rem}}.header-actions{align-items:center}.content-area{position:relative}::ng-deep .header{background-image:linear-gradient(to right,var(--color-header-gradient-from),var(--color-header-gradient-to))}\n"] }]
+            args: [{ selector: 'vdr-app-shell', template: "<clr-main-container>\r\n    <clr-header>\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\"><img src=\"assets/logo-75px.png\" class=\"logo\" /><span class=\"wordmark\" *ngIf=\"!hideVendureBranding\">vendure</span></a>\r\n        </div>\r\n        <div class=\"header-nav\"></div>\r\n        <div class=\"header-actions\">\r\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n            <vdr-user-menu [userName]=\"userName$ | async\"\r\n                           [uiLanguageAndLocale]=\"uiLanguageAndLocale$ | async\"\r\n                           [availableLanguages]=\"availableLanguages\"\r\n                           (selectUiLanguage)=\"selectUiLanguage()\"\r\n                           (logOut)=\"logOut()\"></vdr-user-menu>\r\n        </div>\r\n    </clr-header>\r\n    <nav class=\"subnav\"><vdr-breadcrumb></vdr-breadcrumb></nav>\r\n\r\n    <div class=\"content-container\">\r\n        <div class=\"content-area\"><router-outlet></router-outlet></div>\r\n        <vdr-main-nav></vdr-main-nav>\r\n    </div>\r\n</clr-main-container>\r\n", styles: [".branding{min-width:0}.logo{width:40px}.wordmark{font-weight:700;margin-left:12px;font-size:24px;color:var(--color-primary-500)}@media screen and (min-width: 768px){vdr-breadcrumb{margin-left:18%}}.header-actions{align-items:center}.content-area{position:relative}::ng-deep .header{background-image:linear-gradient(to right,var(--color-header-gradient-from),var(--color-header-gradient-to))}\n"] }]
         }], ctorParameters: function () { return [{ type: AuthService }, { type: DataService }, { type: i1$2.Router }, { type: I18nService }, { type: ModalService }, { type: LocalStorageService }]; } });
 class NotificationComponent {
@@ -9372,7 +9372,7 @@ class DisabledDirective {
         }
     }
 }
-DisabledDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DisabledDirective, deps: [{ token: i2.FormControlName, optional: true }, { token: i2.FormControlDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+DisabledDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DisabledDirective, deps: [{ token: i3$1.FormControlName, optional: true }, { token: i3$1.FormControlDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 DisabledDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: DisabledDirective, selector: "[vdrDisabled]", inputs: { disabled: ["vdrDisabled", "disabled"] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DisabledDirective, decorators: [{
             type: Directive,
@@ -9380,9 +9380,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                     selector: '[vdrDisabled]',
                 }]
         }], ctorParameters: function () {
-        return [{ type: i2.FormControlName, decorators: [{
+        return [{ type: i3$1.FormControlName, decorators: [{
                         type: Optional
-                    }] }, { type: i2.FormControlDirective, decorators: [{
+                    }] }, { type: i3$1.FormControlDirective, decorators: [{
                         type: Optional
                     }] }];
     }, propDecorators: { disabled: [{
@@ -9401,7 +9401,7 @@ class BooleanFormInputComponent {
 }
 BooleanFormInputComponent.id = 'boolean-form-input';
 BooleanFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: BooleanFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BooleanFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: BooleanFormInputComponent, selector: "vdr-boolean-form-input", ngImport: i0, template: "<clr-checkbox-wrapper>\r\n    <input\r\n        type=\"checkbox\"\r\n        clrCheckbox\r\n        [formControl]=\"formControl\"\r\n        [vdrDisabled]=\"!!readonly\"\r\n    />\r\n</clr-checkbox-wrapper>\r\n", styles: [""], components: [{ type: i1$3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BooleanFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: BooleanFormInputComponent, selector: "vdr-boolean-form-input", ngImport: i0, template: "<clr-checkbox-wrapper>\r\n    <input\r\n        type=\"checkbox\"\r\n        clrCheckbox\r\n        [formControl]=\"formControl\"\r\n        [vdrDisabled]=\"!!readonly\"\r\n    />\r\n</clr-checkbox-wrapper>\r\n", styles: [""], components: [{ type: i1$3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: BooleanFormInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-boolean-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<clr-checkbox-wrapper>\r\n    <input\r\n        type=\"checkbox\"\r\n        clrCheckbox\r\n        [formControl]=\"formControl\"\r\n        [vdrDisabled]=\"!!readonly\"\r\n    />\r\n</clr-checkbox-wrapper>\r\n", styles: [""] }]
@@ -9532,7 +9532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
  */
 function getConfigArgValue(value) {
     try {
-        return value ? JSON.parse(value) : undefined;
+        return value != null ? JSON.parse(value) : undefined;
     }
     catch (e) {
         return value;
@@ -9602,7 +9602,7 @@ function getDefaultConfigArgValue(arg) {
     if (arg.list) {
         return [];
     }
-    if (arg.defaultValue) {
+    if (arg.defaultValue != null) {
         return arg.defaultValue;
     }
     const type = arg.type;
@@ -9894,7 +9894,7 @@ DynamicFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             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 class=\"list-item-row\" *ngFor=\"let item of listItems; trackBy: trackById\" cdkDrag [cdkDragData]=\"item\">\r\n            <ng-container #listItem></ng-container>\r\n            <button class=\"btn btn-link btn-sm btn-warning\" (click)=\"removeListItem(item)\" [title]=\"'common.remove-item-from-list' | translate\">\r\n                <clr-icon shape=\"times\"></clr-icon>\r\n            </button>\r\n            <div class=\"flex-spacer\"></div>\r\n            <div class=\"drag-handle\" cdkDragHandle *ngIf=\"!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()\">\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}.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"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$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"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i3$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"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], pipes: { "translate": i7.TranslatePipe }, 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 class=\"list-item-row\" *ngFor=\"let item of listItems; trackBy: trackById\" cdkDrag [cdkDragData]=\"item\">\r\n            <ng-container #listItem></ng-container>\r\n            <button class=\"btn btn-link btn-sm btn-warning\" (click)=\"removeListItem(item)\" [title]=\"'common.remove-item-from-list' | translate\">\r\n                <clr-icon shape=\"times\"></clr-icon>\r\n            </button>\r\n            <div class=\"flex-spacer\"></div>\r\n            <div class=\"drag-handle\" cdkDragHandle *ngIf=\"!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()\">\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}.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"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DynamicFormInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-dynamic-form-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -10062,7 +10062,7 @@ ConfigurableInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             useExisting: forwardRef(() => ConfigurableInputComponent),
             multi: true,
         },
-    ], usesOnChanges: true, ngImport: i0, template: "<div class=\"card\" *ngIf=\"operation\">\r\n    <div class=\"card-block\">{{ interpolateDescription() }}</div>\r\n    <div class=\"card-block\" *ngIf=\"operation.args?.length\">\r\n        <form [formGroup]=\"form\" *ngIf=\"operation\" class=\"operation-inputs\">\r\n            <div *ngFor=\"let arg of operation.args; trackBy: trackByName\" class=\"arg-row\">\r\n                <ng-container *ngIf=\"form.get(arg.name) && getArgDef(arg) as argDef\">\r\n                    <label class=\"clr-control-label\">{{ argDef.label || (arg.name | sentenceCase) }}</label>\r\n                    <vdr-help-tooltip\r\n                        class=\"mr3\"\r\n                        *ngIf=\"argDef.description\"\r\n                        [content]=\"argDef.description\"\r\n                    ></vdr-help-tooltip>\r\n                    <vdr-dynamic-form-input\r\n                        [def]=\"getArgDef(arg)\"\r\n                        [readonly]=\"readonly\"\r\n                        [control]=\"form.get(arg.name)\"\r\n                        [formControlName]=\"arg.name\"\r\n                    ></vdr-dynamic-form-input>\r\n                </ng-container>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"!readonly && removable\">\r\n        <button class=\"btn btn-sm btn-link btn-warning\" (click)=\"remove.emit(operation)\">\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n            {{ 'common.remove' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;margin-bottom:12px}:host>.card{margin-top:6px}.operation-inputs{padding-top:0}.operation-inputs .arg-row:not(:last-child){margin-bottom:12px}.operation-inputs .arg-row{display:flex;flex-wrap:wrap;align-items:center}.operation-inputs .arg-row label{margin-right:6px}.operation-inputs .hidden{display:none}.operation-inputs label{min-width:130px;display:inline-block}\n"], components: [{ type: HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: ["content", "position"] }, { type: DynamicFormInputComponent, selector: "vdr-dynamic-form-input", inputs: ["def", "readonly", "control"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "sentenceCase": SentenceCasePipe, "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesOnChanges: true, ngImport: i0, template: "<div class=\"card\" *ngIf=\"operation\">\r\n    <div class=\"card-block\">{{ interpolateDescription() }}</div>\r\n    <div class=\"card-block\" *ngIf=\"operation.args?.length\">\r\n        <form [formGroup]=\"form\" *ngIf=\"operation\" class=\"operation-inputs\">\r\n            <div *ngFor=\"let arg of operation.args; trackBy: trackByName\" class=\"arg-row\">\r\n                <ng-container *ngIf=\"form.get(arg.name) && getArgDef(arg) as argDef\">\r\n                    <label class=\"clr-control-label\">{{ argDef.label || (arg.name | sentenceCase) }}</label>\r\n                    <vdr-help-tooltip\r\n                        class=\"mr3\"\r\n                        *ngIf=\"argDef.description\"\r\n                        [content]=\"argDef.description\"\r\n                    ></vdr-help-tooltip>\r\n                    <vdr-dynamic-form-input\r\n                        [def]=\"getArgDef(arg)\"\r\n                        [readonly]=\"readonly\"\r\n                        [control]=\"form.get(arg.name)\"\r\n                        [formControlName]=\"arg.name\"\r\n                    ></vdr-dynamic-form-input>\r\n                </ng-container>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"!readonly && removable\">\r\n        <button class=\"btn btn-sm btn-link btn-warning\" (click)=\"remove.emit(operation)\">\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n            {{ 'common.remove' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;margin-bottom:12px}:host>.card{margin-top:6px}.operation-inputs{padding-top:0}.operation-inputs .arg-row:not(:last-child){margin-bottom:12px}.operation-inputs .arg-row{display:flex;flex-wrap:wrap;align-items:center}.operation-inputs .arg-row label{margin-right:6px}.operation-inputs .hidden{display:none}.operation-inputs label{min-width:130px;display:inline-block}\n"], components: [{ type: HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: ["content", "position"] }, { type: DynamicFormInputComponent, selector: "vdr-dynamic-form-input", inputs: ["def", "readonly", "control"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "sentenceCase": SentenceCasePipe, "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ConfigurableInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-configurable-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -10307,7 +10307,7 @@ class CurrencyFormInputComponent {
 }
 CurrencyFormInputComponent.id = 'currency-form-input';
 CurrencyFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CurrencyFormInputComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-CurrencyFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CurrencyFormInputComponent, selector: "vdr-currency-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<vdr-currency-input\r\n    [formControl]=\"formControl\"\r\n    [readonly]=\"readonly\"\r\n    [currencyCode]=\"currencyCode$ | async\"\r\n></vdr-currency-input>\r\n", styles: [""], components: [{ type: CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }], directives: [{ type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CurrencyFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CurrencyFormInputComponent, selector: "vdr-currency-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<vdr-currency-input\r\n    [formControl]=\"formControl\"\r\n    [readonly]=\"readonly\"\r\n    [currencyCode]=\"currencyCode$ | async\"\r\n></vdr-currency-input>\r\n", styles: [""], components: [{ type: CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }], directives: [{ type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CurrencyFormInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-currency-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-currency-input\r\n    [formControl]=\"formControl\"\r\n    [readonly]=\"readonly\"\r\n    [currencyCode]=\"currencyCode$ | async\"\r\n></vdr-currency-input>\r\n", styles: [""] }]
@@ -10383,7 +10383,7 @@ class CustomerGroupFormInputComponent {
 }
 CustomerGroupFormInputComponent.id = 'customer-group-form-input';
 CustomerGroupFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerGroupFormInputComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-CustomerGroupFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CustomerGroupFormInputComponent, selector: "vdr-customer-group-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<ng-select\r\n    [items]=\"customerGroups$ | async\"\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    bindValue=\"id\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"false\"\r\n    [ngModel]=\"formControl.value\"\r\n    (change)=\"selectGroup($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [""], components: [{ type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i2$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CustomerGroupFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CustomerGroupFormInputComponent, selector: "vdr-customer-group-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<ng-select\r\n    [items]=\"customerGroups$ | async\"\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    bindValue=\"id\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"false\"\r\n    [ngModel]=\"formControl.value\"\r\n    (change)=\"selectGroup($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [""], components: [{ type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerGroupFormInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-customer-group-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-select\r\n    [items]=\"customerGroups$ | async\"\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    bindValue=\"id\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"false\"\r\n    [ngModel]=\"formControl.value\"\r\n    (change)=\"selectGroup($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [""] }]
@@ -10781,7 +10781,7 @@ DatetimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             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 class=\"clear-value-button btn\" [class.visible]=\"!disabled && !readonly && (selected$ | async)\" (click)=\"clearValue()\">\r\n        <clr-icon shape=\"times\"></clr-icon>\r\n    </button>\r\n</div>\r\n<vdr-dropdown #dropdownComponent>\r\n    <button class=\"btn btn-outline 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 class=\"datetime-picker\" *ngIf=\"current$ | async as currentView\" (keydown.escape)=\"closeDatepicker()\">\r\n            <div class=\"controls\">\r\n                <div class=\"selects\">\r\n                    <div class=\"month-select\">\r\n                        <select\r\n                            clrSelect\r\n                            name=\"month\"\r\n                            [ngModel]=\"currentView.month\"\r\n                            (change)=\"setMonth($event)\"\r\n                        >\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\r\n                            clrSelect\r\n                            name=\"month\"\r\n                            [ngModel]=\"currentView.year\"\r\n                            (change)=\"setYear($event)\"\r\n                        >\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 class=\"btn btn-link btn-sm\" (click)=\"selectToday()\" [title]=\"'common.select-today' | translate\">\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 class=\"calendar-table\" #calendarTable tabindex=\"0\" (keydown)=\"handleCalendarKeydown($event)\">\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 clrSelect 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\r\n                    clrSelect\r\n                    name=\"hour\"\r\n                    [ngModel]=\"selectedMinutes$ | async\"\r\n                    (change)=\"setMinute($event)\"\r\n                >\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-right:none!important}.clear-value-button{margin:0;border-radius:0;border-left:none;border-color:var(--color-component-border-200);background-color:#fff;color:var(--color-grey-500);display:none}.clear-value-button.visible{display:block}.calendar-button{margin:0;border-top-left-radius:0;border-bottom-left-radius:0}.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-grey-500);cursor:pointer;transition:background-color .1s}table.calendar-table .day-cell.current-month{background-color:#fff;color:var(--color-grey-800)}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-grey-300)}.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"], components: [{ type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$3.ClrSelect, selector: "[clrSelect]" }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }], pipes: { "localeDate": LocaleDatePipe, "async": i3.AsyncPipe, "translate": i7.TranslatePipe, "number": i3.DecimalPipe }, 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 class=\"clear-value-button btn\" [class.visible]=\"!disabled && !readonly && (selected$ | async)\" (click)=\"clearValue()\">\r\n        <clr-icon shape=\"times\"></clr-icon>\r\n    </button>\r\n</div>\r\n<vdr-dropdown #dropdownComponent>\r\n    <button class=\"btn btn-outline 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 class=\"datetime-picker\" *ngIf=\"current$ | async as currentView\" (keydown.escape)=\"closeDatepicker()\">\r\n            <div class=\"controls\">\r\n                <div class=\"selects\">\r\n                    <div class=\"month-select\">\r\n                        <select\r\n                            clrSelect\r\n                            name=\"month\"\r\n                            [ngModel]=\"currentView.month\"\r\n                            (change)=\"setMonth($event)\"\r\n                        >\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\r\n                            clrSelect\r\n                            name=\"month\"\r\n                            [ngModel]=\"currentView.year\"\r\n                            (change)=\"setYear($event)\"\r\n                        >\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 class=\"btn btn-link btn-sm\" (click)=\"selectToday()\" [title]=\"'common.select-today' | translate\">\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 class=\"calendar-table\" #calendarTable tabindex=\"0\" (keydown)=\"handleCalendarKeydown($event)\">\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 clrSelect 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\r\n                    clrSelect\r\n                    name=\"hour\"\r\n                    [ngModel]=\"selectedMinutes$ | async\"\r\n                    (change)=\"setMinute($event)\"\r\n                >\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-right:none!important}.clear-value-button{margin:0;border-radius:0;border-left:none;border-color:var(--color-component-border-200);background-color:#fff;color:var(--color-grey-500);display:none}.clear-value-button.visible{display:block}.calendar-button{margin:0;border-top-left-radius:0;border-bottom-left-radius:0}.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-grey-500);cursor:pointer;transition:background-color .1s}table.calendar-table .day-cell.current-month{background-color:#fff;color:var(--color-grey-800)}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-grey-300)}.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"], components: [{ type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$3.ClrSelect, selector: "[clrSelect]" }, { type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }], pipes: { "localeDate": LocaleDatePipe, "async": i3.AsyncPipe, "translate": i7.TranslatePipe, "number": i3.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DatetimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-datetime-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -10838,7 +10838,7 @@ class DateFormInputComponent {
 }
 DateFormInputComponent.id = 'date-form-input';
 DateFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DateFormInputComponent, selector: "vdr-date-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<vdr-datetime-picker\r\n    [formControl]=\"formControl\"\r\n    [min]=\"min\"\r\n    [max]=\"max\"\r\n    [yearRange]=\"yearRange\"\r\n    [readonly]=\"readonly\"\r\n>\r\n</vdr-datetime-picker>\r\n", styles: [""], components: [{ type: DatetimePickerComponent, selector: "vdr-datetime-picker", inputs: ["yearRange", "weekStartDay", "timeGranularityInterval", "min", "max", "readonly"] }], directives: [{ type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DateFormInputComponent, selector: "vdr-date-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<vdr-datetime-picker\r\n    [formControl]=\"formControl\"\r\n    [min]=\"min\"\r\n    [max]=\"max\"\r\n    [yearRange]=\"yearRange\"\r\n    [readonly]=\"readonly\"\r\n>\r\n</vdr-datetime-picker>\r\n", styles: [""], components: [{ type: DatetimePickerComponent, selector: "vdr-datetime-picker", inputs: ["yearRange", "weekStartDay", "timeGranularityInterval", "min", "max", "readonly"] }], directives: [{ type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateFormInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-date-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-datetime-picker\r\n    [formControl]=\"formControl\"\r\n    [min]=\"min\"\r\n    [max]=\"max\"\r\n    [yearRange]=\"yearRange\"\r\n    [readonly]=\"readonly\"\r\n>\r\n</vdr-datetime-picker>\r\n", styles: [""] }]
@@ -10965,7 +10965,7 @@ FacetValueSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             useExisting: FacetValueSelectorComponent,
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true }], ngImport: i0, template: "<ng-select\r\n    [items]=\"facetValues\"\r\n    [addTag]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    bindValue=\"id\"\r\n    multiple=\"true\"\r\n    appendTo=\"body\"\r\n    bindLabel=\"name\"\r\n    [disabled]=\"disabled || readonly\"\r\n    [ngModel]=\"value\"\r\n    (change)=\"onChange($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <vdr-facet-value-chip\r\n            [facetValue]=\"item.value\"\r\n            [removable]=\"!readonly\"\r\n            (remove)=\"clear(item)\"\r\n        ></vdr-facet-value-chip>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-facet-value-chip [facetValue]=\"item.value\" [removable]=\"false\"></vdr-facet-value-chip>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background:none;margin:0}:host ::ng-deep .ng-dropdown-panel-items div.ng-option:last-child{display:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border:none;padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:8px}\n"], components: [{ type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }], directives: [{ type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i2$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent, descendants: true }], ngImport: i0, template: "<ng-select\r\n    [items]=\"facetValues\"\r\n    [addTag]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    bindValue=\"id\"\r\n    multiple=\"true\"\r\n    appendTo=\"body\"\r\n    bindLabel=\"name\"\r\n    [disabled]=\"disabled || readonly\"\r\n    [ngModel]=\"value\"\r\n    (change)=\"onChange($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <vdr-facet-value-chip\r\n            [facetValue]=\"item.value\"\r\n            [removable]=\"!readonly\"\r\n            (remove)=\"clear(item)\"\r\n        ></vdr-facet-value-chip>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-facet-value-chip [facetValue]=\"item.value\" [removable]=\"false\"></vdr-facet-value-chip>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background:none;margin:0}:host ::ng-deep .ng-dropdown-panel-items div.ng-option:last-child{display:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border:none;padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:8px}\n"], components: [{ type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }], directives: [{ type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FacetValueSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-facet-value-selector', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -11019,7 +11019,7 @@ class FacetValueFormInputComponent {
 }
 FacetValueFormInputComponent.id = 'facet-value-form-input';
 FacetValueFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FacetValueFormInputComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-FacetValueFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FacetValueFormInputComponent, selector: "vdr-facet-value-form-input", ngImport: i0, template: "<vdr-facet-value-selector\r\n    *ngIf=\"facets$ | async as facets\"\r\n    [readonly]=\"readonly\"\r\n    [facets]=\"facets\"\r\n    [formControl]=\"formControl\"\r\n    [transformControlValueAccessorValue]=\"valueTransformFn\"\r\n></vdr-facet-value-selector>\r\n", styles: [""], components: [{ type: FacetValueSelectorComponent, selector: "vdr-facet-value-selector", inputs: ["facets", "readonly", "transformControlValueAccessorValue"], outputs: ["selectedValuesChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FacetValueFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FacetValueFormInputComponent, selector: "vdr-facet-value-form-input", ngImport: i0, template: "<vdr-facet-value-selector\r\n    *ngIf=\"facets$ | async as facets\"\r\n    [readonly]=\"readonly\"\r\n    [facets]=\"facets\"\r\n    [formControl]=\"formControl\"\r\n    [transformControlValueAccessorValue]=\"valueTransformFn\"\r\n></vdr-facet-value-selector>\r\n", styles: [""], components: [{ type: FacetValueSelectorComponent, selector: "vdr-facet-value-selector", inputs: ["facets", "readonly", "transformControlValueAccessorValue"], outputs: ["selectedValuesChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FacetValueFormInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-facet-value-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-facet-value-selector\r\n    *ngIf=\"facets$ | async as facets\"\r\n    [readonly]=\"readonly\"\r\n    [facets]=\"facets\"\r\n    [formControl]=\"formControl\"\r\n    [transformControlValueAccessorValue]=\"valueTransformFn\"\r\n></vdr-facet-value-selector>\r\n", styles: [""] }]
@@ -11056,7 +11056,7 @@ class NumberFormInputComponent {
 }
 NumberFormInputComponent.id = 'number-form-input';
 NumberFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NumberFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NumberFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: NumberFormInputComponent, selector: "vdr-number-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<vdr-affixed-input\r\n    [suffix]=\"suffix\"\r\n    [prefix]=\"prefix\"\r\n>\r\n    <input\r\n        type=\"number\"\r\n        [readonly]=\"readonly\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        [step]=\"step\"\r\n        [formControl]=\"formControl\"\r\n    />\r\n</vdr-affixed-input>\r\n", styles: [""], components: [{ type: AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NumberFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: NumberFormInputComponent, selector: "vdr-number-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<vdr-affixed-input\r\n    [suffix]=\"suffix\"\r\n    [prefix]=\"prefix\"\r\n>\r\n    <input\r\n        type=\"number\"\r\n        [readonly]=\"readonly\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        [step]=\"step\"\r\n        [formControl]=\"formControl\"\r\n    />\r\n</vdr-affixed-input>\r\n", styles: [""], components: [{ type: AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NumberFormInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-number-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-affixed-input\r\n    [suffix]=\"suffix\"\r\n    [prefix]=\"prefix\"\r\n>\r\n    <input\r\n        type=\"number\"\r\n        [readonly]=\"readonly\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        [step]=\"step\"\r\n        [formControl]=\"formControl\"\r\n    />\r\n</vdr-affixed-input>\r\n", styles: [""] }]
@@ -11075,7 +11075,7 @@ class PasswordFormInputComponent {
 }
 PasswordFormInputComponent.id = 'password-form-input';
 PasswordFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PasswordFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PasswordFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PasswordFormInputComponent, selector: "vdr-password-form-input", ngImport: i0, template: "<input\r\n    type=\"password\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n/>\r\n", styles: [""], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PasswordFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PasswordFormInputComponent, selector: "vdr-password-form-input", ngImport: i0, template: "<input\r\n    type=\"password\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n/>\r\n", styles: [""], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PasswordFormInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-password-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\r\n    type=\"password\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n/>\r\n", styles: [""] }]
@@ -11279,7 +11279,7 @@ class ProductSearchInputComponent {
     }
 }
 ProductSearchInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProductSearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: { facetValueResults: "facetValueResults" }, outputs: { searchTermChange: "searchTermChange", facetValueChange: "facetValueChange" }, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true, static: true }], ngImport: i0, template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-product-name-or-code' | translate\"\r\n    [items]=\"facetValueResults\"\r\n    [searchFn]=\"filterFacetResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip\r\n                [facetValue]=\"item.facetValue\"\r\n                [removable]=\"true\"\r\n                (remove)=\"clear(item)\"\r\n            ></vdr-facet-value-chip>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.facetValue\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip [facetValue]=\"item.facetValue\" [removable]=\"false\"></vdr-facet-value-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{margin-top:6px;display:block;width:100%}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background:none;margin:0}:host ::ng-deep .ng-dropdown-panel-items div.ng-option:last-child{display:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border:none;padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:8px}ng-select{width:100%;min-width:300px;margin-right:12px}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"], components: [{ type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i2$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i2$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ProductSearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: { facetValueResults: "facetValueResults" }, outputs: { searchTermChange: "searchTermChange", facetValueChange: "facetValueChange" }, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true, static: true }], ngImport: i0, template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-product-name-or-code' | translate\"\r\n    [items]=\"facetValueResults\"\r\n    [searchFn]=\"filterFacetResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip\r\n                [facetValue]=\"item.facetValue\"\r\n                [removable]=\"true\"\r\n                (remove)=\"clear(item)\"\r\n            ></vdr-facet-value-chip>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.facetValue\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip [facetValue]=\"item.facetValue\" [removable]=\"false\"></vdr-facet-value-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{margin-top:6px;display:block;width:100%}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background:none;margin:0}:host ::ng-deep .ng-dropdown-panel-items div.ng-option:last-child{display:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border:none;padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:8px}ng-select{width:100%;min-width:300px;margin-right:12px}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"], components: [{ type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i2.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductSearchInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-product-search-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-product-name-or-code' | translate\"\r\n    [items]=\"facetValueResults\"\r\n    [searchFn]=\"filterFacetResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip\r\n                [facetValue]=\"item.facetValue\"\r\n                [removable]=\"true\"\r\n                (remove)=\"clear(item)\"\r\n            ></vdr-facet-value-chip>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.facetValue\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip [facetValue]=\"item.facetValue\" [removable]=\"false\"></vdr-facet-value-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{margin-top:6px;display:block;width:100%}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background:none;margin:0}:host ::ng-deep .ng-dropdown-panel-items div.ng-option:last-child{display:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border:none;padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:8px}ng-select{width:100%;min-width:300px;margin-right:12px}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"] }]
@@ -11335,7 +11335,7 @@ class ItemsPerPageControlsComponent {
     }
 }
 ItemsPerPageControlsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ItemsPerPageControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ItemsPerPageControlsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: { itemsPerPage: "itemsPerPage" }, outputs: { itemsPerPageChange: "itemsPerPageChange" }, ngImport: i0, template: "<div class=\"select\">\r\n    <select [ngModel]=\"itemsPerPage\" (change)=\"itemsPerPageChange.emit($event.target.value)\">\r\n        <option [value]=\"10\">{{ 'common.items-per-page-option' | translate: { count: 10 } }}</option>\r\n        <option [value]=\"25\">{{ 'common.items-per-page-option' | translate: { count: 25 } }}</option>\r\n        <option [value]=\"50\">{{ 'common.items-per-page-option' | translate: { count: 50 } }}</option>\r\n        <option [value]=\"100\">{{ 'common.items-per-page-option' | translate: { count: 100 } }}</option>\r\n    </select>\r\n</div>\r\n", styles: [""], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ItemsPerPageControlsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: { itemsPerPage: "itemsPerPage" }, outputs: { itemsPerPageChange: "itemsPerPageChange" }, ngImport: i0, template: "<div class=\"select\">\r\n    <select [ngModel]=\"itemsPerPage\" (change)=\"itemsPerPageChange.emit($event.target.value)\">\r\n        <option [value]=\"10\">{{ 'common.items-per-page-option' | translate: { count: 10 } }}</option>\r\n        <option [value]=\"25\">{{ 'common.items-per-page-option' | translate: { count: 25 } }}</option>\r\n        <option [value]=\"50\">{{ 'common.items-per-page-option' | translate: { count: 50 } }}</option>\r\n        <option [value]=\"100\">{{ 'common.items-per-page-option' | translate: { count: 100 } }}</option>\r\n    </select>\r\n</div>\r\n", styles: [""], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ItemsPerPageControlsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-items-per-page-controls', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"select\">\r\n    <select [ngModel]=\"itemsPerPage\" (change)=\"itemsPerPageChange.emit($event.target.value)\">\r\n        <option [value]=\"10\">{{ 'common.items-per-page-option' | translate: { count: 10 } }}</option>\r\n        <option [value]=\"25\">{{ 'common.items-per-page-option' | translate: { count: 25 } }}</option>\r\n        <option [value]=\"50\">{{ 'common.items-per-page-option' | translate: { count: 50 } }}</option>\r\n        <option [value]=\"100\">{{ 'common.items-per-page-option' | translate: { count: 100 } }}</option>\r\n    </select>\r\n</div>\r\n", styles: [""] }]
@@ -11610,7 +11610,7 @@ class ProductVariantSelectorComponent {
     }
 }
 ProductVariantSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantSelectorComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-ProductVariantSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: { productSelected: "productSelected" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["autoComplete"], descendants: true, static: true }], ngImport: i0, template: "<ng-select\r\n    #autoComplete\r\n    [items]=\"searchResults$ | async\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [loading]=\"searchLoading\"\r\n    [typeahead]=\"searchInput$\"\r\n    [appendTo]=\"'body'\"\r\n    [placeholder]=\"'settings.search-by-product-name-or-sku' | translate\"\r\n    (change)=\"selectResult($event)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <img [src]=\"item.productAsset | assetPreview: 32\">\r\n        {{ item.productVariantName }}\r\n        <small class=\"sku\">{{ item.sku }}</small>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{display:block}.sku{margin-left:12px;color:var(--color-grey-500)}\n"], components: [{ type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i2$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe, "assetPreview": AssetPreviewPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ProductVariantSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: { productSelected: "productSelected" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["autoComplete"], descendants: true, static: true }], ngImport: i0, template: "<ng-select\r\n    #autoComplete\r\n    [items]=\"searchResults$ | async\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [loading]=\"searchLoading\"\r\n    [typeahead]=\"searchInput$\"\r\n    [appendTo]=\"'body'\"\r\n    [placeholder]=\"'settings.search-by-product-name-or-sku' | translate\"\r\n    (change)=\"selectResult($event)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <img [src]=\"item.productAsset | assetPreview: 32\">\r\n        {{ item.productVariantName }}\r\n        <small class=\"sku\">{{ item.sku }}</small>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{display:block}.sku{margin-left:12px;color:var(--color-grey-500)}\n"], components: [{ type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe, "assetPreview": AssetPreviewPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-product-variant-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-select\r\n    #autoComplete\r\n    [items]=\"searchResults$ | async\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [loading]=\"searchLoading\"\r\n    [typeahead]=\"searchInput$\"\r\n    [appendTo]=\"'body'\"\r\n    [placeholder]=\"'settings.search-by-product-name-or-sku' | translate\"\r\n    (change)=\"selectResult($event)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <img [src]=\"item.productAsset | assetPreview: 32\">\r\n        {{ item.productVariantName }}\r\n        <small class=\"sku\">{{ item.sku }}</small>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{display:block}.sku{margin-left:12px;color:var(--color-grey-500)}\n"] }]
@@ -11841,7 +11841,7 @@ class AssetSearchInputComponent {
     }
 }
 AssetSearchInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AssetSearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetSearchInputComponent, selector: "vdr-asset-search-input", inputs: { tags: "tags" }, outputs: { searchTermChange: "searchTermChange", tagsChange: "tagsChange" }, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true, static: true }], ngImport: i0, template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-asset-name-or-tag' | translate\"\r\n    [items]=\"tags\"\r\n    [searchFn]=\"filterTagResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.value\">\r\n            <vdr-chip [colorFrom]=\"item.value\" icon=\"close\" (iconClick)=\"clear(item)\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ item.value }}</vdr-chip>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.value\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label || item }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.value\">\r\n            <vdr-chip [colorFrom]=\"item.value\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ item.value }}</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{display:block;width:100%}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background:none;margin:0}:host ::ng-deep .ng-dropdown-panel-items div.ng-option:last-child{display:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border:none;padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:8px}ng-select{width:100%;min-width:300px;margin-right:12px}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"], components: [{ type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i2$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i2$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AssetSearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetSearchInputComponent, selector: "vdr-asset-search-input", inputs: { tags: "tags" }, outputs: { searchTermChange: "searchTermChange", tagsChange: "tagsChange" }, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true, static: true }], ngImport: i0, template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-asset-name-or-tag' | translate\"\r\n    [items]=\"tags\"\r\n    [searchFn]=\"filterTagResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.value\">\r\n            <vdr-chip [colorFrom]=\"item.value\" icon=\"close\" (iconClick)=\"clear(item)\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ item.value }}</vdr-chip>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.value\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label || item }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.value\">\r\n            <vdr-chip [colorFrom]=\"item.value\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ item.value }}</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{display:block;width:100%}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background:none;margin:0}:host ::ng-deep .ng-dropdown-panel-items div.ng-option:last-child{display:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border:none;padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:8px}ng-select{width:100%;min-width:300px;margin-right:12px}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"], components: [{ type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i2.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetSearchInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-asset-search-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-asset-name-or-tag' | translate\"\r\n    [items]=\"tags\"\r\n    [searchFn]=\"filterTagResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.value\">\r\n            <vdr-chip [colorFrom]=\"item.value\" icon=\"close\" (iconClick)=\"clear(item)\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ item.value }}</vdr-chip>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.value\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label || item }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.value\">\r\n            <vdr-chip [colorFrom]=\"item.value\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ item.value }}</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{display:block;width:100%}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background:none;margin:0}:host ::ng-deep .ng-dropdown-panel-items div.ng-option:last-child{display:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border:none;padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:8px}ng-select{width:100%;min-width:300px;margin-right:12px}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"] }]
@@ -11942,7 +11942,7 @@ class FocalPointControlComponent {
     }
 }
 FocalPointControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FocalPointControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FocalPointControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: { visible: "visible", editable: "editable", width: "width", height: "height", fpx: "fpx", fpy: "fpy" }, outputs: { focalPointChange: "focalPointChange" }, host: { properties: { "style.width.px": "this.width", "style.height.px": "this.height" } }, viewQueries: [{ propertyName: "frame", first: true, predicate: ["frame"], descendants: true, static: true }, { propertyName: "dot", first: true, predicate: ["dot"], descendants: true, static: true }], ngImport: i0, template: "<ng-content></ng-content>\r\n<div class=\"frame\" #frame [style.width.px]=\"width\" [style.height.px]=\"height\">\r\n    <div\r\n        #dot\r\n        class=\"dot\"\r\n        [class.visible]=\"visible\"\r\n        [class.editable]=\"editable\"\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"!editable\"\r\n        cdkDragBoundary=\".frame\"\r\n        (cdkDragEnded)=\"onDragEnded($event)\"\r\n        [cdkDragFreeDragPosition]=\"initialPosition\"\r\n    ></div>\r\n</div>\r\n", styles: [":host{position:relative;display:block}.frame{position:absolute;top:0}.dot{width:20px;height:20px;border-radius:50%;border:2px solid white;position:absolute;visibility:hidden;transition:opacity .3s;box-shadow:0 0 4px 4px #0000006b}.dot.visible{visibility:visible;opacity:.7}.dot.editable{cursor:move;visibility:visible;opacity:1;animation:pulse;animation-duration:.5s;animation-iteration-count:4}@keyframes pulse{0%{border-color:#fff}50%{border-color:var(--color-warning-500)}to{border-color:#fff}}\n"], directives: [{ type: i3$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 });
+FocalPointControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: { visible: "visible", editable: "editable", width: "width", height: "height", fpx: "fpx", fpy: "fpy" }, outputs: { focalPointChange: "focalPointChange" }, host: { properties: { "style.width.px": "this.width", "style.height.px": "this.height" } }, viewQueries: [{ propertyName: "frame", first: true, predicate: ["frame"], descendants: true, static: true }, { propertyName: "dot", first: true, predicate: ["dot"], descendants: true, static: true }], ngImport: i0, template: "<ng-content></ng-content>\r\n<div class=\"frame\" #frame [style.width.px]=\"width\" [style.height.px]=\"height\">\r\n    <div\r\n        #dot\r\n        class=\"dot\"\r\n        [class.visible]=\"visible\"\r\n        [class.editable]=\"editable\"\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"!editable\"\r\n        cdkDragBoundary=\".frame\"\r\n        (cdkDragEnded)=\"onDragEnded($event)\"\r\n        [cdkDragFreeDragPosition]=\"initialPosition\"\r\n    ></div>\r\n</div>\r\n", styles: [":host{position:relative;display:block}.frame{position:absolute;top:0}.dot{width:20px;height:20px;border-radius:50%;border:2px solid white;position:absolute;visibility:hidden;transition:opacity .3s;box-shadow:0 0 4px 4px #0000006b}.dot.visible{visibility:visible;opacity:.7}.dot.editable{cursor:move;visibility:visible;opacity:1;animation:pulse;animation-duration:.5s;animation-iteration-count:4}@keyframes pulse{0%{border-color:#fff}50%{border-color:var(--color-warning-500)}to{border-color:#fff}}\n"], directives: [{ type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FocalPointControlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-focal-point-control', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
@@ -12011,7 +12011,7 @@ TagSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useExisting: TagSelectorComponent,
             multi: true,
         },
-    ], ngImport: i0, template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [multiple]=\"true\"\r\n    [ngModel]=\"_value\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"true\"\r\n    [disabled]=\"disabled\"\r\n    [placeholder]=\"placeholder\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-tag=\"item\" let-clear=\"clear\">\r\n        <vdr-chip [colorFrom]=\"tag\" icon=\"close\" (iconClick)=\"clear(tag)\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let tag of allTags$ | async\" [value]=\"tag\">\r\n        <vdr-chip [colorFrom]=\"tag\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag }}</vdr-chip>\r\n    </ng-option>\r\n</ng-select>\r\n", styles: [":host{display:block;margin-top:12px;position:relative}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background:none;margin:0}:host ::ng-deep .ng-dropdown-panel-items div.ng-option:last-child{display:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border:none;padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:8px}\n"], components: [{ type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i2$1.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }], directives: [{ type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], ngImport: i0, template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [multiple]=\"true\"\r\n    [ngModel]=\"_value\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"true\"\r\n    [disabled]=\"disabled\"\r\n    [placeholder]=\"placeholder\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-tag=\"item\" let-clear=\"clear\">\r\n        <vdr-chip [colorFrom]=\"tag\" icon=\"close\" (iconClick)=\"clear(tag)\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let tag of allTags$ | async\" [value]=\"tag\">\r\n        <vdr-chip [colorFrom]=\"tag\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag }}</vdr-chip>\r\n    </ng-option>\r\n</ng-select>\r\n", styles: [":host{display:block;margin-top:12px;position:relative}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background:none;margin:0}:host ::ng-deep .ng-dropdown-panel-items div.ng-option:last-child{display:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border:none;padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:8px}\n"], components: [{ type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i2.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }], directives: [{ type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TagSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-tag-selector', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -12093,44 +12093,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
  * name/value if none are defined.
  */
 class CustomFieldLabelPipe {
-    constructor(dataService) {
-        this.dataService = dataService;
-        this.subscription = dataService.client.uiState().stream$.subscribe(val => {
-            this.uiLanguageCode = val.uiState.language;
-        });
-    }
-    transform(value) {
+    transform(value, uiLanguageCode) {
         if (!value) {
             return value;
         }
         const { label } = value;
         const name = this.isCustomFieldConfig(value) ? value.name : value.value;
         if (label) {
-            const match = label.find(l => l.languageCode === this.uiLanguageCode);
+            const match = label.find(l => l.languageCode === uiLanguageCode);
             return match ? match.value : label[0].value;
         }
         else {
             return name;
         }
     }
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
     isCustomFieldConfig(input) {
         return input.hasOwnProperty('name');
     }
 }
-CustomFieldLabelPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomFieldLabelPipe, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Pipe });
-CustomFieldLabelPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomFieldLabelPipe, name: "customFieldLabel", pure: false });
+CustomFieldLabelPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomFieldLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+CustomFieldLabelPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomFieldLabelPipe, name: "customFieldLabel" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomFieldLabelPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'customFieldLabel',
-                    pure: false,
+                    pure: true,
                 }]
-        }], ctorParameters: function () { return [{ type: DataService }]; } });
+        }] });
 /**
  * This component renders the appropriate type of form input control based
@@ -12145,6 +12134,11 @@ class CustomFieldControlComponent {
         this.readonly = false;
         this.hasCustomControl = false;
     }
+    ngOnInit() {
+        this.uiLanguage$ = this.dataService.client
+            .uiState()
+            .stream$.pipe(map(({ uiState }) => uiState.language));
+    }
     getFieldDefinition() {
         const config = Object.assign({}, this.customField);
         const id = this.customFieldComponentService.customFieldComponentExists(this.entityName, this.customField.name);
@@ -12164,10 +12158,10 @@ class CustomFieldControlComponent {
     }
 }
 CustomFieldControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomFieldControlComponent, deps: [{ token: DataService }, { token: CustomFieldComponentService }], target: i0.ɵɵFactoryTarget.Component });
-CustomFieldControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: { entityName: "entityName", formGroup: ["customFieldsFormGroup", "formGroup"], customField: "customField", compact: "compact", showLabel: "showLabel", readonly: "readonly" }, viewQueries: [{ propertyName: "customComponentPlaceholder", first: true, predicate: ["customComponentPlaceholder"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"clr-form-control\" *ngIf=\"compact\">\r\n    <label for=\"basic\" class=\"clr-control-label\">{{ customField | customFieldLabel }}</label>\r\n    <div class=\"clr-control-container\">\r\n        <div class=\"clr-input-wrapper\">\r\n            <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n<vdr-form-field [label]=\"customField | customFieldLabel\" [for]=\"customField.name\" *ngIf=\"!compact\">\r\n    <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n</vdr-form-field>\r\n\r\n<ng-template #inputs>\r\n    <ng-container [formGroup]=\"formGroup\">\r\n        <vdr-dynamic-form-input\r\n            [formControlName]=\"customField.name\"\r\n            [readonly]=\"readonly || customField.readonly\"\r\n            [control]=\"formGroup.get(customField.name)\"\r\n            [def]=\"getFieldDefinition()\"\r\n        >\r\n        </vdr-dynamic-form-input>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%}:host .toggle-switch{margin-top:0;margin-bottom:0}\n"], components: [{ type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { type: DynamicFormInputComponent, selector: "vdr-dynamic-form-input", inputs: ["def", "readonly", "control"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "customFieldLabel": CustomFieldLabelPipe } });
+CustomFieldControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: { entityName: "entityName", formGroup: ["customFieldsFormGroup", "formGroup"], customField: "customField", compact: "compact", showLabel: "showLabel", readonly: "readonly" }, viewQueries: [{ propertyName: "customComponentPlaceholder", first: true, predicate: ["customComponentPlaceholder"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"clr-form-control\" *ngIf=\"compact\">\r\n    <label for=\"basic\" class=\"clr-control-label\">{{ customField | customFieldLabel:(uiLanguage$ | async) }}</label>\r\n    <div class=\"clr-control-container\">\r\n        <div class=\"clr-input-wrapper\">\r\n            <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n<vdr-form-field [label]=\"customField | customFieldLabel:(uiLanguage$ | async)\" [for]=\"customField.name\" *ngIf=\"!compact\">\r\n    <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n</vdr-form-field>\r\n\r\n<ng-template #inputs>\r\n    <ng-container [formGroup]=\"formGroup\">\r\n        <vdr-dynamic-form-input\r\n            [formControlName]=\"customField.name\"\r\n            [readonly]=\"readonly || customField.readonly\"\r\n            [control]=\"formGroup.get(customField.name)\"\r\n            [def]=\"getFieldDefinition()\"\r\n        >\r\n        </vdr-dynamic-form-input>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%}:host .toggle-switch{margin-top:0;margin-bottom:0}\n"], components: [{ type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { type: DynamicFormInputComponent, selector: "vdr-dynamic-form-input", inputs: ["def", "readonly", "control"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "customFieldLabel": CustomFieldLabelPipe, "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomFieldControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-custom-field-control', template: "<div class=\"clr-form-control\" *ngIf=\"compact\">\r\n    <label for=\"basic\" class=\"clr-control-label\">{{ customField | customFieldLabel }}</label>\r\n    <div class=\"clr-control-container\">\r\n        <div class=\"clr-input-wrapper\">\r\n            <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n<vdr-form-field [label]=\"customField | customFieldLabel\" [for]=\"customField.name\" *ngIf=\"!compact\">\r\n    <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n</vdr-form-field>\r\n\r\n<ng-template #inputs>\r\n    <ng-container [formGroup]=\"formGroup\">\r\n        <vdr-dynamic-form-input\r\n            [formControlName]=\"customField.name\"\r\n            [readonly]=\"readonly || customField.readonly\"\r\n            [control]=\"formGroup.get(customField.name)\"\r\n            [def]=\"getFieldDefinition()\"\r\n        >\r\n        </vdr-dynamic-form-input>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%}:host .toggle-switch{margin-top:0;margin-bottom:0}\n"] }]
+            args: [{ selector: 'vdr-custom-field-control', template: "<div class=\"clr-form-control\" *ngIf=\"compact\">\r\n    <label for=\"basic\" class=\"clr-control-label\">{{ customField | customFieldLabel:(uiLanguage$ | async) }}</label>\r\n    <div class=\"clr-control-container\">\r\n        <div class=\"clr-input-wrapper\">\r\n            <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n<vdr-form-field [label]=\"customField | customFieldLabel:(uiLanguage$ | async)\" [for]=\"customField.name\" *ngIf=\"!compact\">\r\n    <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n</vdr-form-field>\r\n\r\n<ng-template #inputs>\r\n    <ng-container [formGroup]=\"formGroup\">\r\n        <vdr-dynamic-form-input\r\n            [formControlName]=\"customField.name\"\r\n            [readonly]=\"readonly || customField.readonly\"\r\n            [control]=\"formGroup.get(customField.name)\"\r\n            [def]=\"getFieldDefinition()\"\r\n        >\r\n        </vdr-dynamic-form-input>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%}:host .toggle-switch{margin-top:0;margin-bottom:0}\n"] }]
         }], ctorParameters: function () { return [{ type: DataService }, { type: CustomFieldComponentService }]; }, propDecorators: { entityName: [{
                 type: Input
             }], formGroup: [{
@@ -12498,12 +12492,12 @@ class AssetPreviewComponent {
         });
     }
 }
-AssetPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetPreviewComponent, deps: [{ token: i2.FormBuilder }, { token: DataService }, { token: NotificationService }, { token: i0.ChangeDetectorRef }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-AssetPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: { asset: "asset", editable: "editable", customFields: "customFields", customFieldsForm: "customFieldsForm" }, outputs: { assetChange: "assetChange", editClick: "editClick" }, viewQueries: [{ propertyName: "imageElementRef", first: true, predicate: ["imageElement"], descendants: true, static: true }, { propertyName: "previewDivRef", first: true, predicate: ["previewDiv"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n    <div class=\"image-wrapper\">\r\n        <vdr-focal-point-control\r\n            [width]=\"width\"\r\n            [height]=\"height\"\r\n            [fpx]=\"fpx\"\r\n            [fpy]=\"fpy\"\r\n            [editable]=\"settingFocalPoint\"\r\n            (focalPointChange)=\"onFocalPointChange($event)\"\r\n        >\r\n            <img\r\n                class=\"asset-image\"\r\n                [src]=\"asset | assetPreview: size\"\r\n                [ngClass]=\"size\"\r\n                #imageElement\r\n                (load)=\"onImageLoad()\"\r\n            />\r\n        </vdr-focal-point-control>\r\n        <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n            <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                <clr-icon shape=\"times\"></clr-icon>\r\n            </button>\r\n            <button class=\"btn btn-primary btn-sm\" (click)=\"setFocalPointEnd()\" [disabled]=\"!lastFocalPoint\">\r\n                <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                {{ 'asset.set-focal-point' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"controls\" [class.fade]=\"settingFocalPoint\">\r\n    <form [formGroup]=\"form\">\r\n        <clr-input-container class=\"name-input\" *ngIf=\"editable\">\r\n            <label>{{ 'common.name' | translate }}</label>\r\n            <input\r\n                clrInput\r\n                type=\"text\"\r\n                formControlName=\"name\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n            />\r\n        </clr-input-container>\r\n\r\n        <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n            <span class=\"elide\">\r\n                {{ asset.name }}\r\n            </span>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n            <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                getSourceFileName()\r\n            }}</a>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n            {{ asset.fileSize | filesize }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n            {{ asset.width }} x {{ asset.height }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n            <span *ngIf=\"fpx\"\r\n                ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number: '1.2-2' }}, y:\r\n                {{ fpy | number: '1.2-2' }}</span\r\n            >\r\n            <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n            <br />\r\n            <button\r\n                class=\"btn btn-secondary-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                (click)=\"setFocalPointStart()\"\r\n            >\r\n                <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n            </button>\r\n            <button\r\n                class=\"btn btn-warning-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                *ngIf=\"!!fpx\"\r\n                (click)=\"removeFocalPoint()\"\r\n            >\r\n                {{ 'asset.unset-focal-point' | translate }}\r\n            </button>\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n            <ng-container *ngIf=\"editable\">\r\n                <vdr-tag-selector formControlName=\"tags\"></vdr-tag-selector>\r\n                <button class=\"btn btn-link btn-sm\" (click)=\"manageTags()\">\r\n                    <clr-icon shape=\"tags\"></clr-icon>\r\n                    {{ 'common.manage-tags' | translate }}\r\n                </button>\r\n            </ng-container>\r\n            <div *ngIf=\"!editable\">\r\n                <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                    <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                    {{ tag.value }}</vdr-chip\r\n                >\r\n            </div>\r\n        </vdr-labeled-data>\r\n    </form>\r\n    <section *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Asset\"\r\n            [compact]=\"true\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"customFieldsForm\"\r\n            [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n    <div class=\"flex-spacer\"></div>\r\n    <div class=\"preview-select\">\r\n        <clr-select-container>\r\n            <label>{{ 'asset.preview' | translate }}</label>\r\n            <select clrSelect name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                <option value=\"tiny\">tiny</option>\r\n                <option value=\"thumb\">thumb</option>\r\n                <option value=\"small\">small</option>\r\n                <option value=\"medium\">medium</option>\r\n                <option value=\"large\">large</option>\r\n                <option value=\"\">full size</option>\r\n            </select>\r\n        </clr-select-container>\r\n        <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n    </div>\r\n    <vdr-asset-preview-links class=\"mb4\" [asset]=\"asset\"></vdr-asset-preview-links>\r\n    <div *ngIf=\"!editable\" class=\"edit-button-wrapper\">\r\n        <a\r\n            class=\"btn btn-link btn-sm\"\r\n            [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n            (click)=\"editClick.emit()\"\r\n        >\r\n            <clr-icon shape=\"edit\"></clr-icon>\r\n            {{ 'common.edit' | translate }}\r\n        </a>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex;height:100%}.preview-image{width:100%;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-left:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-right:12px}.edit-button-wrapper{padding-top:6px;border-top:1px solid var(--color-component-border-100);text-align:center}\n"], components: [{ type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: ["visible", "editable", "width", "height", "fpx", "fpy"], outputs: ["focalPointChange"] }, { type: i1$3.ClrInputContainer, selector: "clr-input-container" }, { type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { type: TagSelectorComponent, selector: "vdr-tag-selector", inputs: ["placeholder"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1$3.ClrSelectContainer, selector: "clr-select-container" }, { type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$3.ClrInput, selector: "[clrInput]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$3.ClrSelect, selector: "[clrSelect]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "assetPreview": AssetPreviewPipe, "translate": i7.TranslatePipe, "hasPermission": HasPermissionPipe, "filesize": FileSizePipe, "number": i3.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AssetPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetPreviewComponent, deps: [{ token: i3$1.FormBuilder }, { token: DataService }, { token: NotificationService }, { token: i0.ChangeDetectorRef }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
+AssetPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: { asset: "asset", editable: "editable", customFields: "customFields", customFieldsForm: "customFieldsForm" }, outputs: { assetChange: "assetChange", editClick: "editClick" }, viewQueries: [{ propertyName: "imageElementRef", first: true, predicate: ["imageElement"], descendants: true, static: true }, { propertyName: "previewDivRef", first: true, predicate: ["previewDiv"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n    <div class=\"image-wrapper\">\r\n        <vdr-focal-point-control\r\n            [width]=\"width\"\r\n            [height]=\"height\"\r\n            [fpx]=\"fpx\"\r\n            [fpy]=\"fpy\"\r\n            [editable]=\"settingFocalPoint\"\r\n            (focalPointChange)=\"onFocalPointChange($event)\"\r\n        >\r\n            <img\r\n                class=\"asset-image\"\r\n                [src]=\"asset | assetPreview: size\"\r\n                [ngClass]=\"size\"\r\n                #imageElement\r\n                (load)=\"onImageLoad()\"\r\n            />\r\n        </vdr-focal-point-control>\r\n        <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n            <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                <clr-icon shape=\"times\"></clr-icon>\r\n            </button>\r\n            <button class=\"btn btn-primary btn-sm\" (click)=\"setFocalPointEnd()\" [disabled]=\"!lastFocalPoint\">\r\n                <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                {{ 'asset.set-focal-point' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"controls\" [class.fade]=\"settingFocalPoint\">\r\n    <form [formGroup]=\"form\">\r\n        <clr-input-container class=\"name-input\" *ngIf=\"editable\">\r\n            <label>{{ 'common.name' | translate }}</label>\r\n            <input\r\n                clrInput\r\n                type=\"text\"\r\n                formControlName=\"name\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n            />\r\n        </clr-input-container>\r\n\r\n        <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n            <span class=\"elide\">\r\n                {{ asset.name }}\r\n            </span>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n            <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                getSourceFileName()\r\n            }}</a>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n            {{ asset.fileSize | filesize }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n            {{ asset.width }} x {{ asset.height }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n            <span *ngIf=\"fpx\"\r\n                ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number: '1.2-2' }}, y:\r\n                {{ fpy | number: '1.2-2' }}</span\r\n            >\r\n            <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n            <br />\r\n            <button\r\n                class=\"btn btn-secondary-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                (click)=\"setFocalPointStart()\"\r\n            >\r\n                <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n            </button>\r\n            <button\r\n                class=\"btn btn-warning-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                *ngIf=\"!!fpx\"\r\n                (click)=\"removeFocalPoint()\"\r\n            >\r\n                {{ 'asset.unset-focal-point' | translate }}\r\n            </button>\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n            <ng-container *ngIf=\"editable\">\r\n                <vdr-tag-selector formControlName=\"tags\"></vdr-tag-selector>\r\n                <button class=\"btn btn-link btn-sm\" (click)=\"manageTags()\">\r\n                    <clr-icon shape=\"tags\"></clr-icon>\r\n                    {{ 'common.manage-tags' | translate }}\r\n                </button>\r\n            </ng-container>\r\n            <div *ngIf=\"!editable\">\r\n                <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                    <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                    {{ tag.value }}</vdr-chip\r\n                >\r\n            </div>\r\n        </vdr-labeled-data>\r\n    </form>\r\n    <section *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Asset\"\r\n            [compact]=\"true\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"customFieldsForm\"\r\n            [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n    <div class=\"flex-spacer\"></div>\r\n    <div class=\"preview-select\">\r\n        <clr-select-container>\r\n            <label>{{ 'asset.preview' | translate }}</label>\r\n            <select clrSelect name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                <option value=\"tiny\">tiny</option>\r\n                <option value=\"thumb\">thumb</option>\r\n                <option value=\"small\">small</option>\r\n                <option value=\"medium\">medium</option>\r\n                <option value=\"large\">large</option>\r\n                <option value=\"\">full size</option>\r\n            </select>\r\n        </clr-select-container>\r\n        <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n    </div>\r\n    <vdr-asset-preview-links class=\"mb4\" [asset]=\"asset\"></vdr-asset-preview-links>\r\n    <div *ngIf=\"!editable\" class=\"edit-button-wrapper\">\r\n        <a\r\n            class=\"btn btn-link btn-sm\"\r\n            [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n            (click)=\"editClick.emit()\"\r\n        >\r\n            <clr-icon shape=\"edit\"></clr-icon>\r\n            {{ 'common.edit' | translate }}\r\n        </a>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex;height:100%}.preview-image{width:100%;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-left:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-right:12px}.edit-button-wrapper{padding-top:6px;border-top:1px solid var(--color-component-border-100);text-align:center}\n"], components: [{ type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: ["visible", "editable", "width", "height", "fpx", "fpy"], outputs: ["focalPointChange"] }, { type: i1$3.ClrInputContainer, selector: "clr-input-container" }, { type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { type: TagSelectorComponent, selector: "vdr-tag-selector", inputs: ["placeholder"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1$3.ClrSelectContainer, selector: "clr-select-container" }, { type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$3.ClrInput, selector: "[clrInput]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$3.ClrSelect, selector: "[clrSelect]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "assetPreview": AssetPreviewPipe, "translate": i7.TranslatePipe, "hasPermission": HasPermissionPipe, "filesize": FileSizePipe, "number": i3.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-asset-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n    <div class=\"image-wrapper\">\r\n        <vdr-focal-point-control\r\n            [width]=\"width\"\r\n            [height]=\"height\"\r\n            [fpx]=\"fpx\"\r\n            [fpy]=\"fpy\"\r\n            [editable]=\"settingFocalPoint\"\r\n            (focalPointChange)=\"onFocalPointChange($event)\"\r\n        >\r\n            <img\r\n                class=\"asset-image\"\r\n                [src]=\"asset | assetPreview: size\"\r\n                [ngClass]=\"size\"\r\n                #imageElement\r\n                (load)=\"onImageLoad()\"\r\n            />\r\n        </vdr-focal-point-control>\r\n        <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n            <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                <clr-icon shape=\"times\"></clr-icon>\r\n            </button>\r\n            <button class=\"btn btn-primary btn-sm\" (click)=\"setFocalPointEnd()\" [disabled]=\"!lastFocalPoint\">\r\n                <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                {{ 'asset.set-focal-point' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"controls\" [class.fade]=\"settingFocalPoint\">\r\n    <form [formGroup]=\"form\">\r\n        <clr-input-container class=\"name-input\" *ngIf=\"editable\">\r\n            <label>{{ 'common.name' | translate }}</label>\r\n            <input\r\n                clrInput\r\n                type=\"text\"\r\n                formControlName=\"name\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n            />\r\n        </clr-input-container>\r\n\r\n        <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n            <span class=\"elide\">\r\n                {{ asset.name }}\r\n            </span>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n            <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                getSourceFileName()\r\n            }}</a>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n            {{ asset.fileSize | filesize }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n            {{ asset.width }} x {{ asset.height }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n            <span *ngIf=\"fpx\"\r\n                ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number: '1.2-2' }}, y:\r\n                {{ fpy | number: '1.2-2' }}</span\r\n            >\r\n            <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n            <br />\r\n            <button\r\n                class=\"btn btn-secondary-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                (click)=\"setFocalPointStart()\"\r\n            >\r\n                <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n            </button>\r\n            <button\r\n                class=\"btn btn-warning-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                *ngIf=\"!!fpx\"\r\n                (click)=\"removeFocalPoint()\"\r\n            >\r\n                {{ 'asset.unset-focal-point' | translate }}\r\n            </button>\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n            <ng-container *ngIf=\"editable\">\r\n                <vdr-tag-selector formControlName=\"tags\"></vdr-tag-selector>\r\n                <button class=\"btn btn-link btn-sm\" (click)=\"manageTags()\">\r\n                    <clr-icon shape=\"tags\"></clr-icon>\r\n                    {{ 'common.manage-tags' | translate }}\r\n                </button>\r\n            </ng-container>\r\n            <div *ngIf=\"!editable\">\r\n                <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                    <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                    {{ tag.value }}</vdr-chip\r\n                >\r\n            </div>\r\n        </vdr-labeled-data>\r\n    </form>\r\n    <section *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Asset\"\r\n            [compact]=\"true\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"customFieldsForm\"\r\n            [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n    <div class=\"flex-spacer\"></div>\r\n    <div class=\"preview-select\">\r\n        <clr-select-container>\r\n            <label>{{ 'asset.preview' | translate }}</label>\r\n            <select clrSelect name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                <option value=\"tiny\">tiny</option>\r\n                <option value=\"thumb\">thumb</option>\r\n                <option value=\"small\">small</option>\r\n                <option value=\"medium\">medium</option>\r\n                <option value=\"large\">large</option>\r\n                <option value=\"\">full size</option>\r\n            </select>\r\n        </clr-select-container>\r\n        <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n    </div>\r\n    <vdr-asset-preview-links class=\"mb4\" [asset]=\"asset\"></vdr-asset-preview-links>\r\n    <div *ngIf=\"!editable\" class=\"edit-button-wrapper\">\r\n        <a\r\n            class=\"btn btn-link btn-sm\"\r\n            [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n            (click)=\"editClick.emit()\"\r\n        >\r\n            <clr-icon shape=\"edit\"></clr-icon>\r\n            {{ 'common.edit' | translate }}\r\n        </a>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex;height:100%}.preview-image{width:100%;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-left:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-right:12px}.edit-button-wrapper{padding-top:6px;border-top:1px solid var(--color-component-border-100);text-align:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: i2.FormBuilder }, { type: DataService }, { type: NotificationService }, { type: i0.ChangeDetectorRef }, { type: ModalService }]; }, propDecorators: { asset: [{
+        }], ctorParameters: function () { return [{ type: i3$1.FormBuilder }, { type: DataService }, { type: NotificationService }, { type: i0.ChangeDetectorRef }, { type: ModalService }]; }, propDecorators: { asset: [{
                 type: Input
             }], editable: [{
                 type: Input
@@ -12947,7 +12941,7 @@ class RelationProductInputComponent {
     }
 }
 RelationProductInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationProductInputComponent, deps: [{ token: ModalService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-RelationProductInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationProductInputComponent, selector: "vdr-relation-product-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectProduct()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"library\"\r\n    [entity]=\"product$ | async\"\r\n    [selectLabel]=\"'catalog.select-product' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-product=\"entity\">\r\n        <img *ngIf=\"product.featuredAsset\" [src]=\"product.featuredAsset | assetPreview: 'tiny'\" />\r\n        <div class=\"placeholder\" *ngIf=\"!product.featuredAsset\">\r\n            <clr-icon shape=\"image\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-product=\"entity\">\r\n        <a [routerLink]=\"['/catalog/products', product.id]\">{{ product.name }}</a>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <img [src]=\"item.featuredAsset | assetPreview: 32\" />\r\n            {{ item.name }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [".placeholder{color:var(--color-grey-300)}\n"], components: [{ type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe, "assetPreview": AssetPreviewPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RelationProductInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationProductInputComponent, selector: "vdr-relation-product-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectProduct()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"library\"\r\n    [entity]=\"product$ | async\"\r\n    [selectLabel]=\"'catalog.select-product' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-product=\"entity\">\r\n        <img *ngIf=\"product.featuredAsset\" [src]=\"product.featuredAsset | assetPreview: 'tiny'\" />\r\n        <div class=\"placeholder\" *ngIf=\"!product.featuredAsset\">\r\n            <clr-icon shape=\"image\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-product=\"entity\">\r\n        <a [routerLink]=\"['/catalog/products', product.id]\">{{ product.name }}</a>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <img [src]=\"item.featuredAsset | assetPreview: 32\" />\r\n            {{ item.name }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [".placeholder{color:var(--color-grey-300)}\n"], components: [{ type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe, "assetPreview": AssetPreviewPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationProductInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-relation-product-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-relation-card\r\n    (select)=\"selectProduct()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"library\"\r\n    [entity]=\"product$ | async\"\r\n    [selectLabel]=\"'catalog.select-product' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-product=\"entity\">\r\n        <img *ngIf=\"product.featuredAsset\" [src]=\"product.featuredAsset | assetPreview: 'tiny'\" />\r\n        <div class=\"placeholder\" *ngIf=\"!product.featuredAsset\">\r\n            <clr-icon shape=\"image\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-product=\"entity\">\r\n        <a [routerLink]=\"['/catalog/products', product.id]\">{{ product.name }}</a>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <img [src]=\"item.featuredAsset | assetPreview: 32\" />\r\n            {{ item.name }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [".placeholder{color:var(--color-grey-300)}\n"] }]
@@ -13002,7 +12996,7 @@ class RelationCustomerInputComponent {
     }
 }
 RelationCustomerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationCustomerInputComponent, deps: [{ token: ModalService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-RelationCustomerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationCustomerInputComponent, selector: "vdr-relation-customer-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectCustomer()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"user\"\r\n    [entity]=\"customer\"\r\n    [selectLabel]=\"'customer.select-customer' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview>\r\n        <div class=\"placeholder\">\r\n            <clr-icon shape=\"user\" class=\"is-solid\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-c=\"entity\">\r\n        <div class=\"\">\r\n            <a [routerLink]=\"['/customer/customers', c.id]\">{{ c.firstName }} {{ c.lastName }}</a>\r\n        </div>\r\n        <div class=\"\">{{ c.emailAddress }}</div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <b>{{ item.emailAddress }}</b>\r\n            {{ item.firstName }} {{ item.lastName }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [""], components: [{ type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "translate": i7.TranslatePipe, "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RelationCustomerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationCustomerInputComponent, selector: "vdr-relation-customer-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectCustomer()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"user\"\r\n    [entity]=\"customer\"\r\n    [selectLabel]=\"'customer.select-customer' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview>\r\n        <div class=\"placeholder\">\r\n            <clr-icon shape=\"user\" class=\"is-solid\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-c=\"entity\">\r\n        <div class=\"\">\r\n            <a [routerLink]=\"['/customer/customers', c.id]\">{{ c.firstName }} {{ c.lastName }}</a>\r\n        </div>\r\n        <div class=\"\">{{ c.emailAddress }}</div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <b>{{ item.emailAddress }}</b>\r\n            {{ item.firstName }} {{ item.lastName }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [""], components: [{ type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "translate": i7.TranslatePipe, "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationCustomerInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-relation-customer-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-relation-card\r\n    (select)=\"selectCustomer()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"user\"\r\n    [entity]=\"customer\"\r\n    [selectLabel]=\"'customer.select-customer' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview>\r\n        <div class=\"placeholder\">\r\n            <clr-icon shape=\"user\" class=\"is-solid\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-c=\"entity\">\r\n        <div class=\"\">\r\n            <a [routerLink]=\"['/customer/customers', c.id]\">{{ c.firstName }} {{ c.lastName }}</a>\r\n        </div>\r\n        <div class=\"\">{{ c.emailAddress }}</div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <b>{{ item.emailAddress }}</b>\r\n            {{ item.firstName }} {{ item.lastName }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [""] }]
@@ -13072,7 +13066,7 @@ class RelationProductVariantInputComponent {
     }
 }
 RelationProductVariantInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationProductVariantInputComponent, deps: [{ token: ModalService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-RelationProductVariantInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationProductVariantInputComponent, selector: "vdr-relation-product-variant-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectProductVariant()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"library\"\r\n    [entity]=\"productVariant$ | async\"\r\n    [selectLabel]=\"'catalog.select-product-variant' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-variant=\"entity\">\r\n        <img\r\n            *ngIf=\"variant.featuredAsset || variant.product.featuredAsset as asset; else placeholder\"\r\n            [src]=\"asset | assetPreview: 'tiny'\"\r\n        />\r\n        <ng-template #placeholder>\r\n            <div class=\"placeholder\" *ngIf=\"!variant.featuredAsset\">\r\n                <clr-icon shape=\"image\" size=\"50\"></clr-icon>\r\n            </div>\r\n        </ng-template>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-variant=\"entity\">\r\n        <a [routerLink]=\"['/catalog/products', variant.product.id, { tab: 'variants' }]\">{{ variant.name }}</a>\r\n        <div class=\"\">{{ variant.sku }}</div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <img\r\n                *ngIf=\"item.featuredAsset || item.product.featuredAsset as asset\"\r\n                [src]=\"asset | assetPreview: 32\"\r\n            />\r\n            {{ item.name }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [".placeholder{color:var(--color-grey-300)}\n"], components: [{ type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe, "assetPreview": AssetPreviewPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RelationProductVariantInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationProductVariantInputComponent, selector: "vdr-relation-product-variant-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectProductVariant()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"library\"\r\n    [entity]=\"productVariant$ | async\"\r\n    [selectLabel]=\"'catalog.select-product-variant' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-variant=\"entity\">\r\n        <img\r\n            *ngIf=\"variant.featuredAsset || variant.product.featuredAsset as asset; else placeholder\"\r\n            [src]=\"asset | assetPreview: 'tiny'\"\r\n        />\r\n        <ng-template #placeholder>\r\n            <div class=\"placeholder\" *ngIf=\"!variant.featuredAsset\">\r\n                <clr-icon shape=\"image\" size=\"50\"></clr-icon>\r\n            </div>\r\n        </ng-template>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-variant=\"entity\">\r\n        <a [routerLink]=\"['/catalog/products', variant.product.id, { tab: 'variants' }]\">{{ variant.name }}</a>\r\n        <div class=\"\">{{ variant.sku }}</div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <img\r\n                *ngIf=\"item.featuredAsset || item.product.featuredAsset as asset\"\r\n                [src]=\"asset | assetPreview: 32\"\r\n            />\r\n            {{ item.name }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [".placeholder{color:var(--color-grey-300)}\n"], components: [{ type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe, "assetPreview": AssetPreviewPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationProductVariantInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-relation-product-variant-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-relation-card\r\n    (select)=\"selectProductVariant()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"library\"\r\n    [entity]=\"productVariant$ | async\"\r\n    [selectLabel]=\"'catalog.select-product-variant' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-variant=\"entity\">\r\n        <img\r\n            *ngIf=\"variant.featuredAsset || variant.product.featuredAsset as asset; else placeholder\"\r\n            [src]=\"asset | assetPreview: 'tiny'\"\r\n        />\r\n        <ng-template #placeholder>\r\n            <div class=\"placeholder\" *ngIf=\"!variant.featuredAsset\">\r\n                <clr-icon shape=\"image\" size=\"50\"></clr-icon>\r\n            </div>\r\n        </ng-template>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-variant=\"entity\">\r\n        <a [routerLink]=\"['/catalog/products', variant.product.id, { tab: 'variants' }]\">{{ variant.name }}</a>\r\n        <div class=\"\">{{ variant.sku }}</div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <img\r\n                *ngIf=\"item.featuredAsset || item.product.featuredAsset as asset\"\r\n                [src]=\"asset | assetPreview: 32\"\r\n            />\r\n            {{ item.name }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [".placeholder{color:var(--color-grey-300)}\n"] }]
@@ -13167,7 +13161,7 @@ class RelationGenericInputComponent {
     }
 }
 RelationGenericInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationGenericInputComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-RelationGenericInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationGenericInputComponent, selector: "vdr-relation-generic-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectRelationId()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"objects\"\r\n    [entity]=\"parentFormControl.value\"\r\n    [selectLabel]=\"'common.select-relation-id' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    {{ parentFormControl.value | json }}\r\n    <ng-template vdrRelationCardPreview>\r\n        <div class=\"placeholder\">\r\n            <clr-icon shape=\"objects\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-entity=\"entity\">\r\n        <div class=\"\">\r\n            {{ config.entity }}: <strong>{{ entity.id }}</strong>\r\n        </div>\r\n        <vdr-object-tree [value]=\"{ properties: parentFormControl.value }\"></vdr-object-tree>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <div class=\"id-select-wrapper\">\r\n        <clr-input-container>\r\n            <input [(ngModel)]=\"relationId\" type=\"text\" clrInput [readonly]=\"readonly\" />\r\n        </clr-input-container>\r\n        <div>\r\n            <button class=\"btn btn-primary m0\" (click)=\"select(relationId)\">\r\n                {{ 'common.confirm' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [".id-select-wrapper{display:flex;align-items:flex-end}\n"], components: [{ type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { type: i1$3.ClrInputContainer, selector: "clr-input-container" }], directives: [{ type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$3.ClrInput, selector: "[clrInput]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i7.TranslatePipe, "json": i3.JsonPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RelationGenericInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationGenericInputComponent, selector: "vdr-relation-generic-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectRelationId()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"objects\"\r\n    [entity]=\"parentFormControl.value\"\r\n    [selectLabel]=\"'common.select-relation-id' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    {{ parentFormControl.value | json }}\r\n    <ng-template vdrRelationCardPreview>\r\n        <div class=\"placeholder\">\r\n            <clr-icon shape=\"objects\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-entity=\"entity\">\r\n        <div class=\"\">\r\n            {{ config.entity }}: <strong>{{ entity.id }}</strong>\r\n        </div>\r\n        <vdr-object-tree [value]=\"{ properties: parentFormControl.value }\"></vdr-object-tree>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <div class=\"id-select-wrapper\">\r\n        <clr-input-container>\r\n            <input [(ngModel)]=\"relationId\" type=\"text\" clrInput [readonly]=\"readonly\" />\r\n        </clr-input-container>\r\n        <div>\r\n            <button class=\"btn btn-primary m0\" (click)=\"select(relationId)\">\r\n                {{ 'common.confirm' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [".id-select-wrapper{display:flex;align-items:flex-end}\n"], components: [{ type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { type: i1$3.ClrInputContainer, selector: "clr-input-container" }], directives: [{ type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$3.ClrInput, selector: "[clrInput]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i7.TranslatePipe, "json": i3.JsonPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationGenericInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-relation-generic-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-relation-card\r\n    (select)=\"selectRelationId()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"objects\"\r\n    [entity]=\"parentFormControl.value\"\r\n    [selectLabel]=\"'common.select-relation-id' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    {{ parentFormControl.value | json }}\r\n    <ng-template vdrRelationCardPreview>\r\n        <div class=\"placeholder\">\r\n            <clr-icon shape=\"objects\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-entity=\"entity\">\r\n        <div class=\"\">\r\n            {{ config.entity }}: <strong>{{ entity.id }}</strong>\r\n        </div>\r\n        <vdr-object-tree [value]=\"{ properties: parentFormControl.value }\"></vdr-object-tree>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <div class=\"id-select-wrapper\">\r\n        <clr-input-container>\r\n            <input [(ngModel)]=\"relationId\" type=\"text\" clrInput [readonly]=\"readonly\" />\r\n        </clr-input-container>\r\n        <div>\r\n            <button class=\"btn btn-primary m0\" (click)=\"select(relationId)\">\r\n                {{ 'common.confirm' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [".id-select-wrapper{display:flex;align-items:flex-end}\n"] }]
@@ -13399,7 +13393,7 @@ class ExternalImageDialogComponent {
     }
 }
 ExternalImageDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ExternalImageDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ExternalImageDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ExternalImageDialogComponent, selector: "vdr-external-image-dialog", ngImport: i0, template: "<div class=\"flex\">\r\n    <form [formGroup]=\"form\" class=\"flex-spacer\" clrForm clrLayout=\"vertical\">\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-src' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"src\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-title' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"title\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-alt' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"alt\" />\r\n        </clr-input-container>\r\n    </form>\r\n    <div class=\"preview\">\r\n        <img\r\n            [src]=\"form.get('src')?.value\"\r\n            [class.visible]=\"previewLoaded\"\r\n            (load)=\"onImageLoad($event)\"\r\n            (error)=\"onImageError($event)\"\r\n        />\r\n        <div class=\"placeholder\" *ngIf=\"!previewLoaded\">\r\n            <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || !previewLoaded\">\r\n        {{ 'editor.insert-image' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".preview{display:flex;align-items:center;justify-content:center;max-width:150px;margin-left:12px}.preview img{max-width:100%;display:none}.preview img.visible{display:block}.preview .placeholder{color:var(--color-grey-300)}\n"], components: [{ type: i1$3.ClrInputContainer, selector: "clr-input-container" }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { type: i1$3.ClrLayout, selector: "[clrForm][clrLayout]", inputs: ["clrLayout"] }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$3.ClrInput, selector: "[clrInput]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ExternalImageDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ExternalImageDialogComponent, selector: "vdr-external-image-dialog", ngImport: i0, template: "<div class=\"flex\">\r\n    <form [formGroup]=\"form\" class=\"flex-spacer\" clrForm clrLayout=\"vertical\">\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-src' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"src\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-title' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"title\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-alt' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"alt\" />\r\n        </clr-input-container>\r\n    </form>\r\n    <div class=\"preview\">\r\n        <img\r\n            [src]=\"form.get('src')?.value\"\r\n            [class.visible]=\"previewLoaded\"\r\n            (load)=\"onImageLoad($event)\"\r\n            (error)=\"onImageError($event)\"\r\n        />\r\n        <div class=\"placeholder\" *ngIf=\"!previewLoaded\">\r\n            <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || !previewLoaded\">\r\n        {{ 'editor.insert-image' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".preview{display:flex;align-items:center;justify-content:center;max-width:150px;margin-left:12px}.preview img{max-width:100%;display:none}.preview img.visible{display:block}.preview .placeholder{color:var(--color-grey-300)}\n"], components: [{ type: i1$3.ClrInputContainer, selector: "clr-input-container" }], directives: [{ type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { type: i1$3.ClrLayout, selector: "[clrForm][clrLayout]", inputs: ["clrLayout"] }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$3.ClrInput, selector: "[clrInput]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ExternalImageDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-external-image-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex\">\r\n    <form [formGroup]=\"form\" class=\"flex-spacer\" clrForm clrLayout=\"vertical\">\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-src' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"src\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-title' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"title\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-alt' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"alt\" />\r\n        </clr-input-container>\r\n    </form>\r\n    <div class=\"preview\">\r\n        <img\r\n            [src]=\"form.get('src')?.value\"\r\n            [class.visible]=\"previewLoaded\"\r\n            (load)=\"onImageLoad($event)\"\r\n            (error)=\"onImageError($event)\"\r\n        />\r\n        <div class=\"placeholder\" *ngIf=\"!previewLoaded\">\r\n            <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || !previewLoaded\">\r\n        {{ 'editor.insert-image' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".preview{display:flex;align-items:center;justify-content:center;max-width:150px;margin-left:12px}.preview img{max-width:100%;display:none}.preview img.visible{display:block}.preview .placeholder{color:var(--color-grey-300)}\n"] }]
@@ -13475,7 +13469,7 @@ class LinkDialogComponent {
     }
 }
 LinkDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LinkDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: LinkDialogComponent, selector: "vdr-link-dialog", ngImport: i0, template: "<form [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'editor.link-href' | translate\" for=\"href\">\r\n        <input id=\"href\" type=\"text\" formControlName=\"href\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'editor.link-title' | translate\" for=\"title\">\r\n        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n    </vdr-form-field>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn btn-secondary\" (click)=\"remove()\" *ngIf=\"existing\">\r\n        <clr-icon shape=\"unlink\"></clr-icon> {{ 'editor.remove-link' | translate }}\r\n    </button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid\">\r\n        {{ 'editor.set-link' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], components: [{ type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: LinkDialogComponent, selector: "vdr-link-dialog", ngImport: i0, template: "<form [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'editor.link-href' | translate\" for=\"href\">\r\n        <input id=\"href\" type=\"text\" formControlName=\"href\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'editor.link-title' | translate\" for=\"title\">\r\n        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n    </vdr-form-field>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn btn-secondary\" (click)=\"remove()\" *ngIf=\"existing\">\r\n        <clr-icon shape=\"unlink\"></clr-icon> {{ 'editor.remove-link' | translate }}\r\n    </button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid\">\r\n        {{ 'editor.set-link' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], components: [{ type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }], directives: [{ type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LinkDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-link-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'editor.link-href' | translate\" for=\"href\">\r\n        <input id=\"href\" type=\"text\" formControlName=\"href\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'editor.link-title' | translate\" for=\"title\">\r\n        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n    </vdr-form-field>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn btn-secondary\" (click)=\"remove()\" *ngIf=\"existing\">\r\n        <clr-icon shape=\"unlink\"></clr-icon> {{ 'editor.remove-link' | translate }}\r\n    </button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid\">\r\n        {{ 'editor.set-link' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""] }]
@@ -13970,7 +13964,7 @@ class RichTextFormInputComponent {
 }
 RichTextFormInputComponent.id = 'rich-text-form-input';
 RichTextFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RichTextFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RichTextFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RichTextFormInputComponent, selector: "vdr-rich-text-form-input", ngImport: i0, template: "<vdr-rich-text-editor\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n></vdr-rich-text-editor>\r\n", styles: [":host textarea{resize:both;height:6rem;width:100%}\n"], components: [{ type: RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }], directives: [{ type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RichTextFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RichTextFormInputComponent, selector: "vdr-rich-text-form-input", ngImport: i0, template: "<vdr-rich-text-editor\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n></vdr-rich-text-editor>\r\n", styles: [":host textarea{resize:both;height:6rem;width:100%}\n"], components: [{ type: RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }], directives: [{ type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RichTextFormInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-rich-text-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-rich-text-editor\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n></vdr-rich-text-editor>\r\n", styles: [":host textarea{resize:both;height:6rem;width:100%}\n"] }]
@@ -13985,18 +13979,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
  * @docsPage default-inputs
  */
 class SelectFormInputComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+    }
     get options() {
         var _a;
         return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.options) || this.config.options;
     }
+    ngOnInit() {
+        this.uiLanguage$ = this.dataService.client.uiState().mapStream(({ uiState }) => uiState.language);
+    }
+    trackByFn(index, item) {
+        return item.value;
+    }
 }
 SelectFormInputComponent.id = 'select-form-input';
-SelectFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SelectFormInputComponent, selector: "vdr-select-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<select clrSelect [formControl]=\"formControl\" [vdrDisabled]=\"readonly\">\r\n    <option *ngIf=\"config.nullable\" [ngValue]=\"null\"></option>\r\n    <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\r\n        {{ (option | customFieldLabel) || option.label || option.value }}\r\n    </option>\r\n</select>\r\n", styles: ["select{width:100%}\n"], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$3.ClrSelect, selector: "[clrSelect]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "customFieldLabel": CustomFieldLabelPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SelectFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectFormInputComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component });
+SelectFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SelectFormInputComponent, selector: "vdr-select-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<select clrSelect [formControl]=\"formControl\" [vdrDisabled]=\"readonly\">\r\n    <option *ngIf=\"config.nullable\" [ngValue]=\"null\"></option>\r\n    <option *ngFor=\"let option of options;trackBy:trackByFn\" [ngValue]=\"option.value\">\r\n        {{ (option | customFieldLabel:(uiLanguage$ | async)) || option.label || option.value }}\r\n    </option>\r\n</select>\r\n", styles: ["select{width:100%}\n"], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$3.ClrSelect, selector: "[clrSelect]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }], pipes: { "customFieldLabel": CustomFieldLabelPipe, "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectFormInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-select-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<select clrSelect [formControl]=\"formControl\" [vdrDisabled]=\"readonly\">\r\n    <option *ngIf=\"config.nullable\" [ngValue]=\"null\"></option>\r\n    <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\r\n        {{ (option | customFieldLabel) || option.label || option.value }}\r\n    </option>\r\n</select>\r\n", styles: ["select{width:100%}\n"] }]
-        }], propDecorators: { readonly: [{
+            args: [{ selector: 'vdr-select-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<select clrSelect [formControl]=\"formControl\" [vdrDisabled]=\"readonly\">\r\n    <option *ngIf=\"config.nullable\" [ngValue]=\"null\"></option>\r\n    <option *ngFor=\"let option of options;trackBy:trackByFn\" [ngValue]=\"option.value\">\r\n        {{ (option | customFieldLabel:(uiLanguage$ | async)) || option.label || option.value }}\r\n    </option>\r\n</select>\r\n", styles: ["select{width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataService }]; }, propDecorators: { readonly: [{
                 type: Input
             }] } });
@@ -14019,7 +14022,7 @@ class TextFormInputComponent {
 }
 TextFormInputComponent.id = 'text-form-input';
 TextFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TextFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TextFormInputComponent, selector: "vdr-text-form-input", ngImport: i0, template: "<vdr-affixed-input\r\n    [suffix]=\"suffix\"\r\n    [prefix]=\"prefix\"\r\n>\r\n    <input type=\"text\" [readonly]=\"readonly\" [formControl]=\"formControl\" />\r\n</vdr-affixed-input>\r\n", styles: ["input{width:100%}\n"], components: [{ type: AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TextFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TextFormInputComponent, selector: "vdr-text-form-input", ngImport: i0, template: "<vdr-affixed-input\r\n    [suffix]=\"suffix\"\r\n    [prefix]=\"prefix\"\r\n>\r\n    <input type=\"text\" [readonly]=\"readonly\" [formControl]=\"formControl\" />\r\n</vdr-affixed-input>\r\n", styles: ["input{width:100%}\n"], components: [{ type: AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TextFormInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-text-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-affixed-input\r\n    [suffix]=\"suffix\"\r\n    [prefix]=\"prefix\"\r\n>\r\n    <input type=\"text\" [readonly]=\"readonly\" [formControl]=\"formControl\" />\r\n</vdr-affixed-input>\r\n", styles: ["input{width:100%}\n"] }]
@@ -14039,7 +14042,7 @@ class TextareaFormInputComponent {
 }
 TextareaFormInputComponent.id = 'textarea-form-input';
 TextareaFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TextareaFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextareaFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TextareaFormInputComponent, selector: "vdr-textarea-form-input", ngImport: i0, template: "<textarea [spellcheck]=\"spellcheck\" autocomplete=\"off\" autocorrect=\"off\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n></textarea>\r\n", styles: [":host textarea{resize:both;height:6rem;width:100%}\n"], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TextareaFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TextareaFormInputComponent, selector: "vdr-textarea-form-input", ngImport: i0, template: "<textarea [spellcheck]=\"spellcheck\" autocomplete=\"off\" autocorrect=\"off\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n></textarea>\r\n", styles: [":host textarea{resize:both;height:6rem;width:100%}\n"], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TextareaFormInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-textarea-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<textarea [spellcheck]=\"spellcheck\" autocomplete=\"off\" autocorrect=\"off\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n></textarea>\r\n", styles: [":host textarea{resize:both;height:6rem;width:100%}\n"] }]
@@ -14352,7 +14355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
 class AddressFormComponent {
 }
 AddressFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AddressFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AddressFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AddressFormComponent, selector: "vdr-address-form", inputs: { customFields: "customFields", formGroup: "formGroup", availableCountries: "availableCountries" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.full-name' | translate }}</label>\r\n                <input formControlName=\"fullName\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.company' | translate }}</label>\r\n                <input formControlName=\"company\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.street-line-1' | translate }}</label>\r\n                <input formControlName=\"streetLine1\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.street-line-2' | translate }}</label>\r\n                <input formControlName=\"streetLine2\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.city' | translate }}</label>\r\n                <input formControlName=\"city\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.province' | translate }}</label>\r\n                <input formControlName=\"province\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.postal-code' | translate }}</label>\r\n                <input formControlName=\"postalCode\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.country' | translate }}</label>\r\n                <select name=\"countryCode\" formControlName=\"countryCode\" clrInput clrSelect>\r\n                    <option *ngFor=\"let country of availableCountries\" [value]=\"country.code\">\r\n                        {{ country.name }}\r\n                    </option>\r\n                </select>\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <clr-input-container>\r\n        <label>{{ 'customer.phone-number' | translate }}</label>\r\n        <input formControlName=\"phoneNumber\" type=\"text\" clrInput />\r\n    </clr-input-container>\r\n    <section formGroupName=\"customFields\" *ngIf=\"formGroup.get('customFields') as customFieldsGroup\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Address\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"customFieldsGroup\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n</form>\r\n", styles: [""], components: [{ type: i1$3.ClrInputContainer, selector: "clr-input-container" }, { type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.ClrInput, selector: "[clrInput]" }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$3.ClrSelect, selector: "[clrSelect]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AddressFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AddressFormComponent, selector: "vdr-address-form", inputs: { customFields: "customFields", formGroup: "formGroup", availableCountries: "availableCountries" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.full-name' | translate }}</label>\r\n                <input formControlName=\"fullName\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.company' | translate }}</label>\r\n                <input formControlName=\"company\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.street-line-1' | translate }}</label>\r\n                <input formControlName=\"streetLine1\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.street-line-2' | translate }}</label>\r\n                <input formControlName=\"streetLine2\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.city' | translate }}</label>\r\n                <input formControlName=\"city\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.province' | translate }}</label>\r\n                <input formControlName=\"province\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.postal-code' | translate }}</label>\r\n                <input formControlName=\"postalCode\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.country' | translate }}</label>\r\n                <select name=\"countryCode\" formControlName=\"countryCode\" clrInput clrSelect>\r\n                    <option *ngFor=\"let country of availableCountries\" [value]=\"country.code\">\r\n                        {{ country.name }}\r\n                    </option>\r\n                </select>\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <clr-input-container>\r\n        <label>{{ 'customer.phone-number' | translate }}</label>\r\n        <input formControlName=\"phoneNumber\" type=\"text\" clrInput />\r\n    </clr-input-container>\r\n    <section formGroupName=\"customFields\" *ngIf=\"formGroup.get('customFields') as customFieldsGroup\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Address\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"customFieldsGroup\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n</form>\r\n", styles: [""], components: [{ type: i1$3.ClrInputContainer, selector: "clr-input-container" }, { type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }], directives: [{ type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.ClrInput, selector: "[clrInput]" }, { type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$3.ClrSelect, selector: "[clrSelect]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AddressFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-address-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"formGroup\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.full-name' | translate }}</label>\r\n                <input formControlName=\"fullName\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.company' | translate }}</label>\r\n                <input formControlName=\"company\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.street-line-1' | translate }}</label>\r\n                <input formControlName=\"streetLine1\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.street-line-2' | translate }}</label>\r\n                <input formControlName=\"streetLine2\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.city' | translate }}</label>\r\n                <input formControlName=\"city\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.province' | translate }}</label>\r\n                <input formControlName=\"province\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.postal-code' | translate }}</label>\r\n                <input formControlName=\"postalCode\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.country' | translate }}</label>\r\n                <select name=\"countryCode\" formControlName=\"countryCode\" clrInput clrSelect>\r\n                    <option *ngFor=\"let country of availableCountries\" [value]=\"country.code\">\r\n                        {{ country.name }}\r\n                    </option>\r\n                </select>\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <clr-input-container>\r\n        <label>{{ 'customer.phone-number' | translate }}</label>\r\n        <input formControlName=\"phoneNumber\" type=\"text\" clrInput />\r\n    </clr-input-container>\r\n    <section formGroupName=\"customFields\" *ngIf=\"formGroup.get('customFields') as customFieldsGroup\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Address\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"customFieldsGroup\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n</form>\r\n", styles: [""] }]
@@ -14542,7 +14545,7 @@ ChannelAssignmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             useExisting: ChannelAssignmentControlComponent,
             multi: true,
         },
-    ], ngImport: i0, template: "<ng-select\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"multiple\"\r\n    [ngModel]=\"value\"\r\n    [clearable]=\"false\"\r\n    [searchable]=\"false\"\r\n    [disabled]=\"disabled\"\r\n    [compareWith]=\"compareFn\"\r\n    (focus)=\"focussed()\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <span aria-hidden=\"true\" class=\"ng-value-icon left\" (click)=\"clear(item)\"> \u00D7 </span>\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        <span class=\"channel-label\">{{ item.code | channelCodeToLabel | translate }}</span>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let item of channels$ | async\" [value]=\"item\" [disabled]=\"channelIsDisabled(item.id)\">\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        {{ item.code | channelCodeToLabel | translate }}\r\n    </ng-option>\r\n</ng-select>\r\n\r\n", styles: [":host{min-width:200px}:host.clr-input{border-bottom:none;padding:0}::ng-deep .ng-value>vdr-channel-badge,::ng-deep .ng-option>vdr-channel-badge{margin-bottom:-1px}::ng-deep .ng-value>vdr-channel-badge{margin-left:6px}.channel-label{margin-right:6px}\n"], components: [{ type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { type: i2$1.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }], directives: [{ type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i7.TranslatePipe, "channelCodeToLabel": ChannelLabelPipe, "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.Default });
+    ], ngImport: i0, template: "<ng-select\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"multiple\"\r\n    [ngModel]=\"value\"\r\n    [clearable]=\"false\"\r\n    [searchable]=\"false\"\r\n    [disabled]=\"disabled\"\r\n    [compareWith]=\"compareFn\"\r\n    (focus)=\"focussed()\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <span aria-hidden=\"true\" class=\"ng-value-icon left\" (click)=\"clear(item)\"> \u00D7 </span>\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        <span class=\"channel-label\">{{ item.code | channelCodeToLabel | translate }}</span>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let item of channels$ | async\" [value]=\"item\" [disabled]=\"channelIsDisabled(item.id)\">\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        {{ item.code | channelCodeToLabel | translate }}\r\n    </ng-option>\r\n</ng-select>\r\n\r\n", styles: [":host{min-width:200px}:host.clr-input{border-bottom:none;padding:0}::ng-deep .ng-value>vdr-channel-badge,::ng-deep .ng-option>vdr-channel-badge{margin-bottom:-1px}::ng-deep .ng-value>vdr-channel-badge{margin-left:6px}.channel-label{margin-right:6px}\n"], components: [{ type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { type: i2.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }], directives: [{ type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i7.TranslatePipe, "channelCodeToLabel": ChannelLabelPipe, "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ChannelAssignmentControlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-channel-assignment-control', changeDetection: ChangeDetectionStrategy.Default, providers: [
@@ -14775,10 +14778,10 @@ class DataTableComponent {
     }
 }
 DataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DataTableComponent, selector: "vdr-data-table", inputs: { items: "items", itemsPerPage: "itemsPerPage", currentPage: "currentPage", totalItems: "totalItems", allSelected: "allSelected", isRowSelectedFn: "isRowSelectedFn", emptyStateLabel: "emptyStateLabel" }, outputs: { allSelectChange: "allSelectChange", rowSelectChange: "rowSelectChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange" }, providers: [PaginationService], queries: [{ propertyName: "columns", predicate: DataTableColumnComponent }, { propertyName: "templateRefs", predicate: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!items || (items && items.length); else emptyPlaceholder\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngIf=\"isRowSelectedFn\" class=\"align-middle\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"allSelected\"\r\n                        (change)=\"allSelectChange.emit()\"\r\n                    />\r\n                </th>\r\n                <th *ngFor=\"let header of columns?.toArray()\" class=\"left\" [class.expand]=\"header.expand\">\r\n                    <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"isRowSelectedFn\" class=\"align-middle\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"isRowSelectedFn(item)\"\r\n                        (change)=\"rowSelectChange.emit(item)\"\r\n                    />\r\n                </td>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"rowTemplate; context: { item: item, index: i }\"\r\n                ></ng-container>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n    <div class=\"table-footer\">\r\n        <vdr-items-per-page-controls\r\n            *ngIf=\"totalItems\"\r\n            [itemsPerPage]=\"itemsPerPage\"\r\n            (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n        ></vdr-items-per-page-controls>\r\n        <div>\r\n            {{ 'common.total-items' | translate: { currentStart, currentEnd, totalItems } }}\r\n        </div>\r\n\r\n        <vdr-pagination-controls\r\n            *ngIf=\"totalItems\"\r\n            [currentPage]=\"currentPage\"\r\n            [itemsPerPage]=\"itemsPerPage\"\r\n            [totalItems]=\"totalItems\"\r\n            (pageChange)=\"pageChange.emit($event)\"\r\n        ></vdr-pagination-controls>\r\n    </div>\r\n</ng-container>\r\n<ng-template #emptyPlaceholder>\r\n    <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n</ng-template>\r\n", styles: [":host{display:block;max-width:100%;overflow:auto}thead th{position:sticky;top:24px;z-index:1}thead th.expand{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:6px}\n"], components: [{ type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { type: EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i1$3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }], pipes: { "paginate": i1$5.PaginatePipe, "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DataTableComponent, selector: "vdr-data-table", inputs: { items: "items", itemsPerPage: "itemsPerPage", currentPage: "currentPage", totalItems: "totalItems", allSelected: "allSelected", isRowSelectedFn: "isRowSelectedFn", emptyStateLabel: "emptyStateLabel" }, outputs: { allSelectChange: "allSelectChange", rowSelectChange: "rowSelectChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange" }, providers: [PaginationService], queries: [{ propertyName: "columns", predicate: DataTableColumnComponent }, { propertyName: "templateRefs", predicate: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!items || (items && items.length); else emptyPlaceholder\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngIf=\"isRowSelectedFn\" class=\"align-middle\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"allSelected\"\r\n                        (change)=\"allSelectChange.emit()\"\r\n                    />\r\n                </th>\r\n                <th *ngFor=\"let header of columns?.toArray()\" class=\"left\" [class.expand]=\"header.expand\">\r\n                    <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"isRowSelectedFn\" class=\"align-middle\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"isRowSelectedFn(item)\"\r\n                        (change)=\"rowSelectChange.emit(item)\"\r\n                    />\r\n                </td>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"rowTemplate; context: { item: item, index: i }\"\r\n                ></ng-container>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n    <div class=\"table-footer\">\r\n        <vdr-items-per-page-controls\r\n            *ngIf=\"totalItems\"\r\n            [itemsPerPage]=\"itemsPerPage\"\r\n            (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n        ></vdr-items-per-page-controls>\r\n        <div *ngIf=\"totalItems\" class=\"p5\">\r\n            {{ 'common.total-items' | translate: { currentStart, currentEnd, totalItems } }}\r\n        </div>\r\n\r\n        <vdr-pagination-controls\r\n            *ngIf=\"totalItems\"\r\n            [currentPage]=\"currentPage\"\r\n            [itemsPerPage]=\"itemsPerPage\"\r\n            [totalItems]=\"totalItems\"\r\n            (pageChange)=\"pageChange.emit($event)\"\r\n        ></vdr-pagination-controls>\r\n    </div>\r\n</ng-container>\r\n<ng-template #emptyPlaceholder>\r\n    <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n</ng-template>\r\n", styles: [":host{display:block;max-width:100%;overflow:auto}thead th{position:sticky;top:24px;z-index:1}thead th.expand{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:6px}\n"], components: [{ type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { type: EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i1$3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }], pipes: { "paginate": i1$5.PaginatePipe, "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-data-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [PaginationService], template: "<ng-container *ngIf=\"!items || (items && items.length); else emptyPlaceholder\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngIf=\"isRowSelectedFn\" class=\"align-middle\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"allSelected\"\r\n                        (change)=\"allSelectChange.emit()\"\r\n                    />\r\n                </th>\r\n                <th *ngFor=\"let header of columns?.toArray()\" class=\"left\" [class.expand]=\"header.expand\">\r\n                    <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"isRowSelectedFn\" class=\"align-middle\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"isRowSelectedFn(item)\"\r\n                        (change)=\"rowSelectChange.emit(item)\"\r\n                    />\r\n                </td>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"rowTemplate; context: { item: item, index: i }\"\r\n                ></ng-container>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n    <div class=\"table-footer\">\r\n        <vdr-items-per-page-controls\r\n            *ngIf=\"totalItems\"\r\n            [itemsPerPage]=\"itemsPerPage\"\r\n            (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n        ></vdr-items-per-page-controls>\r\n        <div>\r\n            {{ 'common.total-items' | translate: { currentStart, currentEnd, totalItems } }}\r\n        </div>\r\n\r\n        <vdr-pagination-controls\r\n            *ngIf=\"totalItems\"\r\n            [currentPage]=\"currentPage\"\r\n            [itemsPerPage]=\"itemsPerPage\"\r\n            [totalItems]=\"totalItems\"\r\n            (pageChange)=\"pageChange.emit($event)\"\r\n        ></vdr-pagination-controls>\r\n    </div>\r\n</ng-container>\r\n<ng-template #emptyPlaceholder>\r\n    <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n</ng-template>\r\n", styles: [":host{display:block;max-width:100%;overflow:auto}thead th{position:sticky;top:24px;z-index:1}thead th.expand{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:6px}\n"] }]
+            args: [{ selector: 'vdr-data-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [PaginationService], template: "<ng-container *ngIf=\"!items || (items && items.length); else emptyPlaceholder\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngIf=\"isRowSelectedFn\" class=\"align-middle\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"allSelected\"\r\n                        (change)=\"allSelectChange.emit()\"\r\n                    />\r\n                </th>\r\n                <th *ngFor=\"let header of columns?.toArray()\" class=\"left\" [class.expand]=\"header.expand\">\r\n                    <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"isRowSelectedFn\" class=\"align-middle\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"isRowSelectedFn(item)\"\r\n                        (change)=\"rowSelectChange.emit(item)\"\r\n                    />\r\n                </td>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"rowTemplate; context: { item: item, index: i }\"\r\n                ></ng-container>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n    <div class=\"table-footer\">\r\n        <vdr-items-per-page-controls\r\n            *ngIf=\"totalItems\"\r\n            [itemsPerPage]=\"itemsPerPage\"\r\n            (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n        ></vdr-items-per-page-controls>\r\n        <div *ngIf=\"totalItems\" class=\"p5\">\r\n            {{ 'common.total-items' | translate: { currentStart, currentEnd, totalItems } }}\r\n        </div>\r\n\r\n        <vdr-pagination-controls\r\n            *ngIf=\"totalItems\"\r\n            [currentPage]=\"currentPage\"\r\n            [itemsPerPage]=\"itemsPerPage\"\r\n            [totalItems]=\"totalItems\"\r\n            (pageChange)=\"pageChange.emit($event)\"\r\n        ></vdr-pagination-controls>\r\n    </div>\r\n</ng-container>\r\n<ng-template #emptyPlaceholder>\r\n    <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n</ng-template>\r\n", styles: [":host{display:block;max-width:100%;overflow:auto}thead th{position:sticky;top:24px;z-index:1}thead th.expand{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:6px}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], itemsPerPage: [{
@@ -14826,7 +14829,7 @@ class EditNoteDialogComponent {
     }
 }
 EditNoteDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EditNoteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EditNoteDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: EditNoteDialogComponent, selector: "vdr-edit-note-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.edit-note' | translate }}\r\n</ng-template>\r\n\r\n<textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n<div class=\"visibility-select\" *ngIf=\"displayPrivacyControls\">\r\n    <clr-checkbox-wrapper>\r\n        <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n        <label>{{ 'order.note-is-private' | translate }}</label>\r\n    </clr-checkbox-wrapper>\r\n    <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n        {{ 'order.note-only-visible-to-administrators' | translate }}\r\n    </span>\r\n    <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n        {{ 'order.note-visible-to-customer' | translate }}\r\n    </span>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"note.length === 0\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-500)}.visibility-select .private{color:var(--color-success-500)}textarea.note{width:100%;height:72px;border-radius:3px;margin-right:6px}\n"], components: [{ type: i1$3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }], directives: [{ type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EditNoteDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: EditNoteDialogComponent, selector: "vdr-edit-note-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.edit-note' | translate }}\r\n</ng-template>\r\n\r\n<textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n<div class=\"visibility-select\" *ngIf=\"displayPrivacyControls\">\r\n    <clr-checkbox-wrapper>\r\n        <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n        <label>{{ 'order.note-is-private' | translate }}</label>\r\n    </clr-checkbox-wrapper>\r\n    <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n        {{ 'order.note-only-visible-to-administrators' | translate }}\r\n    </span>\r\n    <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n        {{ 'order.note-visible-to-customer' | translate }}\r\n    </span>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"note.length === 0\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-500)}.visibility-select .private{color:var(--color-success-500)}textarea.note{width:100%;height:72px;border-radius:3px;margin-right:6px}\n"], components: [{ type: i1$3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }], directives: [{ type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EditNoteDialogComponent, decorators: [{
             type: Component,
             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-right:6px}\n"] }]
@@ -14984,12 +14987,12 @@ class ExtensionHostComponent {
         return input.hasOwnProperty('extensionUrl');
     }
 }
-ExtensionHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ExtensionHostComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2$2.DomSanitizer }, { token: ExtensionHostService }], target: i0.ɵɵFactoryTarget.Component });
+ExtensionHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ExtensionHostComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2$1.DomSanitizer }, { token: ExtensionHostService }], target: i0.ɵɵFactoryTarget.Component });
 ExtensionHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", 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;left:0;top:0;bottom:0;right:0;width:100%;height:100%;border:none}.launch-button{position:absolute;left:0;top:0;bottom:0;right: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"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", 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;left:0;top:0;bottom:0;right:0;width:100%;height:100%;border:none}.launch-button{position:absolute;left:0;top:0;bottom:0;right: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$2.ActivatedRoute }, { type: i2$2.DomSanitizer }, { type: ExtensionHostService }]; }, propDecorators: { extensionFrame: [{
+        }], ctorParameters: function () { return [{ type: i1$2.ActivatedRoute }, { type: i2$1.DomSanitizer }, { type: ExtensionHostService }]; }, propDecorators: { extensionFrame: [{
                 type: ViewChild,
                 args: ['extensionFrame']
             }] } });
@@ -15839,7 +15842,7 @@ class CoreModule {
         this.titleService.setTitle(title);
     }
 }
-CoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CoreModule, deps: [{ token: I18nService }, { token: LocalStorageService }, { token: i2$2.Title }], target: i0.ɵɵFactoryTarget.NgModule });
+CoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CoreModule, deps: [{ token: I18nService }, { token: LocalStorageService }, { token: i2$1.Title }], target: i0.ɵɵFactoryTarget.NgModule });
 CoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CoreModule, declarations: [AppShellComponent,
         UserMenuComponent,
         MainNavComponent,
@@ -15905,7 +15908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                         ThemeSwitcherComponent,
                     ],
                 }]
-        }], ctorParameters: function () { return [{ type: I18nService }, { type: LocalStorageService }, { type: i2$2.Title }]; } });
+        }], ctorParameters: function () { return [{ type: I18nService }, { type: LocalStorageService }, { type: i2$1.Title }]; } });
 function HttpLoaderFactory(http, location) {
     // Dynamically get the baseHref, which is configured in the angular.json file
     const baseHref = location.getBaseHrefFromDOM();
@@ -16357,7 +16360,7 @@ function patchObject(obj, patch) {
 }
 // Auto-generated by the set-version.js script.
-const ADMIN_UI_VERSION = '2.0.0-next.10';
+const ADMIN_UI_VERSION = '2.0.0-next.11';
 /**
  * Responsible for registering dashboard widget components and querying for layouts.