@vendure/admin-ui 1.3.2 → 1.4.0

package/fesm2015/vendure-admin-ui-settings.js

@@ -86,9 +86,6 @@ class AdminDetailComponent extends BaseDetailComponent {
     ngOnDestroy() {
         this.destroy();
     }
-    customFieldIsSet(name) {
-        return !!this.detailForm.get(['customFields', name]);
-    }
     rolesChanged(roles) {
         this.buildPermissionsMap();
     }
@@ -170,15 +167,7 @@ class AdminDetailComponent extends BaseDetailComponent {
             roles: administrator.user.roles,
         });
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get('customFields');
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value = administrator.customFields[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['customFields']), administrator);
         }
         const passwordControl = this.detailForm.get('password');
         if (passwordControl) {
@@ -228,7 +217,7 @@ class AdminDetailComponent extends BaseDetailComponent {
 AdminDetailComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-admin-detail',
-                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"administrator-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                *vdrIfPermissions=\"'UpdateAdministrator'\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-form-field [label]=\"'settings.email-address' | translate\" for=\"emailAddress\">\r\n        <input\r\n            id=\"emailAddress\"\r\n            type=\"text\"\r\n            formControlName=\"emailAddress\"\r\n            [readonly]=\"!('UpdateAdministrator' | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.first-name' | translate\" for=\"firstName\">\r\n        <input\r\n            id=\"firstName\"\r\n            type=\"text\"\r\n            formControlName=\"firstName\"\r\n            [readonly]=\"!('UpdateAdministrator' | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.last-name' | translate\" for=\"lastName\">\r\n        <input\r\n            id=\"lastName\"\r\n            type=\"text\"\r\n            formControlName=\"lastName\"\r\n            [readonly]=\"!('UpdateAdministrator' | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field *ngIf=\"isNew$ | async\" [label]=\"'settings.password' | translate\" for=\"password\">\r\n        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        *ngIf=\"!(isNew$ | async) && ('UpdateAdministrator' | hasPermission)\"\r\n        [label]=\"'settings.password' | translate\"\r\n        for=\"password\"\r\n        [readOnlyToggle]=\"true\"\r\n    >\r\n        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n    </vdr-form-field>\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <ng-container *ngFor=\"let customField of customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                entityName=\"Administrator\"\r\n                [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                [customField]=\"customField\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </section>\r\n    <label class=\"clr-control-label\">{{ 'settings.roles' | translate }}</label>\r\n    <ng-select\r\n        [items]=\"allRoles$ | async\"\r\n        [multiple]=\"true\"\r\n        [hideSelected]=\"true\"\r\n        formControlName=\"roles\"\r\n        (change)=\"rolesChanged($event)\"\r\n        bindLabel=\"description\"\r\n    ></ng-select>\r\n\r\n    <ul class=\"nav\" role=\"tablist\">\r\n        <li role=\"presentation\" class=\"nav-item\" *ngFor=\"let channel of getAvailableChannels()\">\r\n            <button\r\n                [id]=\"channel.channelId\"\r\n                (click)=\"selectedChannelId = channel.channelId\"\r\n                class=\"btn btn-link nav-link\"\r\n                [class.active]=\"selectedChannelId === channel.channelId\"\r\n                [attr.aria-selected]=\"selectedChannelId === channel.channelId\"\r\n                type=\"button\"\r\n            >\r\n                {{ channel.channelCode | channelCodeToLabel | translate }}\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <vdr-permission-grid\r\n        [activePermissions]=\"getPermissionsForSelectedChannel()\"\r\n        [permissionDefinitions]=\"permissionDefinitions\"\r\n        [readonly]=\"true\"\r\n    ></vdr-permission-grid>\r\n</form>\r\n",
+                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"administrator-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                *vdrIfPermissions=\"'UpdateAdministrator'\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-form-field [label]=\"'settings.email-address' | translate\" for=\"emailAddress\">\r\n        <input\r\n            id=\"emailAddress\"\r\n            type=\"text\"\r\n            formControlName=\"emailAddress\"\r\n            [readonly]=\"!('UpdateAdministrator' | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.first-name' | translate\" for=\"firstName\">\r\n        <input\r\n            id=\"firstName\"\r\n            type=\"text\"\r\n            formControlName=\"firstName\"\r\n            [readonly]=\"!('UpdateAdministrator' | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.last-name' | translate\" for=\"lastName\">\r\n        <input\r\n            id=\"lastName\"\r\n            type=\"text\"\r\n            formControlName=\"lastName\"\r\n            [readonly]=\"!('UpdateAdministrator' | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field *ngIf=\"isNew$ | async\" [label]=\"'settings.password' | translate\" for=\"password\">\r\n        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        *ngIf=\"!(isNew$ | async) && ('UpdateAdministrator' | hasPermission)\"\r\n        [label]=\"'settings.password' | translate\"\r\n        for=\"password\"\r\n        [readOnlyToggle]=\"true\"\r\n    >\r\n        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n    </vdr-form-field>\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Administrator\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n            [readonly]=\"!('UpdateAdministrator' | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n    <vdr-custom-detail-component-host\r\n        locationId=\"administrator-detail\"\r\n        [entity$]=\"entity$\"\r\n        [detailForm]=\"detailForm\"\r\n    ></vdr-custom-detail-component-host>\r\n    <label class=\"clr-control-label\">{{ 'settings.roles' | translate }}</label>\r\n    <ng-select\r\n        [items]=\"allRoles$ | async\"\r\n        [multiple]=\"true\"\r\n        [hideSelected]=\"true\"\r\n        formControlName=\"roles\"\r\n        (change)=\"rolesChanged($event)\"\r\n        bindLabel=\"description\"\r\n    ></ng-select>\r\n\r\n    <ul class=\"nav\" role=\"tablist\">\r\n        <li role=\"presentation\" class=\"nav-item\" *ngFor=\"let channel of getAvailableChannels()\">\r\n            <button\r\n                [id]=\"channel.channelId\"\r\n                (click)=\"selectedChannelId = channel.channelId\"\r\n                class=\"btn btn-link nav-link\"\r\n                [class.active]=\"selectedChannelId === channel.channelId\"\r\n                [attr.aria-selected]=\"selectedChannelId === channel.channelId\"\r\n                type=\"button\"\r\n            >\r\n                {{ channel.channelCode | channelCodeToLabel | translate }}\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <vdr-permission-grid\r\n        [activePermissions]=\"getPermissionsForSelectedChannel()\"\r\n        [permissionDefinitions]=\"permissionDefinitions\"\r\n        [readonly]=\"true\"\r\n    ></vdr-permission-grid>\r\n</form>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
@@ -319,9 +308,6 @@ class ChannelDetailComponent extends BaseDetailComponent {
     ngOnDestroy() {
         this.destroy();
     }
-    customFieldIsSet(name) {
-        return !!this.detailForm.get(['customFields', name]);
-    }
     saveButtonEnabled() {
         return this.detailForm.dirty && this.detailForm.valid;
     }
@@ -412,15 +398,7 @@ class ChannelDetailComponent extends BaseDetailComponent {
             defaultTaxZoneId: entity.defaultTaxZone ? entity.defaultTaxZone.id : '',
         });
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get('customFields');
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value = entity.customFields[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['customFields']), entity);
         }
         if (entity.code === DEFAULT_CHANNEL_CODE) {
             const codeControl = this.detailForm.get('code');
@@ -437,7 +415,7 @@ class ChannelDetailComponent extends BaseDetailComponent {
 ChannelDetailComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-channel-detail',
-                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"channel-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"!saveButtonEnabled()\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                *vdrIfPermissions=\"['SuperAdmin', 'UpdateChannel']\"\r\n                [disabled]=\"!saveButtonEnabled()\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n        <input id=\"code\" type=\"text\" [readonly]=\"!(updatePermission | hasPermission)\" formControlName=\"code\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.channel-token' | translate\" for=\"token\">\r\n        <input id=\"token\" type=\"text\" [readonly]=\"!(updatePermission | hasPermission)\" formControlName=\"token\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.currency' | translate\" for=\"defaultTaxZoneId\">\r\n        <select\r\n            clrSelect\r\n            name=\"currencyCode\"\r\n            formControlName=\"currencyCode\"\r\n            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n        >\r\n            <option *ngFor=\"let code of currencyCodes\" [value]=\"code\">{{ code | localeCurrencyName }}</option>\r\n        </select>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'common.default-language' | translate\" for=\"defaultLanguage\">\r\n        <select\r\n            clrSelect\r\n            name=\"defaultLanguageCode\"\r\n            formControlName=\"defaultLanguageCode\"\r\n            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n        >\r\n            <option *ngFor=\"let languageCode of availableLanguageCodes$ | async\" [value]=\"languageCode\">\r\n                {{ languageCode | localeLanguageName }} ({{ languageCode | uppercase }})\r\n            </option>\r\n        </select>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.prices-include-tax' | translate\" for=\"pricesIncludeTax\">\r\n        <clr-toggle-wrapper>\r\n            <input\r\n                type=\"checkbox\"\r\n                clrToggle\r\n                id=\"pricesIncludeTax\"\r\n                formControlName=\"pricesIncludeTax\"\r\n                [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n            />\r\n        </clr-toggle-wrapper>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.default-tax-zone' | translate\" for=\"defaultTaxZoneId\">\r\n        <select\r\n            clrSelect\r\n            name=\"defaultTaxZoneId\"\r\n            formControlName=\"defaultTaxZoneId\"\r\n            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n        >\r\n            <option selected value style=\"display: none\"></option>\r\n            <option *ngFor=\"let zone of zones$ | async\" [value]=\"zone.id\">{{ zone.name }}</option>\r\n        </select>\r\n    </vdr-form-field>\r\n    <clr-alert\r\n        *ngIf=\"detailForm.value.code && !detailForm.value.defaultTaxZoneId\"\r\n        clrAlertType=\"danger\"\r\n        [clrAlertClosable]=\"false\"\r\n    >\r\n        <clr-alert-item>\r\n            <span class=\"alert-text\">\r\n                {{ 'error.no-default-tax-zone-set' | translate }}\r\n            </span>\r\n        </clr-alert-item>\r\n    </clr-alert>\r\n\r\n    <vdr-form-field [label]=\"'settings.default-shipping-zone' | translate\" for=\"defaultShippingZoneId\">\r\n        <select\r\n            clrSelect\r\n            name=\"defaultShippingZoneId\"\r\n            formControlName=\"defaultShippingZoneId\"\r\n            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n        >\r\n            <option selected value style=\"display: none\"></option>            \r\n            <option *ngFor=\"let zone of zones$ | async\" [value]=\"zone.id\">{{ zone.name }}</option>\r\n        </select>\r\n    </vdr-form-field>\r\n    <clr-alert\r\n        *ngIf=\"detailForm.value.code && !detailForm.value.defaultShippingZoneId\"\r\n        clrAlertType=\"warning\"\r\n        [clrAlertClosable]=\"false\"\r\n    >\r\n        <clr-alert-item>\r\n            <span class=\"alert-text\">\r\n                {{ 'error.no-default-shipping-zone-set' | translate }}\r\n            </span>\r\n        </clr-alert-item>\r\n    </clr-alert>\r\n\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <ng-container *ngFor=\"let customField of customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                entityName=\"Channel\"\r\n                [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                [customField]=\"customField\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </section>\r\n</form>\r\n",
+                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"channel-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"!saveButtonEnabled()\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                *vdrIfPermissions=\"['SuperAdmin', 'UpdateChannel']\"\r\n                [disabled]=\"!saveButtonEnabled()\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n        <input\r\n            id=\"code\"\r\n            type=\"text\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n            formControlName=\"code\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.channel-token' | translate\" for=\"token\">\r\n        <input\r\n            id=\"token\"\r\n            type=\"text\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n            formControlName=\"token\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.currency' | translate\" for=\"defaultTaxZoneId\">\r\n        <select\r\n            clrSelect\r\n            name=\"currencyCode\"\r\n            formControlName=\"currencyCode\"\r\n            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n        >\r\n            <option *ngFor=\"let code of currencyCodes\" [value]=\"code\">{{ code | localeCurrencyName }}</option>\r\n        </select>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'common.default-language' | translate\" for=\"defaultLanguage\">\r\n        <select\r\n            clrSelect\r\n            name=\"defaultLanguageCode\"\r\n            formControlName=\"defaultLanguageCode\"\r\n            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n        >\r\n            <option *ngFor=\"let languageCode of availableLanguageCodes$ | async\" [value]=\"languageCode\">\r\n                {{ languageCode | localeLanguageName }} ({{ languageCode | uppercase }})\r\n            </option>\r\n        </select>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.prices-include-tax' | translate\" for=\"pricesIncludeTax\">\r\n        <clr-toggle-wrapper>\r\n            <input\r\n                type=\"checkbox\"\r\n                clrToggle\r\n                id=\"pricesIncludeTax\"\r\n                formControlName=\"pricesIncludeTax\"\r\n                [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n            />\r\n        </clr-toggle-wrapper>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.default-tax-zone' | translate\" for=\"defaultTaxZoneId\">\r\n        <select\r\n            clrSelect\r\n            name=\"defaultTaxZoneId\"\r\n            formControlName=\"defaultTaxZoneId\"\r\n            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n        >\r\n            <option selected value style=\"display: none\"></option>\r\n            <option *ngFor=\"let zone of zones$ | async\" [value]=\"zone.id\">{{ zone.name }}</option>\r\n        </select>\r\n    </vdr-form-field>\r\n    <clr-alert\r\n        *ngIf=\"detailForm.value.code && !detailForm.value.defaultTaxZoneId\"\r\n        clrAlertType=\"danger\"\r\n        [clrAlertClosable]=\"false\"\r\n    >\r\n        <clr-alert-item>\r\n            <span class=\"alert-text\">\r\n                {{ 'error.no-default-tax-zone-set' | translate }}\r\n            </span>\r\n        </clr-alert-item>\r\n    </clr-alert>\r\n\r\n    <vdr-form-field [label]=\"'settings.default-shipping-zone' | translate\" for=\"defaultShippingZoneId\">\r\n        <select\r\n            clrSelect\r\n            name=\"defaultShippingZoneId\"\r\n            formControlName=\"defaultShippingZoneId\"\r\n            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n        >\r\n            <option selected value style=\"display: none\"></option>\r\n            <option *ngFor=\"let zone of zones$ | async\" [value]=\"zone.id\">{{ zone.name }}</option>\r\n        </select>\r\n    </vdr-form-field>\r\n    <clr-alert\r\n        *ngIf=\"detailForm.value.code && !detailForm.value.defaultShippingZoneId\"\r\n        clrAlertType=\"warning\"\r\n        [clrAlertClosable]=\"false\"\r\n    >\r\n        <clr-alert-item>\r\n            <span class=\"alert-text\">\r\n                {{ 'error.no-default-shipping-zone-set' | translate }}\r\n            </span>\r\n        </clr-alert-item>\r\n    </clr-alert>\r\n\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Channel\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n    <vdr-custom-detail-component-host\r\n        locationId=\"channel-detail\"\r\n        [entity$]=\"entity$\"\r\n        [detailForm]=\"detailForm\"\r\n    ></vdr-custom-detail-component-host>\r\n</form>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: ["clr-alert{max-width:30rem;margin-bottom:12px}\n"]
             },] }
