@vendure/admin-ui 2.1.4 → 2.2.0-next.0

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

@@ -6,7 +6,7 @@ import { concatMap, bufferCount, map, filter, distinctUntilChanged, skip, takeUn
 import * as i1 from 'apollo-angular';
 import { gql, ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
 import { pick } from '@vendure/common/lib/pick';
-import { from, Subject, merge, lastValueFrom, BehaviorSubject, interval, combineLatest, isObservable, switchMap as switchMap$1, of, map as map$1, Observable, timer, EMPTY, concat, forkJoin, fromEvent } from 'rxjs';
+import { from, Subject, merge, lastValueFrom, BehaviorSubject, interval, combineLatest, isObservable, switchMap as switchMap$1, of, map as map$1, take as take$1, takeUntil as takeUntil$1, finalize as finalize$1, Observable, timer, EMPTY, concat, forkJoin, fromEvent } from 'rxjs';
 import { simpleDeepClone } from '@vendure/common/lib/simple-deep-clone';
 import { NetworkStatus, ApolloLink, InMemoryCache } from '@apollo/client/core';
 import { notNullOrUndefined, getGraphQlInputName, assertNever } from '@vendure/common/lib/shared-utils';
@@ -6820,9 +6820,13 @@ class I18nService {
     get availableLanguages() {
         return [...this._availableLanguages];
     }
+    get availableLocales() {
+        return [...this._availableLocales];
+    }
     constructor(ngxTranslate, document) {
         this.ngxTranslate = ngxTranslate;
         this.document = document;
+        this._availableLocales = [];
         this._availableLanguages = [];
     }
     /**
@@ -6846,6 +6850,12 @@ class I18nService {
     setAvailableLanguages(languages) {
         this._availableLanguages = languages;
     }
+    /**
+     * Set the available UI locales
+     */
+    setAvailableLocales(locales) {
+        this._availableLocales = locales;
+    }
     /**
      * Translate the given key.
      */
@@ -6887,9 +6897,9 @@ class LocalizationService {
     constructor(i18nService, dataService) {
         this.i18nService = i18nService;
         this.dataService = dataService;
-        this.uiLanguageAndLocale$ = this.dataService.client
-            ?.uiState()
-            ?.stream$?.pipe(map$1(({ uiState }) => [uiState.language, uiState.locale ?? undefined]));
+        this.uiLanguageAndLocale$ = this.dataService.client?.uiState()?.stream$?.pipe(map$1(({ uiState }) => {
+            return [uiState.language, uiState.locale ?? undefined];
+        }));
         this.direction$ = this.uiLanguageAndLocale$?.pipe(map$1(([languageCode]) => {
             return this.i18nService.isRTL(languageCode) ? 'rtl' : 'ltr';
         }));
@@ -7147,7 +7157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
         }], ctorParameters: function () { return [{ type: AlertsService }]; } });
 
 // Auto-generated by the set-version.js script.
-const ADMIN_UI_VERSION = '2.1.4';
+const ADMIN_UI_VERSION = '2.2.0-next.0';
 
 /* eslint-disable @angular-eslint/directive-selector */
 class FormFieldControlDirective {
@@ -7754,267 +7764,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
                 }] }]; } });
 
 class UiLanguageSwitcherDialogComponent {
-    constructor() {
+    constructor(dataService, changeDetector) {
+        this.dataService = dataService;
+        this.changeDetector = changeDetector;
+        this.isLoading = true;
+        this.destroy$ = new Subject();
         this.availableLanguages = [];
-        this.availableLocales = [
-            'AF',
-            'AL',
-            'DZ',
-            'AS',
-            'AD',
-            'AO',
-            'AI',
-            'AQ',
-            'AG',
-            'AR',
-            'AM',
-            'AW',
-            'AU',
-            'AT',
-            'AZ',
-            'BS',
-            'BH',
-            'BD',
-            'BB',
-            'BY',
-            'BE',
-            'BZ',
-            'BJ',
-            'BM',
-            'BT',
-            'BO',
-            'BQ',
-            'BA',
-            'BW',
-            'BV',
-            'BR',
-            'IO',
-            'BN',
-            'BG',
-            'BF',
-            'BI',
-            'CV',
-            'KH',
-            'CM',
-            'CA',
-            'KY',
-            'CF',
-            'TD',
-            'CL',
-            'CN',
-            'CX',
-            'CC',
-            'CO',
-            'KM',
-            'CD',
-            'CG',
-            'CK',
-            'CR',
-            'HR',
-            'CU',
-            'CW',
-            'CY',
-            'CZ',
-            'CI',
-            'DK',
-            'DJ',
-            'DM',
-            'DO',
-            'EC',
-            'EG',
-            'SV',
-            'GQ',
-            'ER',
-            'EE',
-            'SZ',
-            'ET',
-            'FK',
-            'FO',
-            'FJ',
-            'FI',
-            'FR',
-            'GF',
-            'PF',
-            'TF',
-            'GA',
-            'GM',
-            'GE',
-            'DE',
-            'GH',
-            'GI',
-            'GR',
-            'GL',
-            'GD',
-            'GP',
-            'GU',
-            'GT',
-            'GG',
-            'GN',
-            'GW',
-            'GY',
-            'HT',
-            'HM',
-            'VA',
-            'HN',
-            'HK',
-            'HU',
-            'IS',
-            'IN',
-            'ID',
-            'IR',
-            'IQ',
-            'IE',
-            'IM',
-            'IL',
-            'IT',
-            'JM',
-            'JP',
-            'JE',
-            'JO',
-            'KZ',
-            'KE',
-            'KI',
-            'KP',
-            'KR',
-            'KW',
-            'KG',
-            'LA',
-            'LV',
-            'LB',
-            'LS',
-            'LR',
-            'LY',
-            'LI',
-            'LT',
-            'LU',
-            'MO',
-            'MG',
-            'MW',
-            'MY',
-            'MV',
-            'ML',
-            'MT',
-            'MH',
-            'MQ',
-            'MR',
-            'MU',
-            'YT',
-            'MX',
-            'FM',
-            'MD',
-            'MC',
-            'MN',
-            'ME',
-            'MS',
-            'MA',
-            'MZ',
-            'MM',
-            'NA',
-            'NR',
-            'NP',
-            'NL',
-            'NC',
-            'NZ',
-            'NI',
-            'NE',
-            'NG',
-            'NU',
-            'NF',
-            'MK',
-            'MP',
-            'NO',
-            'OM',
-            'PK',
-            'PW',
-            'PS',
-            'PA',
-            'PG',
-            'PY',
-            'PE',
-            'PH',
-            'PN',
-            'PL',
-            'PT',
-            'PR',
-            'QA',
-            'RO',
-            'RU',
-            'RW',
-            'RE',
-            'BL',
-            'SH',
-            'KN',
-            'LC',
-            'MF',
-            'PM',
-            'VC',
-            'WS',
-            'SM',
-            'ST',
-            'SA',
-            'SN',
-            'RS',
-            'SC',
-            'SL',
-            'SG',
-            'SX',
-            'SK',
-            'SI',
-            'SB',
-            'SO',
-            'ZA',
-            'GS',
-            'SS',
-            'ES',
-            'LK',
-            'SD',
-            'SR',
-            'SJ',
-            'SE',
-            'CH',
-            'SY',
-            'TW',
-            'TJ',
-            'TZ',
-            'TH',
-            'TL',
-            'TG',
-            'TK',
-            'TO',
-            'TT',
-            'TN',
-            'TR',
-            'TM',
-            'TC',
-            'TV',
-            'UG',
-            'UA',
-            'AE',
-            'GB',
-            'UM',
-            'US',
-            'UY',
-            'UZ',
-            'VU',
-            'VE',
-            'VN',
-            'VG',
-            'VI',
-            'WF',
-            'EH',
-            'YE',
-            'ZM',
-            'ZW',
-            'AX',
-        ];
+        this.availableLocales = [];
         this.availableCurrencyCodes = Object.values(CurrencyCode);
-        this.selectedCurrencyCode = 'USD';
         this.now = new Date().toISOString();
         const browserLanguage = navigator.language.split('-');
         this.browserDefaultLocale = browserLanguage.length === 1 ? undefined : browserLanguage[1];
     }
     ngOnInit() {
         this.updatePreviewLocale();
+        this.dataService.settings
+            .getActiveChannel()
+            .mapStream(data => data.activeChannel.defaultCurrencyCode)
+            .pipe(take$1(1), takeUntil$1(this.destroy$), finalize$1(() => {
+            this.isLoading = false;
+            this.changeDetector.markForCheck();
+        }))
+            .subscribe(x => {
+            this.selectedCurrencyCode = x;
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
     }
     updatePreviewLocale() {
         if (!this.currentLocale || this.currentLocale.length === 0 || this.currentLocale.length === 2) {
@@ -8033,13 +7810,13 @@ class UiLanguageSwitcherDialogComponent {
         }
         return [languageCode, region.toUpperCase()].join('-');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: UiLanguageSwitcherDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", 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=\"flex pl-2 mb-2\">\r\n        <vdr-form-field [label]=\"'common.language' | translate\" class=\"mr-2\">\r\n            <select name=\"options\" [(ngModel)]=\"currentLanguage\" (ngModelChange)=\"updatePreviewLocale()\">\r\n                <option *ngFor=\"let code of availableLanguages | sort\" [value]=\"code\">\r\n                    {{ code | uppercase }} ({{ code | localeLanguageName }})\r\n                </option>\r\n            </select>\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'common.locale' | translate\">\r\n            <ng-select\r\n                appendTo=\"body\"\r\n                [items]=\"availableLocales\"\r\n                [(ngModel)]=\"currentLocale\"\r\n                (ngModelChange)=\"updatePreviewLocale()\"\r\n                [placeholder]=\"'common.browser-default' | translate\"\r\n            >\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                    {{ item }} ({{ item | localeRegionName }})\r\n                </ng-template>\r\n                <ng-template ng-option-tmp let-item=\"item\">\r\n                    {{ item }} ({{ item | localeRegionName }})\r\n                </ng-template>\r\n            </ng-select>\r\n        </vdr-form-field>\r\n    </div>\r\n</div>\r\n<div class=\"card\">\r\n    <div class=\"card-header\">\r\n        <span class=\"pr-1\">{{ 'common.sample-formatting' | translate }}:</span\r\n        ><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 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 type=\"submit\" (click)=\"setLanguage()\" class=\"btn btn-primary\">\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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleCurrencyNamePipe, name: "localeCurrencyName" }, { kind: "pipe", type: SortPipe, name: "sort" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: LocaleCurrencyPipe, name: "localeCurrency" }, { kind: "pipe", type: LocaleLanguageNamePipe, name: "localeLanguageName" }, { kind: "pipe", type: LocaleRegionNamePipe, name: "localeRegionName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: UiLanguageSwitcherDialogComponent, deps: [{ token: DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: UiLanguageSwitcherDialogComponent, selector: "vdr-ui-language-switcher", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'common.select-display-language' | translate }}</ng-template>\r\n\r\n<ng-container *ngIf=\"isLoading\">\r\n    <div class=\"progress loop\"></div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"flex pl-2 mb-2\">\r\n            <vdr-form-field [label]=\"'common.language' | translate\" class=\"mr-2\">\r\n                <select name=\"options\" [(ngModel)]=\"currentLanguage\" (ngModelChange)=\"updatePreviewLocale()\">\r\n                    <option *ngFor=\"let code of availableLanguages | sort\" [value]=\"code\">\r\n                        {{ code | uppercase }} ({{ code | localeLanguageName }})\r\n                    </option>\r\n                </select>\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'common.locale' | translate\">\r\n                <ng-select appendTo=\"body\" [items]=\"availableLocales\" [(ngModel)]=\"currentLocale\"\r\n                    (ngModelChange)=\"updatePreviewLocale()\" [placeholder]=\"'common.browser-default' | translate\">\r\n                    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                        {{ item }} ({{ item | localeRegionName }})\r\n                    </ng-template>\r\n                    <ng-template ng-option-tmp let-item=\"item\">\r\n                        {{ item }} ({{ item | localeRegionName }})\r\n                    </ng-template>\r\n                </ng-select>\r\n            </vdr-form-field>\r\n        </div>\r\n    </div>\r\n    <div class=\"card\">\r\n        <div class=\"card-header\">\r\n            <span class=\"pr-1\">{{ 'common.sample-formatting' | translate }}:</span><strong>{{ previewLocale |\r\n                localeLanguageName : previewLocale }}</strong>\r\n        </div>\r\n        <div class=\"card-block\">\r\n            <div class=\"clr-row\">\r\n                <div class=\"clr-col-sm-4\">\r\n                    <vdr-labeled-data [label]=\"'common.medium-date' | translate\">\r\n                        {{ now | localeDate : 'medium' : previewLocale }}\r\n                    </vdr-labeled-data>\r\n                    <vdr-labeled-data [label]=\"'common.short-date' | translate\">\r\n                        {{ now | localeDate : 'short' : previewLocale }}\r\n                    </vdr-labeled-data>\r\n                </div>\r\n                <div class=\"clr-col-sm-4\">\r\n                    <select name=\"currency\" class=\"currency\" [(ngModel)]=\"selectedCurrencyCode\">\r\n                        <option *ngFor=\"let code of availableCurrencyCodes | sort\" [value]=\"code\">\r\n                            {{ code | uppercase }} ({{ code | localeCurrencyName : 'full' : previewLocale }})\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n                <div class=\"clr-col-sm-4\">\r\n                    <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                        {{ 12345 | localeCurrency : selectedCurrencyCode : previewLocale }}\r\n                    </vdr-labeled-data>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"setLanguage()\" class=\"btn btn-primary\">\r\n        {{ 'common.set-language' | translate }}\r\n    </button>\r\n</ng-template>", styles: ["select.currency{max-width:200px}input.locale{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleCurrencyNamePipe, name: "localeCurrencyName" }, { kind: "pipe", type: SortPipe, name: "sort" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: LocaleCurrencyPipe, name: "localeCurrency" }, { kind: "pipe", type: LocaleLanguageNamePipe, name: "localeLanguageName" }, { kind: "pipe", type: LocaleRegionNamePipe, name: "localeRegionName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", 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=\"flex pl-2 mb-2\">\r\n        <vdr-form-field [label]=\"'common.language' | translate\" class=\"mr-2\">\r\n            <select name=\"options\" [(ngModel)]=\"currentLanguage\" (ngModelChange)=\"updatePreviewLocale()\">\r\n                <option *ngFor=\"let code of availableLanguages | sort\" [value]=\"code\">\r\n                    {{ code | uppercase }} ({{ code | localeLanguageName }})\r\n                </option>\r\n            </select>\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'common.locale' | translate\">\r\n            <ng-select\r\n                appendTo=\"body\"\r\n                [items]=\"availableLocales\"\r\n                [(ngModel)]=\"currentLocale\"\r\n                (ngModelChange)=\"updatePreviewLocale()\"\r\n                [placeholder]=\"'common.browser-default' | translate\"\r\n            >\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                    {{ item }} ({{ item | localeRegionName }})\r\n                </ng-template>\r\n                <ng-template ng-option-tmp let-item=\"item\">\r\n                    {{ item }} ({{ item | localeRegionName }})\r\n                </ng-template>\r\n            </ng-select>\r\n        </vdr-form-field>\r\n    </div>\r\n</div>\r\n<div class=\"card\">\r\n    <div class=\"card-header\">\r\n        <span class=\"pr-1\">{{ 'common.sample-formatting' | translate }}:</span\r\n        ><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 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 type=\"submit\" (click)=\"setLanguage()\" class=\"btn btn-primary\">\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"] }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ selector: 'vdr-ui-language-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'common.select-display-language' | translate }}</ng-template>\r\n\r\n<ng-container *ngIf=\"isLoading\">\r\n    <div class=\"progress loop\"></div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"flex pl-2 mb-2\">\r\n            <vdr-form-field [label]=\"'common.language' | translate\" class=\"mr-2\">\r\n                <select name=\"options\" [(ngModel)]=\"currentLanguage\" (ngModelChange)=\"updatePreviewLocale()\">\r\n                    <option *ngFor=\"let code of availableLanguages | sort\" [value]=\"code\">\r\n                        {{ code | uppercase }} ({{ code | localeLanguageName }})\r\n                    </option>\r\n                </select>\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'common.locale' | translate\">\r\n                <ng-select appendTo=\"body\" [items]=\"availableLocales\" [(ngModel)]=\"currentLocale\"\r\n                    (ngModelChange)=\"updatePreviewLocale()\" [placeholder]=\"'common.browser-default' | translate\">\r\n                    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                        {{ item }} ({{ item | localeRegionName }})\r\n                    </ng-template>\r\n                    <ng-template ng-option-tmp let-item=\"item\">\r\n                        {{ item }} ({{ item | localeRegionName }})\r\n                    </ng-template>\r\n                </ng-select>\r\n            </vdr-form-field>\r\n        </div>\r\n    </div>\r\n    <div class=\"card\">\r\n        <div class=\"card-header\">\r\n            <span class=\"pr-1\">{{ 'common.sample-formatting' | translate }}:</span><strong>{{ previewLocale |\r\n                localeLanguageName : previewLocale }}</strong>\r\n        </div>\r\n        <div class=\"card-block\">\r\n            <div class=\"clr-row\">\r\n                <div class=\"clr-col-sm-4\">\r\n                    <vdr-labeled-data [label]=\"'common.medium-date' | translate\">\r\n                        {{ now | localeDate : 'medium' : previewLocale }}\r\n                    </vdr-labeled-data>\r\n                    <vdr-labeled-data [label]=\"'common.short-date' | translate\">\r\n                        {{ now | localeDate : 'short' : previewLocale }}\r\n                    </vdr-labeled-data>\r\n                </div>\r\n                <div class=\"clr-col-sm-4\">\r\n                    <select name=\"currency\" class=\"currency\" [(ngModel)]=\"selectedCurrencyCode\">\r\n                        <option *ngFor=\"let code of availableCurrencyCodes | sort\" [value]=\"code\">\r\n                            {{ code | uppercase }} ({{ code | localeCurrencyName : 'full' : previewLocale }})\r\n                        </option>\r\n                    </select>\r\n                </div>\r\n                <div class=\"clr-col-sm-4\">\r\n                    <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                        {{ 12345 | localeCurrency : selectedCurrencyCode : previewLocale }}\r\n                    </vdr-labeled-data>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"setLanguage()\" class=\"btn btn-primary\">\r\n        {{ 'common.set-language' | translate }}\r\n    </button>\r\n</ng-template>", styles: ["select.currency{max-width:200px}input.locale{text-transform:uppercase}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataService }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
  * This service handles logic relating to authentication of the current user.
@@ -9449,6 +9226,7 @@ class AppShellComponent {
         this.localizationService = localizationService;
         this.version = ADMIN_UI_VERSION;
         this.availableLanguages = [];
+        this.availableLocales = [];
         this.hideVendureBranding = getAppConfig().hideVendureBranding;
         this.devMode = isDevMode();
     }
@@ -9459,6 +9237,7 @@ class AppShellComponent {
             .userStatus()
             .single$.pipe(map(data => data.userStatus.username));
         this.availableLanguages = this.i18nService.availableLanguages;
+        this.availableLocales = this.i18nService.availableLocales;
         this.pageTitle$ = this.breadcrumbService.breadcrumbs$.pipe(map(breadcrumbs => breadcrumbs[breadcrumbs.length - 1].label));
         this.mainNavExpanded$ = this.dataService.client
             .uiState()
@@ -9466,15 +9245,18 @@ class AppShellComponent {
     }
     selectUiLanguage() {
         this.uiLanguageAndLocale$
-            .pipe(take(1), switchMap(([currentLanguage, currentLocale]) => this.modalService.fromComponent(UiLanguageSwitcherDialogComponent, {
-            closable: true,
-            size: 'lg',
-            locals: {
-                availableLanguages: this.availableLanguages,
-                currentLanguage,
-                currentLocale,
-            },
-        })), switchMap(result => result ? this.dataService.client.setUiLanguage(result[0], result[1]) : EMPTY))
+            .pipe(take(1), switchMap(([currentLanguage, currentLocale]) => {
+            return this.modalService.fromComponent(UiLanguageSwitcherDialogComponent, {
+                closable: true,
+                size: 'lg',
+                locals: {
+                    availableLocales: this.availableLocales,
+                    availableLanguages: this.availableLanguages,
+                    currentLanguage: currentLanguage,
+                    currentLocale: currentLocale,
+                },
+            });
+        }), switchMap(result => result ? this.dataService.client.setUiLanguage(result[0], result[1]) : EMPTY))
             .subscribe(result => {
             if (result.setUiLanguage) {
                 this.i18nService.setLanguage(result.setUiLanguage);
@@ -14128,11 +13910,11 @@ class AssetPreviewComponent {
         this.disablePreviousButton = this.assets?.[this.previewAssetIndex - 1]?.id ? false : true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssetPreviewComponent, deps: [{ token: i1$4.FormBuilder }, { token: DataService }, { token: NotificationService }, { token: i0.ChangeDetectorRef }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: { asset: "asset", assets: "assets", editable: "editable", customFields: "customFields", customFieldsForm: "customFieldsForm" }, outputs: { assetChange: "assetChange", editClick: "editClick" }, viewQueries: [{ propertyName: "imageElementRef", first: true, predicate: ["imageElement"], descendants: true, static: true }, { propertyName: "previewDivRef", first: true, predicate: ["previewDiv"], descendants: true, static: true }], ngImport: i0, template: "<vdr-page-detail-layout>\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <div *ngIf=\"!editable\" class=\"mb-2\">\r\n                <a\r\n                    class=\"button-ghost\"\r\n                    [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n                    (click)=\"editClick.emit()\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                    {{ 'common.edit' | translate }}\r\n                    <clr-icon shape=\"arrow right\"></clr-icon>\r\n                </a>\r\n            </div>\r\n            <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n                <input\r\n                    type=\"text\"\r\n                    [formControl]=\"form.get('name')\"\r\n                    [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n                <span class=\"elide\">\r\n                    {{ asset.name }}\r\n                </span>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n                <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                    getSourceFileName()\r\n                }}</a>\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n                {{ asset.fileSize | filesize }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n                {{ asset.width }} x {{ asset.height }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n                <span *ngIf=\"fpx\"\r\n                    ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n                    {{ fpy | number : '1.2-2' }}</span\r\n                >\r\n                <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n                <div class=\"flex mt-1\">\r\n                    <button\r\n                        class=\"button-small mr-1\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        (click)=\"setFocalPointStart()\"\r\n                    >\r\n                        <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                        <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n                    </button>\r\n                    <button\r\n                        class=\"button-small\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        *ngIf=\"!!fpx\"\r\n                        (click)=\"removeFocalPoint()\"\r\n                    >\r\n                        {{ 'asset.unset-focal-point' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n                <ng-container *ngIf=\"editable\">\r\n                    <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n                    <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n                        <clr-icon shape=\"tags\"></clr-icon>\r\n                        {{ 'common.manage-tags' | translate }}\r\n                    </button>\r\n                </ng-container>\r\n                <div *ngIf=\"!editable\">\r\n                    <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                        <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                        {{ tag.value }}</vdr-chip\r\n                    >\r\n                </div>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Asset\"\r\n                [compact]=\"true\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"customFieldsForm\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'asset.preview' | translate\">\r\n            <vdr-form-field>\r\n                <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                    <option value=\"tiny\">tiny</option>\r\n                    <option value=\"thumb\">thumb</option>\r\n                    <option value=\"small\">small</option>\r\n                    <option value=\"medium\">medium</option>\r\n                    <option value=\"large\">large</option>\r\n                    <option value=\"\">full size</option>\r\n                </select>\r\n            </vdr-form-field>\r\n            <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n            <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <div class=\"carousel-container\">\r\n    <button *ngIf=\"showSlideButtons\" (click)=\"previousImage()\" [class.disabled]=\"disablePreviousButton\"><clr-icon shape=\"caret left\" class=\"color-weight-800\"></clr-icon\r\n        ></button>\r\n    <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n        <div class=\"image-wrapper\">\r\n            <vdr-focal-point-control\r\n                [width]=\"width\"\r\n                [height]=\"height\"\r\n                [fpx]=\"fpx\"\r\n                [fpy]=\"fpy\"\r\n                [editable]=\"settingFocalPoint\"\r\n                (focalPointChange)=\"onFocalPointChange($event)\"\r\n            >\r\n                <img\r\n                    class=\"asset-image\"\r\n                    [src]=\"asset | assetPreview : size\"\r\n                    [ngClass]=\"size\"\r\n                    #imageElement\r\n                    (load)=\"onImageLoad()\"\r\n                />\r\n            </vdr-focal-point-control>\r\n            <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n                <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                    <clr-icon shape=\"times\"></clr-icon>\r\n                </button>\r\n                <button\r\n                    class=\"btn btn-primary btn-sm\"\r\n                    (click)=\"setFocalPointEnd()\"\r\n                    [disabled]=\"!lastFocalPoint\"\r\n                >\r\n                    <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                    {{ 'asset.set-focal-point' | translate }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <button  *ngIf=\"showSlideButtons\" (click)=\"nextImage()\" [class.disabled]=\"disableNextButton\"><clr-icon shape=\"caret right\" class=\"color-weight-800\"></clr-icon\r\n        ></button>\r\n    </div>\r\n</vdr-page-detail-layout>\r\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:750px;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);margin-top:var(--space-unit);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-inline-start:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-inline-end:12px}.carousel-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.carousel-container button{cursor:pointer;width:30px;height:30px;border:none;border-radius:50%;text-align:center;background-color:var(--color-grey-300)}.carousel-container button:hover{background-color:var(--color-grey-400)}.carousel-container .disabled{pointer-events:none;opacity:.4}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: ["visible", "editable", "width", "height", "fpx", "fpy"], outputs: ["focalPointChange"] }, { kind: "component", type: TagSelectorComponent, selector: "vdr-tag-selector", inputs: ["placeholder"] }, { kind: "component", type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "component", type: PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }, { kind: "pipe", type: HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: { asset: "asset", assets: "assets", editable: "editable", customFields: "customFields", customFieldsForm: "customFieldsForm" }, outputs: { assetChange: "assetChange", editClick: "editClick" }, viewQueries: [{ propertyName: "imageElementRef", first: true, predicate: ["imageElement"], descendants: true, static: true }, { propertyName: "previewDivRef", first: true, predicate: ["previewDiv"], descendants: true, static: true }], ngImport: i0, template: "<vdr-page-detail-layout>\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <div *ngIf=\"!editable\" class=\"mb-2\">\r\n                <a\r\n                    class=\"button-ghost\"\r\n                    [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n                    (click)=\"editClick.emit()\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                    {{ 'common.edit' | translate }}\r\n                    <clr-icon shape=\"arrow right\"></clr-icon>\r\n                </a>\r\n            </div>\r\n            <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n                <input\r\n                    type=\"text\"\r\n                    [formControl]=\"form.get('name')\"\r\n                    [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n                <span class=\"elide\">\r\n                    {{ asset.name }}\r\n                </span>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n                <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                    getSourceFileName()\r\n                }}</a>\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n                {{ asset.fileSize | filesize }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n                {{ asset.width }} x {{ asset.height }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n                <span *ngIf=\"fpx\"\r\n                    ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n                    {{ fpy | number : '1.2-2' }}</span\r\n                >\r\n                <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n                <div class=\"flex mt-1\">\r\n                    <button\r\n                        class=\"button-small mr-1\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        (click)=\"setFocalPointStart()\"\r\n                    >\r\n                        <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                        <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n                    </button>\r\n                    <button\r\n                        class=\"button-small\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        *ngIf=\"!!fpx\"\r\n                        (click)=\"removeFocalPoint()\"\r\n                    >\r\n                        {{ 'asset.unset-focal-point' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n                <ng-container *ngIf=\"editable\">\r\n                    <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n                    <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n                        <clr-icon shape=\"tags\"></clr-icon>\r\n                        {{ 'common.manage-tags' | translate }}\r\n                    </button>\r\n                </ng-container>\r\n                <div *ngIf=\"!editable\">\r\n                    <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                        <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                        {{ tag.value }}</vdr-chip\r\n                    >\r\n                </div>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Asset\"\r\n                [compact]=\"true\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"customFieldsForm\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'asset.preview' | translate\">\r\n            <vdr-form-field>\r\n                <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                    <option value=\"tiny\">tiny</option>\r\n                    <option value=\"thumb\">thumb</option>\r\n                    <option value=\"small\">small</option>\r\n                    <option value=\"medium\">medium</option>\r\n                    <option value=\"large\">large</option>\r\n                    <option value=\"\">full size</option>\r\n                </select>\r\n            </vdr-form-field>\r\n            <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n            <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <div class=\"carousel-container\">\r\n        <button *ngIf=\"showSlideButtons\" (click)=\"previousImage()\" class=\"carousel-button\" [class.disabled]=\"disablePreviousButton\">\r\n            <clr-icon shape=\"caret left\" class=\"color-weight-800\"></clr-icon>\r\n        </button>\r\n        <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n            <div class=\"image-wrapper\">\r\n                <vdr-focal-point-control\r\n                    [width]=\"width\"\r\n                    [height]=\"height\"\r\n                    [fpx]=\"fpx\"\r\n                    [fpy]=\"fpy\"\r\n                    [editable]=\"settingFocalPoint\"\r\n                    (focalPointChange)=\"onFocalPointChange($event)\"\r\n                >\r\n                    <img\r\n                        class=\"asset-image\"\r\n                        [src]=\"asset | assetPreview : size\"\r\n                        [ngClass]=\"size\"\r\n                        #imageElement\r\n                        (load)=\"onImageLoad()\"\r\n                    />\r\n                </vdr-focal-point-control>\r\n                <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n                    <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                        <clr-icon shape=\"times\"></clr-icon>\r\n                    </button>\r\n                    <button\r\n                        class=\"btn btn-primary btn-sm\"\r\n                        (click)=\"setFocalPointEnd()\"\r\n                        [disabled]=\"!lastFocalPoint\"\r\n                    >\r\n                        <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                        {{ 'asset.set-focal-point' | translate }}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <button *ngIf=\"showSlideButtons\" (click)=\"nextImage()\" class=\"carousel-button\" [class.disabled]=\"disableNextButton\">\r\n            <clr-icon shape=\"caret right\" class=\"color-weight-800\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</vdr-page-detail-layout>\r\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:750px;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);margin-top:var(--space-unit);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-inline-start:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-inline-end:12px}.carousel-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.carousel-container button.carousel-button{cursor:pointer;width:30px;height:30px;border:none;border-radius:50%;text-align:center;background-color:var(--color-grey-300)}.carousel-container button.carousel-button:hover{background-color:var(--color-grey-400)}.carousel-container .disabled{pointer-events:none;opacity:.4}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: ["visible", "editable", "width", "height", "fpx", "fpy"], outputs: ["focalPointChange"] }, { kind: "component", type: TagSelectorComponent, selector: "vdr-tag-selector", inputs: ["placeholder"] }, { kind: "component", type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "component", type: PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }, { kind: "pipe", type: HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssetPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-asset-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-detail-layout>\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <div *ngIf=\"!editable\" class=\"mb-2\">\r\n                <a\r\n                    class=\"button-ghost\"\r\n                    [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n                    (click)=\"editClick.emit()\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                    {{ 'common.edit' | translate }}\r\n                    <clr-icon shape=\"arrow right\"></clr-icon>\r\n                </a>\r\n            </div>\r\n            <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n                <input\r\n                    type=\"text\"\r\n                    [formControl]=\"form.get('name')\"\r\n                    [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n                <span class=\"elide\">\r\n                    {{ asset.name }}\r\n                </span>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n                <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                    getSourceFileName()\r\n                }}</a>\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n                {{ asset.fileSize | filesize }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n                {{ asset.width }} x {{ asset.height }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n                <span *ngIf=\"fpx\"\r\n                    ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n                    {{ fpy | number : '1.2-2' }}</span\r\n                >\r\n                <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n                <div class=\"flex mt-1\">\r\n                    <button\r\n                        class=\"button-small mr-1\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        (click)=\"setFocalPointStart()\"\r\n                    >\r\n                        <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                        <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n                    </button>\r\n                    <button\r\n                        class=\"button-small\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        *ngIf=\"!!fpx\"\r\n                        (click)=\"removeFocalPoint()\"\r\n                    >\r\n                        {{ 'asset.unset-focal-point' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n                <ng-container *ngIf=\"editable\">\r\n                    <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n                    <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n                        <clr-icon shape=\"tags\"></clr-icon>\r\n                        {{ 'common.manage-tags' | translate }}\r\n                    </button>\r\n                </ng-container>\r\n                <div *ngIf=\"!editable\">\r\n                    <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                        <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                        {{ tag.value }}</vdr-chip\r\n                    >\r\n                </div>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Asset\"\r\n                [compact]=\"true\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"customFieldsForm\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'asset.preview' | translate\">\r\n            <vdr-form-field>\r\n                <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                    <option value=\"tiny\">tiny</option>\r\n                    <option value=\"thumb\">thumb</option>\r\n                    <option value=\"small\">small</option>\r\n                    <option value=\"medium\">medium</option>\r\n                    <option value=\"large\">large</option>\r\n                    <option value=\"\">full size</option>\r\n                </select>\r\n            </vdr-form-field>\r\n            <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n            <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <div class=\"carousel-container\">\r\n    <button *ngIf=\"showSlideButtons\" (click)=\"previousImage()\" [class.disabled]=\"disablePreviousButton\"><clr-icon shape=\"caret left\" class=\"color-weight-800\"></clr-icon\r\n        ></button>\r\n    <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n        <div class=\"image-wrapper\">\r\n            <vdr-focal-point-control\r\n                [width]=\"width\"\r\n                [height]=\"height\"\r\n                [fpx]=\"fpx\"\r\n                [fpy]=\"fpy\"\r\n                [editable]=\"settingFocalPoint\"\r\n                (focalPointChange)=\"onFocalPointChange($event)\"\r\n            >\r\n                <img\r\n                    class=\"asset-image\"\r\n                    [src]=\"asset | assetPreview : size\"\r\n                    [ngClass]=\"size\"\r\n                    #imageElement\r\n                    (load)=\"onImageLoad()\"\r\n                />\r\n            </vdr-focal-point-control>\r\n            <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n                <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                    <clr-icon shape=\"times\"></clr-icon>\r\n                </button>\r\n                <button\r\n                    class=\"btn btn-primary btn-sm\"\r\n                    (click)=\"setFocalPointEnd()\"\r\n                    [disabled]=\"!lastFocalPoint\"\r\n                >\r\n                    <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                    {{ 'asset.set-focal-point' | translate }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <button  *ngIf=\"showSlideButtons\" (click)=\"nextImage()\" [class.disabled]=\"disableNextButton\"><clr-icon shape=\"caret right\" class=\"color-weight-800\"></clr-icon\r\n        ></button>\r\n    </div>\r\n</vdr-page-detail-layout>\r\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:750px;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);margin-top:var(--space-unit);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-inline-start:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-inline-end:12px}.carousel-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.carousel-container button{cursor:pointer;width:30px;height:30px;border:none;border-radius:50%;text-align:center;background-color:var(--color-grey-300)}.carousel-container button:hover{background-color:var(--color-grey-400)}.carousel-container .disabled{pointer-events:none;opacity:.4}\n"] }]
+            args: [{ selector: 'vdr-asset-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-detail-layout>\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <div *ngIf=\"!editable\" class=\"mb-2\">\r\n                <a\r\n                    class=\"button-ghost\"\r\n                    [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n                    (click)=\"editClick.emit()\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                    {{ 'common.edit' | translate }}\r\n                    <clr-icon shape=\"arrow right\"></clr-icon>\r\n                </a>\r\n            </div>\r\n            <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n                <input\r\n                    type=\"text\"\r\n                    [formControl]=\"form.get('name')\"\r\n                    [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n                <span class=\"elide\">\r\n                    {{ asset.name }}\r\n                </span>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n                <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                    getSourceFileName()\r\n                }}</a>\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n                {{ asset.fileSize | filesize }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n                {{ asset.width }} x {{ asset.height }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n                <span *ngIf=\"fpx\"\r\n                    ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n                    {{ fpy | number : '1.2-2' }}</span\r\n                >\r\n                <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n                <div class=\"flex mt-1\">\r\n                    <button\r\n                        class=\"button-small mr-1\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        (click)=\"setFocalPointStart()\"\r\n                    >\r\n                        <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                        <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n                    </button>\r\n                    <button\r\n                        class=\"button-small\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        *ngIf=\"!!fpx\"\r\n                        (click)=\"removeFocalPoint()\"\r\n                    >\r\n                        {{ 'asset.unset-focal-point' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n                <ng-container *ngIf=\"editable\">\r\n                    <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n                    <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n                        <clr-icon shape=\"tags\"></clr-icon>\r\n                        {{ 'common.manage-tags' | translate }}\r\n                    </button>\r\n                </ng-container>\r\n                <div *ngIf=\"!editable\">\r\n                    <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                        <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                        {{ tag.value }}</vdr-chip\r\n                    >\r\n                </div>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Asset\"\r\n                [compact]=\"true\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"customFieldsForm\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'asset.preview' | translate\">\r\n            <vdr-form-field>\r\n                <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                    <option value=\"tiny\">tiny</option>\r\n                    <option value=\"thumb\">thumb</option>\r\n                    <option value=\"small\">small</option>\r\n                    <option value=\"medium\">medium</option>\r\n                    <option value=\"large\">large</option>\r\n                    <option value=\"\">full size</option>\r\n                </select>\r\n            </vdr-form-field>\r\n            <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n            <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <div class=\"carousel-container\">\r\n        <button *ngIf=\"showSlideButtons\" (click)=\"previousImage()\" class=\"carousel-button\" [class.disabled]=\"disablePreviousButton\">\r\n            <clr-icon shape=\"caret left\" class=\"color-weight-800\"></clr-icon>\r\n        </button>\r\n        <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n            <div class=\"image-wrapper\">\r\n                <vdr-focal-point-control\r\n                    [width]=\"width\"\r\n                    [height]=\"height\"\r\n                    [fpx]=\"fpx\"\r\n                    [fpy]=\"fpy\"\r\n                    [editable]=\"settingFocalPoint\"\r\n                    (focalPointChange)=\"onFocalPointChange($event)\"\r\n                >\r\n                    <img\r\n                        class=\"asset-image\"\r\n                        [src]=\"asset | assetPreview : size\"\r\n                        [ngClass]=\"size\"\r\n                        #imageElement\r\n                        (load)=\"onImageLoad()\"\r\n                    />\r\n                </vdr-focal-point-control>\r\n                <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n                    <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                        <clr-icon shape=\"times\"></clr-icon>\r\n                    </button>\r\n                    <button\r\n                        class=\"btn btn-primary btn-sm\"\r\n                        (click)=\"setFocalPointEnd()\"\r\n                        [disabled]=\"!lastFocalPoint\"\r\n                    >\r\n                        <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                        {{ 'asset.set-focal-point' | translate }}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <button *ngIf=\"showSlideButtons\" (click)=\"nextImage()\" class=\"carousel-button\" [class.disabled]=\"disableNextButton\">\r\n            <clr-icon shape=\"caret right\" class=\"color-weight-800\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</vdr-page-detail-layout>\r\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:750px;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);margin-top:var(--space-unit);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-inline-start:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-inline-end:12px}.carousel-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.carousel-container button.carousel-button{cursor:pointer;width:30px;height:30px;border:none;border-radius:50%;text-align:center;background-color:var(--color-grey-300)}.carousel-container button.carousel-button:hover{background-color:var(--color-grey-400)}.carousel-container .disabled{pointer-events:none;opacity:.4}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$4.FormBuilder }, { type: DataService }, { type: NotificationService }, { type: i0.ChangeDetectorRef }, { type: ModalService }]; }, propDecorators: { asset: [{
                 type: Input
             }], assets: [{
@@ -20028,24 +19810,32 @@ class CoreModule {
         this.alertsService = alertsService;
         this.dataService = dataService;
         this.notificationService = notificationService;
-        this.initUiLanguages();
+        this.initUiLanguagesAndLocales();
         this.initUiTitle();
         this.initAlerts();
     }
-    initUiLanguages() {
+    initUiLanguagesAndLocales() {
         const defaultLanguage = getDefaultUiLanguage();
+        const defaultLocale = getDefaultUiLocale();
         const lastLanguage = this.localStorageService.get('uiLanguageCode');
         const availableLanguages = getAppConfig().availableLanguages;
-        if (!availableLanguages.includes(defaultLanguage)) {
+        const availableLocales = getAppConfig().availableLocales;
+        if (!!defaultLanguage && !availableLanguages.includes(defaultLanguage)) {
             throw new Error(`The defaultLanguage "${defaultLanguage}" must be one of the availableLanguages [${availableLanguages
                 .map(l => `"${l}"`)
                 .join(', ')}]`);
         }
+        if (!!defaultLocale && !availableLocales.includes(defaultLocale)) {
+            throw new Error(`The defaultLocale "${defaultLocale}" must be one of the availableLocales [${availableLocales
+                .map(l => `"${l}"`)
+                .join(', ')}]`);
+        }
         const uiLanguage = lastLanguage && availableLanguages.includes(lastLanguage) ? lastLanguage : defaultLanguage;
         this.localStorageService.set('uiLanguageCode', uiLanguage);
         this.i18nService.setLanguage(uiLanguage);
         this.i18nService.setDefaultLanguage(defaultLanguage);
         this.i18nService.setAvailableLanguages(availableLanguages || [defaultLanguage]);
+        this.i18nService.setAvailableLocales(availableLocales || [defaultLocale]);
     }
     initUiTitle() {
         const title = getAppConfig().brand || 'Vendure';