@@ -509,10 +487,12 @@ class CountryDetailComponent extends BaseDetailComponent {
         this.formBuilder = formBuilder;
         this.notificationService = notificationService;
         this.updatePermission = [Permission.UpdateSettings, Permission.UpdateCountry];
+        this.customFields = this.getCustomFieldConfig('Country');
         this.detailForm = this.formBuilder.group({
             code: ['', Validators.required],
             name: ['', Validators.required],
             enabled: [true],
+            customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => (Object.assign(Object.assign({}, hash), { [field.name]: '' })), {})),
         });
     }
     ngOnInit() {
@@ -532,6 +512,7 @@ class CountryDetailComponent extends BaseDetailComponent {
             const input = createUpdatedTranslatable({
                 translatable: country,
                 updatedFields: formValue,
+                customFieldConfig: this.customFields,
                 languageCode,
                 defaultTranslation: {
                     name: formValue.name,
@@ -560,6 +541,7 @@ class CountryDetailComponent extends BaseDetailComponent {
             const input = createUpdatedTranslatable({
                 translatable: country,
                 updatedFields: formValue,
+                customFieldConfig: this.customFields,
                 languageCode,
                 defaultTranslation: {
                     name: formValue.name,
@@ -587,12 +569,16 @@ class CountryDetailComponent extends BaseDetailComponent {
             name: currentTranslation ? currentTranslation.name : '',
             enabled: country.enabled,
         });
+        if (this.customFields.length) {
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['customFields']), country, currentTranslation);
+        }
     }
 }
 CountryDetailComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-country-detail',
-                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n        <vdr-language-selector\r\n            [disabled]=\"isNew$ | async\"\r\n            [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n            [currentLanguageCode]=\"languageCode$ | async\"\r\n            (languageCodeChange)=\"setLanguage($event)\"\r\n        ></vdr-language-selector>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"country-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"updatePermission\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n        <input\r\n            id=\"code\"\r\n            type=\"text\"\r\n            formControlName=\"code\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input\r\n            id=\"name\"\r\n            type=\"text\"\r\n            formControlName=\"name\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'common.enabled' | translate\" for=\"enabled\">\r\n        <clr-toggle-wrapper>\r\n            <input\r\n                type=\"checkbox\"\r\n                clrToggle\r\n                id=\"enabled\"\r\n                formControlName=\"enabled\"\r\n                [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n            />\r\n        </clr-toggle-wrapper>\r\n    </vdr-form-field>\r\n</form>\r\n",
+                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n        <vdr-language-selector\r\n            [disabled]=\"isNew$ | async\"\r\n            [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n            [currentLanguageCode]=\"languageCode$ | async\"\r\n            (languageCodeChange)=\"setLanguage($event)\"\r\n        ></vdr-language-selector>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"country-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"updatePermission\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n        <input\r\n            id=\"code\"\r\n            type=\"text\"\r\n            formControlName=\"code\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input\r\n            id=\"name\"\r\n            type=\"text\"\r\n            formControlName=\"name\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'common.enabled' | translate\" for=\"enabled\">\r\n        <clr-toggle-wrapper>\r\n            <input\r\n                type=\"checkbox\"\r\n                clrToggle\r\n                id=\"enabled\"\r\n                formControlName=\"enabled\"\r\n                [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n            />\r\n        </clr-toggle-wrapper>\r\n    </vdr-form-field>\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Country\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n    <vdr-custom-detail-component-host\r\n        locationId=\"country-detail\"\r\n        [entity$]=\"entity$\"\r\n        [detailForm]=\"detailForm\"\r\n    ></vdr-custom-detail-component-host>\r\n</form>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
 ];
@@ -607,25 +593,36 @@ CountryDetailComponent.ctorParameters = () => [
 ];
 
 class CountryListComponent {
-    constructor(dataService, notificationService, modalService) {
+    constructor(dataService, notificationService, modalService, serverConfigService) {
         this.dataService = dataService;
         this.notificationService = notificationService;
         this.modalService = modalService;
+        this.serverConfigService = serverConfigService;
         this.searchTerm = new FormControl('');
         this.countries = [];
         this.destroy$ = new Subject();
+        this.refresh$ = new Subject();
     }
     ngOnInit() {
-        const countries$ = this.searchTerm.valueChanges.pipe(startWith(null), switchMap(term => this.dataService.settings.getCountries(999, 0, term).stream$), tap(data => (this.countries = data.countries.items)), map(data => data.countries.items));
+        this.contentLanguage$ = this.dataService.client
+            .uiState()
+            .mapStream(({ uiState }) => uiState.contentLanguage);
+        const countries$ = combineLatest(this.contentLanguage$, this.searchTerm.valueChanges.pipe(startWith(null))).pipe(map(([__, term]) => term), switchMap(term => this.dataService.settings.getCountries(999, 0, term).single$), tap(data => {
+            this.countries = data.countries.items;
+        }), map(data => data.countries.items));
         this.zones$ = this.dataService.settings.getZones().mapStream(data => data.zones);
         this.countriesWithZones$ = combineLatest(countries$, this.zones$).pipe(map(([countries, zones]) => {
             return countries.map(country => (Object.assign(Object.assign({}, country), { zones: zones.filter(z => !!z.members.find(c => c.id === country.id)) })));
         }));
+        this.availableLanguages$ = this.serverConfigService.getAvailableLanguages();
     }
     ngOnDestroy() {
-        this.destroy$.next();
+        this.destroy$.next(undefined);
         this.destroy$.complete();
     }
+    setLanguage(code) {
+        this.dataService.client.setContentLanguage(code).subscribe();
+    }
     deleteCountry(countryId) {
         this.modalService
             .dialog({
@@ -659,7 +656,7 @@ class CountryListComponent {
 CountryListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-country-list',
-                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <input\r\n            type=\"text\"\r\n            name=\"searchTerm\"\r\n            [formControl]=\"searchTerm\"\r\n            [placeholder]=\"'settings.search-country-by-name' | translate\"\r\n            class=\"search-input\"\r\n        />\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"country-list\"></vdr-action-bar-items>\r\n        <a class=\"btn btn-primary\" [routerLink]=\"['./create']\" *vdrIfPermissions=\"['CreateSettings', 'CreateCountry']\">\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'settings.create-new-country' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"countriesWithZones$ | async\"\r\n>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'common.name' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'settings.zone' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.enabled' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-country=\"item\">\r\n        <td class=\"left align-middle\">{{ country.code }}</td>\r\n        <td class=\"left align-middle\">{{ country.name }}</td>\r\n        <td class=\"left align-middle\">\r\n            <a [routerLink]=\"['/settings', 'zones', { contents: zone.id }]\" *ngFor=\"let zone of country.zones\">\r\n            <vdr-chip [colorFrom]=\"zone.name\">{{ zone.name }}</vdr-chip>\r\n            </a>\r\n        </td>\r\n        <td class=\"left align-middle\">\r\n            <clr-icon\r\n                [class.is-success]=\"country.enabled\"\r\n                [attr.shape]=\"country.enabled ? 'check' : 'times'\"\r\n            ></clr-icon>\r\n        </td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', country.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteCountry(country.id)\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"!(['DeleteSettings', 'DeleteCountry'] | hasPermission)\"\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n",
+                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <input\r\n            type=\"text\"\r\n            name=\"searchTerm\"\r\n            [formControl]=\"searchTerm\"\r\n            [placeholder]=\"'settings.search-country-by-name' | translate\"\r\n            class=\"search-input\"\r\n        />\r\n        <vdr-language-selector\r\n            [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n            [currentLanguageCode]=\"contentLanguage$ | async\"\r\n            (languageCodeChange)=\"setLanguage($event)\"\r\n        ></vdr-language-selector>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"country-list\"></vdr-action-bar-items>\r\n        <a class=\"btn btn-primary\" [routerLink]=\"['./create']\" *vdrIfPermissions=\"['CreateSettings', 'CreateCountry']\">\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'settings.create-new-country' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"countriesWithZones$ | async\"\r\n>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'common.name' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'settings.zone' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.enabled' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-country=\"item\">\r\n        <td class=\"left align-middle\">{{ country.code }}</td>\r\n        <td class=\"left align-middle\">{{ country.name }}</td>\r\n        <td class=\"left align-middle\">\r\n            <a [routerLink]=\"['/settings', 'zones', { contents: zone.id }]\" *ngFor=\"let zone of country.zones\">\r\n                <vdr-chip [colorFrom]=\"zone.name\">{{ zone.name }}</vdr-chip>\r\n            </a>\r\n        </td>\r\n        <td class=\"left align-middle\">\r\n            <clr-icon\r\n                [class.is-success]=\"country.enabled\"\r\n                [attr.shape]=\"country.enabled ? 'check' : 'times'\"\r\n            ></clr-icon>\r\n        </td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', country.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteCountry(country.id)\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"!(['DeleteSettings', 'DeleteCountry'] | hasPermission)\"\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".search-input{margin-top:6px;min-width:300px}\n"]
             },] }
@@ -667,7 +664,8 @@ CountryListComponent.decorators = [
 CountryListComponent.ctorParameters = () => [
     { type: DataService },
     { type: NotificationService },
-    { type: ModalService }
+    { type: ModalService },
+    { type: ServerConfigService }
 ];
 
 class GlobalSettingsComponent extends BaseDetailComponent {
@@ -698,9 +696,6 @@ class GlobalSettingsComponent extends BaseDetailComponent {
             }
         });
     }
-    customFieldIsSet(name) {
-        return !!this.detailForm.get(['customFields', name]);
-    }
     save() {
         if (!this.detailForm.dirty) {
             return;
@@ -734,22 +729,14 @@ class GlobalSettingsComponent extends BaseDetailComponent {
             outOfStockThreshold: entity.outOfStockThreshold,
         });
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get('customFields');
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value = entity.customFields[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get('customFields'), entity);
         }
     }
 }
 GlobalSettingsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-global-settings',
-                template: "<vdr-action-bar>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"global-settings-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            (click)=\"save()\"\r\n            *vdrIfPermissions=\"updatePermission\"\r\n            [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n        >\r\n            {{ 'common.update' | translate }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-form-field [label]=\"'common.available-languages' | translate\" for=\"availableLanguages\">\r\n        <ng-select\r\n            [items]=\"languageCodes\"\r\n            [addTag]=\"false\"\r\n            [hideSelected]=\"true\"\r\n            multiple=\"true\"\r\n            appendTo=\"body\"\r\n            formControlName=\"availableLanguages\"\r\n        >\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                <span class=\"ng-value-icon left\" (click)=\"clear.call(null, item)\" aria-hidden=\"true\">\r\n                    \u00D7\r\n                </span>\r\n                <span class=\"ng-value-label\">{{ item | localeLanguageName }} ({{ item }})</span>\r\n            </ng-template>\r\n            <ng-template ng-option-tmp let-item=\"item\">\r\n                {{ item | localeLanguageName }} ({{ item }})\r\n            </ng-template>\r\n        </ng-select>\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'settings.global-out-of-stock-threshold' | translate\"\r\n        for=\"outOfStockThreshold\"\r\n        [tooltip]=\"'settings.global-out-of-stock-threshold-tooltip' | translate\"\r\n    >\r\n        <input\r\n            id=\"outOfStockThreshold\"\r\n            type=\"number\"\r\n            formControlName=\"outOfStockThreshold\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'settings.track-inventory-default' | translate\"\r\n        for=\"enabled\"\r\n        [tooltip]=\"'catalog.track-inventory-tooltip' | translate\"\r\n    >\r\n        <clr-toggle-wrapper>\r\n            <input\r\n                type=\"checkbox\"\r\n                clrToggle\r\n                name=\"enabled\"\r\n                formControlName=\"trackInventory\"\r\n                [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n            />\r\n        </clr-toggle-wrapper>\r\n    </vdr-form-field>\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <ng-container *ngFor=\"let customField of customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                entityName=\"GlobalSettings\"\r\n                [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                [customField]=\"customField\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </section>\r\n</form>\r\n",
+                template: "<vdr-action-bar>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"global-settings-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            (click)=\"save()\"\r\n            *vdrIfPermissions=\"updatePermission\"\r\n            [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n        >\r\n            {{ 'common.update' | translate }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-form-field [label]=\"'common.available-languages' | translate\" for=\"availableLanguages\">\r\n        <ng-select\r\n            [items]=\"languageCodes\"\r\n            [addTag]=\"false\"\r\n            [hideSelected]=\"true\"\r\n            multiple=\"true\"\r\n            appendTo=\"body\"\r\n            formControlName=\"availableLanguages\"\r\n        >\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                <span class=\"ng-value-icon left\" (click)=\"clear.call(null, item)\" aria-hidden=\"true\">\r\n                    \u00D7\r\n                </span>\r\n                <span class=\"ng-value-label\">{{ item | localeLanguageName }} ({{ item }})</span>\r\n            </ng-template>\r\n            <ng-template ng-option-tmp let-item=\"item\">\r\n                {{ item | localeLanguageName }} ({{ item }})\r\n            </ng-template>\r\n        </ng-select>\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'settings.global-out-of-stock-threshold' | translate\"\r\n        for=\"outOfStockThreshold\"\r\n        [tooltip]=\"'settings.global-out-of-stock-threshold-tooltip' | translate\"\r\n    >\r\n        <input\r\n            id=\"outOfStockThreshold\"\r\n            type=\"number\"\r\n            formControlName=\"outOfStockThreshold\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'settings.track-inventory-default' | translate\"\r\n        for=\"enabled\"\r\n        [tooltip]=\"'catalog.track-inventory-tooltip' | translate\"\r\n    >\r\n        <clr-toggle-wrapper>\r\n            <input\r\n                type=\"checkbox\"\r\n                clrToggle\r\n                name=\"enabled\"\r\n                formControlName=\"trackInventory\"\r\n                [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n            />\r\n        </clr-toggle-wrapper>\r\n    </vdr-form-field>\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"GlobalSettings\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n    <vdr-custom-detail-component-host\r\n        locationId=\"global-settings-detail\"\r\n        [entity$]=\"entity$\"\r\n        [detailForm]=\"detailForm\"\r\n    ></vdr-custom-detail-component-host>\r\n</form>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: ["::ng-deep ng-select .ng-value>span{margin:0!important}::ng-deep ng-select .ng-arrow-wrapper .ng-arrow{margin:0!important}::ng-deep ng-select .ng-select-container>span{margin:0!important}\n"]
             },] }
@@ -774,6 +761,7 @@ class PaymentMethodDetailComponent extends BaseDetailComponent {
         this.checkers = [];
         this.handlers = [];
         this.updatePermission = [Permission.UpdateSettings, Permission.UpdatePaymentMethod];
+        this.customFields = this.getCustomFieldConfig('PaymentMethod');
         this.detailForm = this.formBuilder.group({
             code: ['', Validators.required],
             name: ['', Validators.required],
@@ -781,6 +769,7 @@ class PaymentMethodDetailComponent extends BaseDetailComponent {
             enabled: [true, Validators.required],
             checker: {},
             handler: {},
+            customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => (Object.assign(Object.assign({}, hash), { [field.name]: '' })), {})),
         });
     }
     ngOnInit() {
@@ -862,6 +851,7 @@ class PaymentMethodDetailComponent extends BaseDetailComponent {
                     ? toConfigurableOperationInput(selectedChecker, formValue.checker)
                     : null,
                 handler: toConfigurableOperationInput(selectedHandler, formValue.handler),
+                customFields: formValue.customFields,
             };
             return this.dataService.settings.createPaymentMethod(input);
         }))
@@ -897,6 +887,7 @@ class PaymentMethodDetailComponent extends BaseDetailComponent {
                     ? toConfigurableOperationInput(selectedChecker, formValue.checker)
                     : null,
                 handler: toConfigurableOperationInput(selectedHandler, formValue.handler),
+                customFields: formValue.customFields,
             };
             return this.dataService.settings.updatePaymentMethod(input);
         }))
@@ -933,12 +924,15 @@ class PaymentMethodDetailComponent extends BaseDetailComponent {
                 args: paymentMethod.handler.args.map(a => (Object.assign(Object.assign({}, a), { value: getConfigArgValue(a.value) }))),
             };
         }
+        if (this.customFields.length) {
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get('customFields'), paymentMethod);
+        }
     }
 }
 PaymentMethodDetailComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-payment-method-detail',
-                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"payment-method-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            [disabled]=\"detailForm.pristine || detailForm.invalid\"\r\n            (click)=\"create()\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                *vdrIfPermissions=\"updatePermission\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"detailForm.pristine || detailForm.invalid || !selectedHandler\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as paymentMethod\">\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input\r\n            id=\"name\"\r\n            type=\"text\"\r\n            formControlName=\"name\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n            (input)=\"updateCode(paymentMethod.code, $event.target.value)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'common.code' | translate\"\r\n        for=\"code\"\r\n        [readOnlyToggle]=\"updatePermission | hasPermission\"\r\n    >\r\n        <input\r\n            id=\"code\"\r\n            type=\"text\"\r\n            formControlName=\"code\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-rich-text-editor\r\n        formControlName=\"description\"\r\n        [readonly]=\"!(updatePermission | hasPermission)\"\r\n        [label]=\"'common.description' | translate\"\r\n    ></vdr-rich-text-editor>\r\n    <vdr-form-field [label]=\"'common.enabled' | translate\" for=\"description\">\r\n        <clr-toggle-wrapper>\r\n            <input\r\n                type=\"checkbox\"\r\n                clrToggle\r\n                id=\"enabled\"\r\n                [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                formControlName=\"enabled\"\r\n            />\r\n        </clr-toggle-wrapper>\r\n    </vdr-form-field>\r\n\r\n    <div class=\"clr-row mt4\">\r\n        <div class=\"clr-col\">\r\n            <label class=\"clr-control-label\">{{ 'settings.payment-eligibility-checker' | translate }}</label>\r\n            <vdr-configurable-input\r\n                *ngIf=\"selectedChecker && selectedCheckerDefinition\"\r\n                [operation]=\"selectedChecker\"\r\n                [operationDefinition]=\"selectedCheckerDefinition\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                (remove)=\"removeChecker()\"\r\n                formControlName=\"checker\"\r\n            ></vdr-configurable-input>\r\n            <div *ngIf=\"!selectedChecker || !selectedCheckerDefinition\">\r\n                <vdr-dropdown>\r\n                    <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'common.select' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                        <button\r\n                            *ngFor=\"let checker of checkers\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"selectChecker(checker)\"\r\n                        >\r\n                            {{ checker.description }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n        <div class=\"clr-col\">\r\n            <label class=\"clr-control-label\">{{ 'settings.payment-handler' | translate }}</label>\r\n            <vdr-configurable-input\r\n                *ngIf=\"selectedHandler && selectedHandlerDefinition\"\r\n                [operation]=\"selectedHandler\"\r\n                [operationDefinition]=\"selectedHandlerDefinition\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                (remove)=\"removeHandler()\"\r\n                formControlName=\"handler\"\r\n            ></vdr-configurable-input>\r\n            <div *ngIf=\"!selectedHandler || !selectedHandlerDefinition\">\r\n                <vdr-dropdown>\r\n                    <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'common.select' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                        <button\r\n                            *ngFor=\"let handler of handlers\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"selectHandler(handler)\"\r\n                        >\r\n                            {{ handler.description }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form>\r\n",
+                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"payment-method-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            [disabled]=\"detailForm.pristine || detailForm.invalid\"\r\n            (click)=\"create()\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                *vdrIfPermissions=\"updatePermission\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"detailForm.pristine || detailForm.invalid || !selectedHandler\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as paymentMethod\">\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input\r\n            id=\"name\"\r\n            type=\"text\"\r\n            formControlName=\"name\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n            (input)=\"updateCode(paymentMethod.code, $event.target.value)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'common.code' | translate\"\r\n        for=\"code\"\r\n        [readOnlyToggle]=\"updatePermission | hasPermission\"\r\n    >\r\n        <input\r\n            id=\"code\"\r\n            type=\"text\"\r\n            formControlName=\"code\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-rich-text-editor\r\n        formControlName=\"description\"\r\n        [readonly]=\"!(updatePermission | hasPermission)\"\r\n        [label]=\"'common.description' | translate\"\r\n    ></vdr-rich-text-editor>\r\n    <vdr-form-field [label]=\"'common.enabled' | translate\" for=\"description\">\r\n        <clr-toggle-wrapper>\r\n            <input\r\n                type=\"checkbox\"\r\n                clrToggle\r\n                id=\"enabled\"\r\n                [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                formControlName=\"enabled\"\r\n            />\r\n        </clr-toggle-wrapper>\r\n    </vdr-form-field>\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"PaymentMethod\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n\r\n    <vdr-custom-detail-component-host\r\n        locationId=\"payment-method-detail\"\r\n        [entity$]=\"entity$\"\r\n        [detailForm]=\"detailForm\"\r\n    ></vdr-custom-detail-component-host>\r\n\r\n    <div class=\"clr-row mt4\">\r\n        <div class=\"clr-col\">\r\n            <label class=\"clr-control-label\">{{ 'settings.payment-eligibility-checker' | translate }}</label>\r\n            <vdr-configurable-input\r\n                *ngIf=\"selectedChecker && selectedCheckerDefinition\"\r\n                [operation]=\"selectedChecker\"\r\n                [operationDefinition]=\"selectedCheckerDefinition\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                (remove)=\"removeChecker()\"\r\n                formControlName=\"checker\"\r\n            ></vdr-configurable-input>\r\n            <div *ngIf=\"!selectedChecker || !selectedCheckerDefinition\">\r\n                <vdr-dropdown>\r\n                    <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'common.select' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                        <button\r\n                            *ngFor=\"let checker of checkers\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"selectChecker(checker)\"\r\n                        >\r\n                            {{ checker.description }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n        <div class=\"clr-col\">\r\n            <label class=\"clr-control-label\">{{ 'settings.payment-handler' | translate }}</label>\r\n            <vdr-configurable-input\r\n                *ngIf=\"selectedHandler && selectedHandlerDefinition\"\r\n                [operation]=\"selectedHandler\"\r\n                [operationDefinition]=\"selectedHandlerDefinition\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                (remove)=\"removeHandler()\"\r\n                formControlName=\"handler\"\r\n            ></vdr-configurable-input>\r\n            <div *ngIf=\"!selectedHandler || !selectedHandlerDefinition\">\r\n                <vdr-dropdown>\r\n                    <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'common.select' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                        <button\r\n                            *ngFor=\"let handler of handlers\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"selectHandler(handler)\"\r\n                        >\r\n                            {{ handler.description }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
@@ -1114,9 +1108,6 @@ class ProfileComponent extends BaseDetailComponent {
     ngOnDestroy() {
         this.destroy();
     }
-    customFieldIsSet(name) {
-        return !!this.detailForm.get(['customFields', name]);
-    }
     save() {
         this.entity$
             .pipe(take(1), mergeMap(({ id }) => {
@@ -1149,22 +1140,14 @@ class ProfileComponent extends BaseDetailComponent {
             lastName: administrator.lastName,
         });
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get('customFields');
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value = administrator.customFields[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get('customFields'), administrator);
         }
     }
 }
 ProfileComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-profile',
-                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"administrator-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            (click)=\"save()\"\r\n            [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n        >\r\n            {{ 'common.update' | translate }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-form-field [label]=\"'settings.email-address' | translate\" for=\"emailAddress\">\r\n        <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.first-name' | translate\" for=\"firstName\">\r\n        <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.last-name' | translate\" for=\"lastName\">\r\n        <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field *ngIf=\"isNew$ | async\" [label]=\"'settings.password' | translate\" for=\"password\">\r\n        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.password' | translate\" for=\"password\" [readOnlyToggle]=\"true\">\r\n        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n    </vdr-form-field>\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <ng-container *ngFor=\"let customField of customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                entityName=\"Administrator\"\r\n                [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                [customField]=\"customField\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </section>\r\n</form>\r\n",
+                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"administrator-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            (click)=\"save()\"\r\n            [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n        >\r\n            {{ 'common.update' | translate }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-form-field [label]=\"'settings.email-address' | translate\" for=\"emailAddress\">\r\n        <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.first-name' | translate\" for=\"firstName\">\r\n        <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.last-name' | translate\" for=\"lastName\">\r\n        <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field *ngIf=\"isNew$ | async\" [label]=\"'settings.password' | translate\" for=\"password\">\r\n        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.password' | translate\" for=\"password\" [readOnlyToggle]=\"true\">\r\n        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n    </vdr-form-field>\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Administrator\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n</form>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
@@ -1430,9 +1413,6 @@ class ShippingMethodDetailComponent extends BaseDetailComponent {
     ngOnDestroy() {
         this.destroy();
     }
-    customFieldIsSet(name) {
-        return !!this.detailForm.get(['customFields', name]);
-    }
     updateCode(currentCode, nameValue) {
         if (!currentCode) {
             const codeControl = this.detailForm.get(['code']);
@@ -1574,24 +1554,14 @@ class ShippingMethodDetailComponent extends BaseDetailComponent {
             };
         }
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get('customFields');
-            for (const fieldDef of this.customFields) {
-                const key = fieldDef.name;
-                const value = fieldDef.type === 'localeString'
-                    ? currentTranslation.customFields[key]
-                    : shippingMethod.customFields[key];
-                const control = customFieldsGroup.get(key);
-                if (control) {
-                    control.patchValue(value);
-                }
-            }
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['customFields']), shippingMethod, currentTranslation);
         }
     }
 }
 ShippingMethodDetailComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-shipping-method-detail',
-                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n        <vdr-language-selector\r\n            [disabled]=\"isNew$ | async\"\r\n            [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n            [currentLanguageCode]=\"languageCode$ | async\"\r\n            (languageCodeChange)=\"setLanguage($event)\"\r\n        ></vdr-language-selector>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"shipping-method-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"detailForm.pristine || detailForm.invalid || !selectedChecker || !selectedCalculator\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                *vdrIfPermissions=\"updatePermission\"\r\n                [disabled]=\"\r\n                    detailForm.pristine || detailForm.invalid || !selectedChecker || !selectedCalculator\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as shippingMethod\">\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input\r\n            id=\"name\"\r\n            type=\"text\"\r\n            formControlName=\"name\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n            (input)=\"updateCode(shippingMethod.code, $event.target.value)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'common.code' | translate\"\r\n        for=\"code\"\r\n        [readOnlyToggle]=\"updatePermission | hasPermission\"\r\n    >\r\n        <input\r\n            id=\"code\"\r\n            type=\"text\"\r\n            formControlName=\"code\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-rich-text-editor\r\n        formControlName=\"description\"\r\n        [readonly]=\"!(updatePermission | hasPermission)\"\r\n        [label]=\"'common.description' | translate\"\r\n    ></vdr-rich-text-editor>\r\n    <vdr-form-field [label]=\"'settings.fulfillment-handler' | translate\" for=\"fulfillmentHandler\" class=\"mb2\">\r\n        <select\r\n            name=\"fulfillmentHandler\"\r\n            formControlName=\"fulfillmentHandler\"\r\n            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n        >\r\n            <option *ngFor=\"let handler of fulfillmentHandlers\" [value]=\"handler.code\">\r\n                {{ handler.code }}: {{ handler.description }}\r\n            </option>\r\n        </select>\r\n    </vdr-form-field>\r\n\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <ng-container *ngFor=\"let customField of customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                entityName=\"ShippingMethod\"\r\n                [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                [customField]=\"customField\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </section>\r\n\r\n    <div class=\"clr-row mt4\">\r\n        <div class=\"clr-col\">\r\n            <label class=\"clr-control-label\">{{ 'settings.shipping-eligibility-checker' | translate }}</label>\r\n            <vdr-configurable-input\r\n                *ngIf=\"selectedChecker && selectedCheckerDefinition\"\r\n                [operation]=\"selectedChecker\"\r\n                [operationDefinition]=\"selectedCheckerDefinition\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                (remove)=\"selectedChecker = null\"\r\n                formControlName=\"checker\"\r\n            ></vdr-configurable-input>\r\n            <div *ngIf=\"!selectedChecker || !selectedCheckerDefinition\">\r\n                <vdr-dropdown>\r\n                    <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'common.select' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                        <button\r\n                            *ngFor=\"let checker of checkers\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"selectChecker(checker)\"\r\n                        >\r\n                            {{ checker.description }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n        <div class=\"clr-col\">\r\n            <label class=\"clr-control-label\">{{ 'settings.shipping-calculator' | translate }}</label>\r\n            <vdr-configurable-input\r\n                *ngIf=\"selectedCalculator && selectedCalculatorDefinition\"\r\n                [operation]=\"selectedCalculator\"\r\n                [operationDefinition]=\"selectedCalculatorDefinition\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                (remove)=\"selectedCalculator = null\"\r\n                formControlName=\"calculator\"\r\n            ></vdr-configurable-input>\r\n            <div *ngIf=\"!selectedCalculator || !selectedCalculatorDefinition\">\r\n                <vdr-dropdown>\r\n                    <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'common.select' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                        <button\r\n                            *ngFor=\"let calculator of calculators\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"selectCalculator(calculator)\"\r\n                        >\r\n                            {{ calculator.description }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form>\r\n<div class=\"testing-tool\">\r\n    <clr-accordion>\r\n        <clr-accordion-panel>\r\n            <clr-accordion-title>{{ 'settings.test-shipping-method' | translate }}</clr-accordion-title>\r\n            <clr-accordion-content *clrIfExpanded>\r\n                <div class=\"clr-row\">\r\n                    <div class=\"clr-col\">\r\n                        <vdr-test-order-builder\r\n                            (orderLinesChange)=\"setTestOrderLines($event)\"\r\n                        ></vdr-test-order-builder>\r\n                    </div>\r\n                    <div class=\"clr-col\">\r\n                        <vdr-test-address-form\r\n                            (addressChange)=\"setTestAddress($event)\"\r\n                        ></vdr-test-address-form>\r\n                        <vdr-shipping-method-test-result\r\n                            [currencyCode]=\"(activeChannel$ | async)?.currencyCode\"\r\n                            [okToRun]=\"allTestDataPresent() && testDataUpdated && detailForm.valid\"\r\n                            [testDataUpdated]=\"testDataUpdated\"\r\n                            [testResult]=\"testResult$ | async\"\r\n                            (runTest)=\"runTest()\"\r\n                        ></vdr-shipping-method-test-result>\r\n                    </div>\r\n                </div>\r\n            </clr-accordion-content>\r\n        </clr-accordion-panel>\r\n    </clr-accordion>\r\n</div>\r\n",
+                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n        <vdr-language-selector\r\n            [disabled]=\"isNew$ | async\"\r\n            [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n            [currentLanguageCode]=\"languageCode$ | async\"\r\n            (languageCodeChange)=\"setLanguage($event)\"\r\n        ></vdr-language-selector>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"shipping-method-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"detailForm.pristine || detailForm.invalid || !selectedChecker || !selectedCalculator\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                *vdrIfPermissions=\"updatePermission\"\r\n                [disabled]=\"\r\n                    detailForm.pristine || detailForm.invalid || !selectedChecker || !selectedCalculator\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as shippingMethod\">\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input\r\n            id=\"name\"\r\n            type=\"text\"\r\n            formControlName=\"name\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n            (input)=\"updateCode(shippingMethod.code, $event.target.value)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'common.code' | translate\"\r\n        for=\"code\"\r\n        [readOnlyToggle]=\"updatePermission | hasPermission\"\r\n    >\r\n        <input\r\n            id=\"code\"\r\n            type=\"text\"\r\n            formControlName=\"code\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-rich-text-editor\r\n        formControlName=\"description\"\r\n        [readonly]=\"!(updatePermission | hasPermission)\"\r\n        [label]=\"'common.description' | translate\"\r\n    ></vdr-rich-text-editor>\r\n    <vdr-form-field [label]=\"'settings.fulfillment-handler' | translate\" for=\"fulfillmentHandler\" class=\"mb2\">\r\n        <select\r\n            name=\"fulfillmentHandler\"\r\n            formControlName=\"fulfillmentHandler\"\r\n            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n        >\r\n            <option *ngFor=\"let handler of fulfillmentHandlers\" [value]=\"handler.code\">\r\n                {{ handler.code }}: {{ handler.description }}\r\n            </option>\r\n        </select>\r\n    </vdr-form-field>\r\n\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"ShippingMethod\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n\r\n    <vdr-custom-detail-component-host\r\n        locationId=\"shipping-method-detail\"\r\n        [entity$]=\"entity$\"\r\n        [detailForm]=\"detailForm\"\r\n    ></vdr-custom-detail-component-host>\r\n\r\n    <div class=\"clr-row mt4\">\r\n        <div class=\"clr-col\">\r\n            <label class=\"clr-control-label\">{{ 'settings.shipping-eligibility-checker' | translate }}</label>\r\n            <vdr-configurable-input\r\n                *ngIf=\"selectedChecker && selectedCheckerDefinition\"\r\n                [operation]=\"selectedChecker\"\r\n                [operationDefinition]=\"selectedCheckerDefinition\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                (remove)=\"selectedChecker = null\"\r\n                formControlName=\"checker\"\r\n            ></vdr-configurable-input>\r\n            <div *ngIf=\"!selectedChecker || !selectedCheckerDefinition\">\r\n                <vdr-dropdown>\r\n                    <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'common.select' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                        <button\r\n                            *ngFor=\"let checker of checkers\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"selectChecker(checker)\"\r\n                        >\r\n                            {{ checker.description }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n        <div class=\"clr-col\">\r\n            <label class=\"clr-control-label\">{{ 'settings.shipping-calculator' | translate }}</label>\r\n            <vdr-configurable-input\r\n                *ngIf=\"selectedCalculator && selectedCalculatorDefinition\"\r\n                [operation]=\"selectedCalculator\"\r\n                [operationDefinition]=\"selectedCalculatorDefinition\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                (remove)=\"selectedCalculator = null\"\r\n                formControlName=\"calculator\"\r\n            ></vdr-configurable-input>\r\n            <div *ngIf=\"!selectedCalculator || !selectedCalculatorDefinition\">\r\n                <vdr-dropdown>\r\n                    <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'common.select' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                        <button\r\n                            *ngFor=\"let calculator of calculators\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"selectCalculator(calculator)\"\r\n                        >\r\n                            {{ calculator.description }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form>\r\n<div class=\"testing-tool\">\r\n    <clr-accordion>\r\n        <clr-accordion-panel>\r\n            <clr-accordion-title>{{ 'settings.test-shipping-method' | translate }}</clr-accordion-title>\r\n            <clr-accordion-content *clrIfExpanded>\r\n                <div class=\"clr-row\">\r\n                    <div class=\"clr-col\">\r\n                        <vdr-test-order-builder\r\n                            (orderLinesChange)=\"setTestOrderLines($event)\"\r\n                        ></vdr-test-order-builder>\r\n                    </div>\r\n                    <div class=\"clr-col\">\r\n                        <vdr-test-address-form\r\n                            (addressChange)=\"setTestAddress($event)\"\r\n                        ></vdr-test-address-form>\r\n                        <vdr-shipping-method-test-result\r\n                            [currencyCode]=\"(activeChannel$ | async)?.currencyCode\"\r\n                            [okToRun]=\"allTestDataPresent() && testDataUpdated && detailForm.valid\"\r\n                            [testDataUpdated]=\"testDataUpdated\"\r\n                            [testResult]=\"testResult$ | async\"\r\n                            (runTest)=\"runTest()\"\r\n                        ></vdr-shipping-method-test-result>\r\n                    </div>\r\n                </div>\r\n            </clr-accordion-content>\r\n        </clr-accordion-panel>\r\n    </clr-accordion>\r\n</div>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".testing-tool{margin-top:48px;margin-bottom:128px}.testing-tool h4{margin-bottom:12px}\n"]
             },] }
@@ -1725,9 +1695,11 @@ class TaxCategoryDetailComponent extends BaseDetailComponent {
         this.formBuilder = formBuilder;
         this.notificationService = notificationService;
         this.updatePermission = [Permission.UpdateSettings, Permission.UpdateTaxCategory];
+        this.customFields = this.getCustomFieldConfig('TaxCategory');
         this.detailForm = this.formBuilder.group({
             name: ['', Validators.required],
             isDefault: false,
+            customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => (Object.assign(Object.assign({}, hash), { [field.name]: '' })), {})),
         });
     }
     ngOnInit() {
@@ -1745,7 +1717,11 @@ class TaxCategoryDetailComponent extends BaseDetailComponent {
             return;
         }
         const formValue = this.detailForm.value;
-        const input = { name: formValue.name, isDefault: formValue.isDefault };
+        const input = {
+            name: formValue.name,
+            isDefault: formValue.isDefault,
+            customFields: formValue.customFields,
+        };
         this.dataService.settings.createTaxCategory(input).subscribe(data => {
             this.notificationService.success(marker('common.notify-create-success'), {
                 entity: 'TaxCategory',
@@ -1770,6 +1746,7 @@ class TaxCategoryDetailComponent extends BaseDetailComponent {
                 id: taxCategory.id,
                 name: formValue.name,
                 isDefault: formValue.isDefault,
+                customFields: formValue.customFields,
             };
             return this.dataService.settings.updateTaxCategory(input);
         }))
@@ -1793,12 +1770,15 @@ class TaxCategoryDetailComponent extends BaseDetailComponent {
             name: entity.name,
             isDefault: entity.isDefault,
         });
+        if (this.customFields.length) {
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get('customFields'), entity);
+        }
     }
 }
 TaxCategoryDetailComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-tax-detail',
-                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"tax-category-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"!saveButtonEnabled()\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"!saveButtonEnabled()\"\r\n                *vdrIfPermissions=\"updatePermission\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input\r\n            id=\"name\"\r\n            type=\"text\"\r\n            formControlName=\"name\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'common.default-tax-category' | translate\" for=\"isDefault\">\r\n        <clr-toggle-wrapper>\r\n            <input\r\n                type=\"checkbox\"\r\n                clrToggle\r\n                id=\"isDefault\"\r\n                [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                formControlName=\"isDefault\"\r\n            />\r\n        </clr-toggle-wrapper>\r\n    </vdr-form-field>\r\n</form>\r\n",
+                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"tax-category-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"!saveButtonEnabled()\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"!saveButtonEnabled()\"\r\n                *vdrIfPermissions=\"updatePermission\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input\r\n            id=\"name\"\r\n            type=\"text\"\r\n            formControlName=\"name\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'common.default-tax-category' | translate\" for=\"isDefault\">\r\n        <clr-toggle-wrapper>\r\n            <input\r\n                type=\"checkbox\"\r\n                clrToggle\r\n                id=\"isDefault\"\r\n                [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                formControlName=\"isDefault\"\r\n            />\r\n        </clr-toggle-wrapper>\r\n    </vdr-form-field>\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"TaxCategory\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n    <vdr-custom-detail-component-host\r\n        locationId=\"tax-category-detail\"\r\n        [entity$]=\"entity$\"\r\n        [detailForm]=\"detailForm\"\r\n    ></vdr-custom-detail-component-host>\r\n</form>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
@@ -1873,6 +1853,7 @@ class TaxRateDetailComponent extends BaseDetailComponent {
         this.formBuilder = formBuilder;
         this.notificationService = notificationService;
         this.updatePermission = [Permission.UpdateSettings, Permission.UpdateTaxRate];
+        this.customFields = this.getCustomFieldConfig('TaxRate');
         this.detailForm = this.formBuilder.group({
             name: ['', Validators.required],
             enabled: [true],
@@ -1880,6 +1861,7 @@ class TaxRateDetailComponent extends BaseDetailComponent {
             taxCategoryId: [''],
             zoneId: [''],
             customerGroupId: [''],
+            customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => (Object.assign(Object.assign({}, hash), { [field.name]: '' })), {})),
         });
     }
     ngOnInit() {
@@ -1907,6 +1889,7 @@ class TaxRateDetailComponent extends BaseDetailComponent {
             categoryId: formValue.taxCategoryId,
             zoneId: formValue.zoneId,
             customerGroupId: formValue.customerGroupId,
+            customFields: formValue.customFields,
         };
         this.dataService.settings.createTaxRate(input).subscribe(data => {
             this.notificationService.success(marker('common.notify-create-success'), {
@@ -1936,6 +1919,7 @@ class TaxRateDetailComponent extends BaseDetailComponent {
                 categoryId: formValue.taxCategoryId,
                 zoneId: formValue.zoneId,
                 customerGroupId: formValue.customerGroupId,
+                customFields: formValue.customFields,
             };
             return this.dataService.settings.updateTaxRate(input);
         }))
@@ -1963,12 +1947,15 @@ class TaxRateDetailComponent extends BaseDetailComponent {
             zoneId: entity.zone ? entity.zone.id : '',
             customerGroupId: entity.customerGroup ? entity.customerGroup.id : '',
         });
+        if (this.customFields.length) {
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get('customFields'), entity);
+        }
     }
 }
 TaxRateDetailComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-tax-rate-detail',
-                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"tax-rate-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"!saveButtonEnabled()\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"!saveButtonEnabled()\"\r\n                *vdrIfPermissions=\"updatePermission\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input\r\n            id=\"name\"\r\n            type=\"text\"\r\n            formControlName=\"name\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'common.enabled' | translate\" for=\"enabled\">\r\n        <clr-toggle-wrapper>\r\n            <input\r\n                type=\"checkbox\"\r\n                clrToggle\r\n                id=\"enabled\"\r\n                formControlName=\"enabled\"\r\n                [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n            />\r\n        </clr-toggle-wrapper>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.rate' | translate\" for=\"value\">\r\n        <vdr-affixed-input suffix=\"%\">\r\n            <input\r\n                id=\"value\"\r\n                type=\"number\"\r\n                step=\"0.1\"\r\n                formControlName=\"value\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n            />\r\n        </vdr-affixed-input>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.tax-category' | translate\" for=\"taxCategoryId\">\r\n        <select\r\n            clrSelect\r\n            name=\"taxCategoryId\"\r\n            formControlName=\"taxCategoryId\"\r\n            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n        >\r\n            <option *ngFor=\"let taxCategory of taxCategories$ | async\" [value]=\"taxCategory.id\">\r\n                {{ taxCategory.name }}\r\n            </option>\r\n        </select>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.zone' | translate\" for=\"zoneId\">\r\n        <select\r\n            clrSelect\r\n            name=\"zoneId\"\r\n            formControlName=\"zoneId\"\r\n            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n        >\r\n            <option *ngFor=\"let zone of zones$ | async\" [value]=\"zone.id\">{{ zone.name }}</option>\r\n        </select>\r\n    </vdr-form-field>\r\n</form>\r\n",
+                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"tax-rate-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"!saveButtonEnabled()\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"!saveButtonEnabled()\"\r\n                *vdrIfPermissions=\"updatePermission\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input\r\n            id=\"name\"\r\n            type=\"text\"\r\n            formControlName=\"name\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'common.enabled' | translate\" for=\"enabled\">\r\n        <clr-toggle-wrapper>\r\n            <input\r\n                type=\"checkbox\"\r\n                clrToggle\r\n                id=\"enabled\"\r\n                formControlName=\"enabled\"\r\n                [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n            />\r\n        </clr-toggle-wrapper>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.rate' | translate\" for=\"value\">\r\n        <vdr-affixed-input suffix=\"%\">\r\n            <input\r\n                id=\"value\"\r\n                type=\"number\"\r\n                step=\"0.1\"\r\n                formControlName=\"value\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n            />\r\n        </vdr-affixed-input>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.tax-category' | translate\" for=\"taxCategoryId\">\r\n        <select\r\n            clrSelect\r\n            name=\"taxCategoryId\"\r\n            formControlName=\"taxCategoryId\"\r\n            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n        >\r\n            <option *ngFor=\"let taxCategory of taxCategories$ | async\" [value]=\"taxCategory.id\">\r\n                {{ taxCategory.name }}\r\n            </option>\r\n        </select>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'settings.zone' | translate\" for=\"zoneId\">\r\n        <select\r\n            clrSelect\r\n            name=\"zoneId\"\r\n            formControlName=\"zoneId\"\r\n            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n        >\r\n            <option *ngFor=\"let zone of zones$ | async\" [value]=\"zone.id\">{{ zone.name }}</option>\r\n        </select>\r\n    </vdr-form-field>\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"TaxRate\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n            [readonly]=\"!(updatePermission | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n    <vdr-custom-detail-component-host\r\n        locationId=\"tax-rate-detail\"\r\n        [entity$]=\"entity$\"\r\n        [detailForm]=\"detailForm\"\r\n    ></vdr-custom-detail-component-host>\r\n</form>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
@@ -2159,44 +2146,81 @@ TestOrderBuilderComponent.propDecorators = {
 };
 
 class ZoneDetailDialogComponent {
+    constructor(serverConfigService, formBuilder) {
+        this.serverConfigService = serverConfigService;
+        this.formBuilder = formBuilder;
+        this.customFields = this.serverConfigService.getCustomFieldsFor('CustomerGroup');
+    }
+    ngOnInit() {
+        var _a;
+        this.form = this.formBuilder.group({
+            name: [this.zone.name, Validators.required],
+            customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => (Object.assign(Object.assign({}, hash), { [field.name]: '' })), {})),
+        });
+        if (this.customFields.length) {
+            const customFieldsGroup = this.form.get('customFields');
+            for (const fieldDef of this.customFields) {
+                const key = fieldDef.name;
+                const value = (_a = this.zone.customFields) === null || _a === void 0 ? void 0 : _a[key];
+                const control = customFieldsGroup.get(key);
+                if (control) {
+                    control.patchValue(value);
+                }
+            }
+        }
+    }
     cancel() {
         this.resolveWith();
     }
     save() {
-        this.resolveWith(this.zone.name);
+        this.resolveWith(this.form.value);
     }
 }
 ZoneDetailDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-zone-detail-dialog',
-                template: "<ng-template vdrDialogTitle>\r\n    <span *ngIf=\"zone.id\">{{ 'settings.update-zone' | translate }}</span>\r\n    <span *ngIf=\"!zone.id\">{{ 'settings.create-zone' | translate }}</span>\r\n</ng-template>\r\n\r\n<vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n    <input id=\"name\" type=\"text\" [(ngModel)]=\"zone.name\" [readonly]=\"!(['UpdateSettings', 'UpdateZone'] | hasPermission)\" />\r\n</vdr-form-field>\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)=\"save()\" [disabled]=\"!zone.name\" class=\"btn btn-primary\">\r\n        <span *ngIf=\"zone.id\">{{ 'settings.update-zone' | translate }}</span>\r\n        <span *ngIf=\"!zone.id\">{{ 'settings.create-zone' | translate }}</span>\r\n    </button>\r\n</ng-template>\r\n",
+                template: "<ng-template vdrDialogTitle>\r\n    <span *ngIf=\"zone.id\">{{ 'settings.update-zone' | translate }}</span>\r\n    <span *ngIf=\"!zone.id\">{{ 'settings.create-zone' | translate }}</span>\r\n</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input\r\n            id=\"name\"\r\n            type=\"text\"\r\n            formControlName=\"name\"\r\n            [readonly]=\"!(['UpdateSettings', 'UpdateZone'] | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <vdr-tabbed-custom-fields\r\n        entityName=\"Zone\"\r\n        [customFields]=\"customFields\"\r\n        [customFieldsFormGroup]=\"form.get('customFields')\"\r\n        [readonly]=\"!(['UpdateSettings', 'UpdateZone'] | hasPermission)\"\r\n    ></vdr-tabbed-custom-fields>\r\n</form>\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)=\"save()\" [disabled]=\"!zone.name\" class=\"btn btn-primary\">\r\n        <span *ngIf=\"zone.id\">{{ 'settings.update-zone' | translate }}</span>\r\n        <span *ngIf=\"!zone.id\">{{ 'settings.create-zone' | translate }}</span>\r\n    </button>\r\n</ng-template>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
+];
+ZoneDetailDialogComponent.ctorParameters = () => [
+    { type: ServerConfigService },
+    { type: FormBuilder }
 ];
 
 class ZoneListComponent {
-    constructor(dataService, notificationService, modalService, route, router) {
+    constructor(dataService, notificationService, modalService, route, router, serverConfigService) {
         this.dataService = dataService;
         this.notificationService = notificationService;
         this.modalService = modalService;
         this.route = route;
         this.router = router;
+        this.serverConfigService = serverConfigService;
         this.selectedMemberIds = [];
     }
     ngOnInit() {
-        this.zones$ = this.dataService.settings.getZones().mapStream(data => data.zones);
+        const zonesQueryRef = this.dataService.settings.getZones().ref;
+        this.zones$ = zonesQueryRef.valueChanges.pipe(map(data => data.data.zones));
         const activeZoneId$ = this.route.paramMap.pipe(map(pm => pm.get('contents')), distinctUntilChanged(), tap(() => (this.selectedMemberIds = [])));
         this.activeZone$ = combineLatest(this.zones$, activeZoneId$).pipe(map(([zones, activeZoneId]) => {
             if (activeZoneId) {
                 return zones.find(z => z.id === activeZoneId);
             }
         }));
+        this.availableLanguages$ = this.serverConfigService.getAvailableLanguages();
+        this.contentLanguage$ = this.dataService.client
+            .uiState()
+            .mapStream(({ uiState }) => uiState.contentLanguage)
+            .pipe(tap(() => zonesQueryRef.refetch()));
+    }
+    setLanguage(code) {
+        this.dataService.client.setContentLanguage(code).subscribe();
     }
     create() {
         this.modalService
             .fromComponent(ZoneDetailDialogComponent, { locals: { zone: { name: '' } } })
-            .pipe(switchMap(name => name ? this.dataService.settings.createZone({ name, memberIds: [] }) : EMPTY), 
+            .pipe(switchMap(result => result ? this.dataService.settings.createZone(Object.assign(Object.assign({}, result), { memberIds: [] })) : EMPTY), 
         // refresh list
         switchMap(() => this.dataService.settings.getZones().single$))
             .subscribe(() => {
@@ -2247,7 +2271,7 @@ class ZoneListComponent {
     update(zone) {
         this.modalService
             .fromComponent(ZoneDetailDialogComponent, { locals: { zone } })
-            .pipe(switchMap(name => name ? this.dataService.settings.updateZone({ id: zone.id, name }) : EMPTY))
+            .pipe(switchMap(result => result ? this.dataService.settings.updateZone(Object.assign({ id: zone.id }, result)) : EMPTY))
             .subscribe(() => {
             this.notificationService.success(marker('common.notify-update-success'), {
                 entity: 'Zone',
@@ -2303,7 +2327,7 @@ class ZoneListComponent {
 ZoneListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-zone-list',
-                template: "<vdr-action-bar>\r\n    <vdr-ab-left> </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"zone-list\"></vdr-action-bar-items>\r\n        <button class=\"btn btn-primary\" *vdrIfPermissions=\"['CreateSettings', 'CreateZone']\" (click)=\"create()\">\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'settings.create-new-zone' | translate }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n<div class=\"zone-wrapper\">\r\n    <table class=\"table zone-list\">\r\n        <tbody>\r\n            <tr *ngFor=\"let zone of zones$ | async\" [class.active]=\"zone.id === (activeZone$ | async)?.id\">\r\n                <td class=\"left align-middle\"><vdr-entity-info [entity]=\"zone\"></vdr-entity-info></td>\r\n                <td class=\"left align-middle\"><vdr-chip [colorFrom]=\"zone.name\">{{ zone.name }}</vdr-chip></td>\r\n                <td class=\"text-right align-middle\">\r\n                    <a\r\n                        class=\"btn btn-link btn-sm\"\r\n                        [routerLink]=\"['./', { contents: zone.id }]\"\r\n                        queryParamsHandling=\"preserve\"\r\n                    >\r\n                        <clr-icon shape=\"view-list\"></clr-icon>\r\n                        {{ 'settings.view-zone-members' | translate }}\r\n                    </a>\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                    <button class=\"btn btn-link btn-sm\" (click)=\"update(zone)\">\r\n                        <clr-icon shape=\"edit\"></clr-icon>\r\n                        {{ 'common.edit' | translate }}\r\n                    </button>\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                    <vdr-dropdown>\r\n                        <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                            {{ 'common.actions' | translate }}\r\n                            <clr-icon shape=\"caret down\"></clr-icon>\r\n                        </button>\r\n                        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                            <button\r\n                                class=\"button\"\r\n                                vdrDropdownItem\r\n                                (click)=\"delete(zone.id)\"\r\n                                [disabled]=\"!(['DeleteSettings', 'DeleteZone'] | hasPermission)\"\r\n                            >\r\n                                <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                {{ 'common.delete' | translate }}\r\n                            </button>\r\n                        </vdr-dropdown-menu>\r\n                    </vdr-dropdown>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n    <div class=\"zone-members\" [class.expanded]=\"activeZone$ | async\">\r\n        <ng-container *ngIf=\"activeZone$ | async as activeZone\">\r\n            <vdr-zone-member-list\r\n                [members]=\"activeZone.members\"\r\n                [selectedMemberIds]=\"selectedMemberIds\"\r\n                (selectionChange)=\"selectedMemberIds = $event\"\r\n            >\r\n                <div *vdrZoneMemberListHeader>\r\n                    <div class=\"flex\">\r\n                        <div class=\"header-title-row\">\r\n                            {{ activeZone.name }} ({{ activeZone.members.length }})\r\n                        </div>\r\n                        <div class=\"flex-spacer\"></div>\r\n                        <button type=\"button\" class=\"close-button\" (click)=\"closeMembers()\">\r\n                            <clr-icon shape=\"close\"></clr-icon>\r\n                        </button>\r\n                    </div>\r\n                    <div class=\"controls\">\r\n                        <vdr-dropdown>\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"btn btn-secondary btn-sm\"\r\n                                vdrDropdownTrigger\r\n                                [disabled]=\"selectedMemberIds.length === 0\"\r\n                            >\r\n                                {{ 'common.with-selected' | translate }}\r\n                                <clr-icon shape=\"caret down\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                <button\r\n                                    type=\"button\"\r\n                                    class=\"delete-button\"\r\n                                    (click)=\"removeFromZone(activeZone, selectedMemberIds)\"\r\n                                    vdrDropdownItem\r\n                                    [disabled]=\"!(['UpdateSettings', 'UpdateZone'] | hasPermission)\"\r\n                                >\r\n                                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                    {{ 'settings.remove-from-zone' | translate }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                        <button class=\"btn btn-secondary btn-sm\" (click)=\"addToZone(activeZone)\">\r\n                            {{ 'settings.add-countries-to-zone' | translate: { zoneName: activeZone.name } }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                <div *vdrZoneMemberControls=\"let member = member\">\r\n                    <vdr-dropdown>\r\n                        <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                            {{ 'common.actions' | translate }}\r\n                            <clr-icon shape=\"caret down\"></clr-icon>\r\n                        </button>\r\n                        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                            <a\r\n                                type=\"button\"\r\n                                [routerLink]=\"['/settings', 'countries', member.id]\"\r\n                                vdrDropdownItem\r\n                            >\r\n                                <clr-icon shape=\"edit\"></clr-icon>\r\n                                {{ 'common.edit' | translate }}\r\n                            </a>\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"delete-button\"\r\n                                (click)=\"removeFromZone(activeZone, [member.id])\"\r\n                                vdrDropdownItem\r\n                                [disabled]=\"!(['UpdateSettings', 'UpdateZone'] | hasPermission)\"\r\n                            >\r\n                                <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                {{ 'settings.remove-from-zone' | translate }}\r\n                            </button>\r\n                        </vdr-dropdown-menu>\r\n                    </vdr-dropdown>\r\n                </div>\r\n            </vdr-zone-member-list>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n",
+                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"zone-list\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *vdrIfPermissions=\"['CreateSettings', 'CreateZone']\"\r\n            (click)=\"create()\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'settings.create-new-zone' | translate }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n<div class=\"zone-wrapper\">\r\n    <div class=\"zone-list\">\r\n        <table class=\"table mt0\">\r\n            <tbody>\r\n                <tr\r\n                    *ngFor=\"let zone of zones$ | async\"\r\n                    [class.active]=\"zone.id === (activeZone$ | async)?.id\"\r\n                >\r\n                    <td class=\"left align-middle\"><vdr-entity-info [entity]=\"zone\"></vdr-entity-info></td>\r\n                    <td class=\"left align-middle\">\r\n                        <vdr-chip [colorFrom]=\"zone.name\">{{ zone.name }}</vdr-chip>\r\n                    </td>\r\n                    <td class=\"text-right align-middle\">\r\n                        <a\r\n                            class=\"btn btn-link btn-sm\"\r\n                            [routerLink]=\"['./', { contents: zone.id }]\"\r\n                            queryParamsHandling=\"preserve\"\r\n                        >\r\n                            <clr-icon shape=\"view-list\"></clr-icon>\r\n                            {{ 'settings.view-zone-members' | translate }}\r\n                        </a>\r\n                    </td>\r\n                    <td class=\"align-middle\">\r\n                        <button class=\"btn btn-link btn-sm\" (click)=\"update(zone)\">\r\n                            <clr-icon shape=\"edit\"></clr-icon>\r\n                            {{ 'common.edit' | translate }}\r\n                        </button>\r\n                    </td>\r\n                    <td class=\"align-middle\">\r\n                        <vdr-dropdown>\r\n                            <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                                {{ 'common.actions' | translate }}\r\n                                <clr-icon shape=\"caret down\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                <button\r\n                                    class=\"button\"\r\n                                    vdrDropdownItem\r\n                                    (click)=\"delete(zone.id)\"\r\n                                    [disabled]=\"!(['DeleteSettings', 'DeleteZone'] | hasPermission)\"\r\n                                >\r\n                                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                    {{ 'common.delete' | translate }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    <div class=\"zone-members\" [class.expanded]=\"activeZone$ | async\">\r\n        <ng-container *ngIf=\"activeZone$ | async as activeZone\">\r\n            <vdr-zone-member-list\r\n                [members]=\"activeZone.members\"\r\n                [selectedMemberIds]=\"selectedMemberIds\"\r\n                (selectionChange)=\"selectedMemberIds = $event\"\r\n            >\r\n                <div *vdrZoneMemberListHeader>\r\n                    <div class=\"flex\">\r\n                        <div class=\"header-title-row\">\r\n                            {{ activeZone.name }} ({{ activeZone.members.length }})\r\n                        </div>\r\n                        <div class=\"flex-spacer\"></div>\r\n                        <button type=\"button\" class=\"close-button\" (click)=\"closeMembers()\">\r\n                            <clr-icon shape=\"close\"></clr-icon>\r\n                        </button>\r\n                    </div>\r\n                    <div class=\"controls\">\r\n                        <vdr-dropdown>\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"btn btn-secondary btn-sm\"\r\n                                vdrDropdownTrigger\r\n                                [disabled]=\"selectedMemberIds.length === 0\"\r\n                            >\r\n                                {{ 'common.with-selected' | translate }}\r\n                                <clr-icon shape=\"caret down\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                <button\r\n                                    type=\"button\"\r\n                                    class=\"delete-button\"\r\n                                    (click)=\"removeFromZone(activeZone, selectedMemberIds)\"\r\n                                    vdrDropdownItem\r\n                                    [disabled]=\"!(['UpdateSettings', 'UpdateZone'] | hasPermission)\"\r\n                                >\r\n                                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                    {{ 'settings.remove-from-zone' | translate }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                        <button class=\"btn btn-secondary btn-sm\" (click)=\"addToZone(activeZone)\">\r\n                            {{ 'settings.add-countries-to-zone' | translate: { zoneName: activeZone.name } }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                <div *vdrZoneMemberControls=\"let member = member\">\r\n                    <vdr-dropdown>\r\n                        <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                            {{ 'common.actions' | translate }}\r\n                            <clr-icon shape=\"caret down\"></clr-icon>\r\n                        </button>\r\n                        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                            <a\r\n                                type=\"button\"\r\n                                [routerLink]=\"['/settings', 'countries', member.id]\"\r\n                                vdrDropdownItem\r\n                            >\r\n                                <clr-icon shape=\"edit\"></clr-icon>\r\n                                {{ 'common.edit' | translate }}\r\n                            </a>\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"delete-button\"\r\n                                (click)=\"removeFromZone(activeZone, [member.id])\"\r\n                                vdrDropdownItem\r\n                                [disabled]=\"!(['UpdateSettings', 'UpdateZone'] | hasPermission)\"\r\n                            >\r\n                                <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                {{ 'settings.remove-from-zone' | translate }}\r\n                            </button>\r\n                        </vdr-dropdown-menu>\r\n                    </vdr-dropdown>\r\n                </div>\r\n            </vdr-zone-member-list>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".zone-wrapper{display:flex;height:calc(100% - 50px)}.zone-wrapper .zone-list{flex:1;overflow:auto;margin-top:0}.zone-wrapper .zone-list tr.active{background-color:var(--color-component-bg-200)}.zone-members{height:100%;width:0;opacity:0;visibility:hidden;overflow:auto;transition:width .3s,opacity .2s .3s,visibility 0s .3s}.zone-members.expanded{width:40vw;visibility:visible;opacity:1;padding-left:12px}.zone-members .close-button{margin:0;background:none;border:none;cursor:pointer}.zone-members ::ng-deep table.table{margin-top:0}.zone-members ::ng-deep table.table th{top:0}.zone-members .controls{display:flex;justify-content:space-between}\n"]
             },] }
@@ -2313,7 +2337,8 @@ ZoneListComponent.ctorParameters = () => [
     { type: NotificationService },
     { type: ModalService },
     { type: ActivatedRoute },
-    { type: Router }
+    { type: Router },
+    { type: ServerConfigService }
 ];
 
 class ZoneMemberControlsDirective {