@vendure/admin-ui 3.0.3 → 3.0.4

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

@@ -24,10 +24,10 @@ class ZoneMemberControlsDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ZoneMemberControlsDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: ZoneMemberControlsDirective, selector: "[vdrZoneMemberControls]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneMemberControlsDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ZoneMemberControlsDirective, selector: "[vdrZoneMemberControls]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ZoneMemberControlsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneMemberControlsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdrZoneMemberControls]',
@@ -38,10 +38,10 @@ class ZoneMemberListHeaderDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ZoneMemberListHeaderDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: ZoneMemberListHeaderDirective, selector: "[vdrZoneMemberListHeader]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneMemberListHeaderDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ZoneMemberListHeaderDirective, selector: "[vdrZoneMemberListHeader]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ZoneMemberListHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneMemberListHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdrZoneMemberListHeader]',
@@ -106,10 +106,10 @@ class ZoneMemberListComponent {
     refresh() {
         this.refresh$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ZoneMemberListComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ZoneMemberListComponent, selector: "vdr-zone-member-list", inputs: { locationId: "locationId", members: "members", selectedMemberIds: "selectedMemberIds", activeZone: "activeZone" }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ZoneMemberListHeaderDirective, descendants: true }, { propertyName: "controlsTemplate", first: true, predicate: ZoneMemberControlsDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<vdr-data-table-2\r\n    [id]=\"locationId\"\r\n    [items]=\"filteredMembers$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage\"\r\n    [currentPage]=\"currentPage\"\r\n    (itemsPerPageChange)=\"itemsPerPage = $event\"\r\n    (pageChange)=\"currentPage = $event\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        [locationId]=\"locationId\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"filterTermControl\"\r\n        [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n    ></vdr-dt2-search>\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\">\r\n        <ng-template let-member=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['/settings/countries', member.id]\"\r\n                ><span> {{ member.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.code }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-member=\"item\">\r\n            <vdr-chip  *ngIf=\"member.enabled\" colorType=\"success\">{{ 'common.enabled' | translate }}</vdr-chip>\r\n            <vdr-chip  *ngIf=\"!member.enabled\" colorType=\"warning\">{{ 'common.disabled' | translate }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-data-table-2>\r\n", styles: [".members-header{background-color:var(--color-component-bg-100);position:sticky;top:0;padding:6px;z-index:5;border-bottom:1px solid var(--color-component-border-200)}.members-header .header-title-row{display:flex;justify-content:space-between;align-items:center}.members-header .clr-input{width:100%}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneMemberListComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZoneMemberListComponent, selector: "vdr-zone-member-list", inputs: { locationId: "locationId", members: "members", selectedMemberIds: "selectedMemberIds", activeZone: "activeZone" }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ZoneMemberListHeaderDirective, descendants: true }, { propertyName: "controlsTemplate", first: true, predicate: ZoneMemberControlsDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<vdr-data-table-2\r\n    [id]=\"locationId\"\r\n    [items]=\"filteredMembers$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage\"\r\n    [currentPage]=\"currentPage\"\r\n    (itemsPerPageChange)=\"itemsPerPage = $event\"\r\n    (pageChange)=\"currentPage = $event\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        [locationId]=\"locationId\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"filterTermControl\"\r\n        [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n    ></vdr-dt2-search>\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\">\r\n        <ng-template let-member=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['/settings/countries', member.id]\"\r\n                ><span> {{ member.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.code }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-member=\"item\">\r\n            <vdr-chip  *ngIf=\"member.enabled\" colorType=\"success\">{{ 'common.enabled' | translate }}</vdr-chip>\r\n            <vdr-chip  *ngIf=\"!member.enabled\" colorType=\"warning\">{{ 'common.disabled' | translate }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-data-table-2>\r\n", styles: [".members-header{background-color:var(--color-component-bg-100);position:sticky;top:0;padding:6px;z-index:5;border-bottom:1px solid var(--color-component-border-200)}.members-header .header-title-row{display:flex;justify-content:space-between;align-items:center}.members-header .clr-input{width:100%}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ZoneMemberListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneMemberListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-zone-member-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-data-table-2\r\n    [id]=\"locationId\"\r\n    [items]=\"filteredMembers$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage\"\r\n    [currentPage]=\"currentPage\"\r\n    (itemsPerPageChange)=\"itemsPerPage = $event\"\r\n    (pageChange)=\"currentPage = $event\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        [locationId]=\"locationId\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"filterTermControl\"\r\n        [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n    ></vdr-dt2-search>\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\">\r\n        <ng-template let-member=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['/settings/countries', member.id]\"\r\n                ><span> {{ member.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\">\r\n        <ng-template let-member=\"item\">\r\n            {{ member.code }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-member=\"item\">\r\n            <vdr-chip  *ngIf=\"member.enabled\" colorType=\"success\">{{ 'common.enabled' | translate }}</vdr-chip>\r\n            <vdr-chip  *ngIf=\"!member.enabled\" colorType=\"warning\">{{ 'common.disabled' | translate }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-data-table-2>\r\n", styles: [".members-header{background-color:var(--color-component-bg-100);position:sticky;top:0;padding:6px;z-index:5;border-bottom:1px solid var(--color-component-border-200)}.members-header .header-title-row{display:flex;justify-content:space-between;align-items:center}.members-header .clr-input{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1.DataService }], propDecorators: { locationId: [{
@@ -170,10 +170,10 @@ class AddCountryToZoneDialogComponent {
     add() {
         this.resolveWith(this.selectedMemberIds);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AddCountryToZoneDialogComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AddCountryToZoneDialogComponent, selector: "vdr-add-country-to-zone-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'settings.add-countries-to-zone' | translate: { zoneName: zoneName } }}</ng-template>\r\n\r\n<vdr-zone-member-list\r\n    [members]=\"availableCountries$ | async\"\r\n    [selectedMemberIds]=\"selectedMemberIds\"\r\n    (selectionChange)=\"selectedMemberIds = $event\"\r\n>\r\n</vdr-zone-member-list>\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)=\"add()\" [disabled]=\"!selectedMemberIds.length\" class=\"btn btn-primary\">\r\n        {{ 'settings.add-countries-to-zone' | translate: { zoneName: zoneName } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: ZoneMemberListComponent, selector: "vdr-zone-member-list", inputs: ["locationId", "members", "selectedMemberIds", "activeZone"], outputs: ["selectionChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddCountryToZoneDialogComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AddCountryToZoneDialogComponent, selector: "vdr-add-country-to-zone-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'settings.add-countries-to-zone' | translate: { zoneName: zoneName } }}</ng-template>\r\n\r\n<vdr-zone-member-list\r\n    [members]=\"availableCountries$ | async\"\r\n    [selectedMemberIds]=\"selectedMemberIds\"\r\n    (selectionChange)=\"selectedMemberIds = $event\"\r\n>\r\n</vdr-zone-member-list>\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)=\"add()\" [disabled]=\"!selectedMemberIds.length\" class=\"btn btn-primary\">\r\n        {{ 'settings.add-countries-to-zone' | translate: { zoneName: zoneName } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: ZoneMemberListComponent, selector: "vdr-zone-member-list", inputs: ["locationId", "members", "selectedMemberIds", "activeZone"], outputs: ["selectionChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AddCountryToZoneDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddCountryToZoneDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-add-country-to-zone-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'settings.add-countries-to-zone' | translate: { zoneName: zoneName } }}</ng-template>\r\n\r\n<vdr-zone-member-list\r\n    [members]=\"availableCountries$ | async\"\r\n    [selectedMemberIds]=\"selectedMemberIds\"\r\n    (selectionChange)=\"selectedMemberIds = $event\"\r\n>\r\n</vdr-zone-member-list>\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)=\"add()\" [disabled]=\"!selectedMemberIds.length\" class=\"btn btn-primary\">\r\n        {{ 'settings.add-countries-to-zone' | translate: { zoneName: zoneName } }}\r\n    </button>\r\n</ng-template>\r\n" }]
         }], ctorParameters: () => [{ type: i1.DataService }] });
@@ -238,10 +238,10 @@ class PermissionGridComponent {
     extractCrudDescription(def) {
         return def.description.replace(/Grants permission to [\w]+/, 'Grants permissions on');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PermissionGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PermissionGridComponent, selector: "vdr-permission-grid", inputs: { permissionDefinitions: "permissionDefinitions", activePermissions: "activePermissions", readonly: "readonly" }, outputs: { permissionChange: "permissionChange" }, ngImport: i0, template: "<table class=\"table\">\r\n    <tbody>\r\n        <tr *ngFor=\"let section of gridData\">\r\n            <td class=\"permission-group left\">\r\n                <div><strong>{{ section.label | translate }}</strong></div>\r\n                <small>{{ section.description | translate }}</small><br>\r\n                <button *ngIf=\"1 < section.permissions.length && !readonly\" class=\"button-small\" (click)=\"toggleAll(section.permissions)\">\r\n                    {{ 'common.toggle-all' | translate }}\r\n                </button>\r\n            </td>\r\n            <td *ngFor=\"let permission of section.permissions\" [attr.colspan]=\"section.permissions.length === 1 ? 4 : 1\">\r\n                <vdr-select-toggle\r\n                    size=\"small\"\r\n                    [title]=\"permission.description\"\r\n                    [label]=\"permission.name\"\r\n                    [disabled]=\"readonly\"\r\n                    [selected]=\"activePermissions?.includes(permission.name)\"\r\n                    (selectedChange)=\"setPermission(permission.name, $event)\"\r\n                ></vdr-select-toggle>\r\n            </td>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n", styles: [":host{display:block}td.permission-group{max-width:300px;background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PermissionGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PermissionGridComponent, selector: "vdr-permission-grid", inputs: { permissionDefinitions: "permissionDefinitions", activePermissions: "activePermissions", readonly: "readonly" }, outputs: { permissionChange: "permissionChange" }, ngImport: i0, template: "<table class=\"table\">\r\n    <tbody>\r\n        <tr *ngFor=\"let section of gridData\">\r\n            <td class=\"permission-group left\">\r\n                <div><strong>{{ section.label | translate }}</strong></div>\r\n                <small>{{ section.description | translate }}</small><br>\r\n                <button *ngIf=\"1 < section.permissions.length && !readonly\" class=\"button-small\" (click)=\"toggleAll(section.permissions)\">\r\n                    {{ 'common.toggle-all' | translate }}\r\n                </button>\r\n            </td>\r\n            <td *ngFor=\"let permission of section.permissions\" [attr.colspan]=\"section.permissions.length === 1 ? 4 : 1\">\r\n                <vdr-select-toggle\r\n                    size=\"small\"\r\n                    [title]=\"permission.description\"\r\n                    [label]=\"permission.name\"\r\n                    [disabled]=\"readonly\"\r\n                    [selected]=\"activePermissions?.includes(permission.name)\"\r\n                    (selectedChange)=\"setPermission(permission.name, $event)\"\r\n                ></vdr-select-toggle>\r\n            </td>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n", styles: [":host{display:block}td.permission-group{max-width:300px;background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PermissionGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PermissionGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-permission-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"table\">\r\n    <tbody>\r\n        <tr *ngFor=\"let section of gridData\">\r\n            <td class=\"permission-group left\">\r\n                <div><strong>{{ section.label | translate }}</strong></div>\r\n                <small>{{ section.description | translate }}</small><br>\r\n                <button *ngIf=\"1 < section.permissions.length && !readonly\" class=\"button-small\" (click)=\"toggleAll(section.permissions)\">\r\n                    {{ 'common.toggle-all' | translate }}\r\n                </button>\r\n            </td>\r\n            <td *ngFor=\"let permission of section.permissions\" [attr.colspan]=\"section.permissions.length === 1 ? 4 : 1\">\r\n                <vdr-select-toggle\r\n                    size=\"small\"\r\n                    [title]=\"permission.description\"\r\n                    [label]=\"permission.name\"\r\n                    [disabled]=\"readonly\"\r\n                    [selected]=\"activePermissions?.includes(permission.name)\"\r\n                    (selectedChange)=\"setPermission(permission.name, $event)\"\r\n                ></vdr-select-toggle>\r\n            </td>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n", styles: [":host{display:block}td.permission-group{max-width:300px;background-color:var(--color-component-bg-200)}\n"] }]
         }], propDecorators: { permissionDefinitions: [{
@@ -436,10 +436,10 @@ class AdminDetailComponent extends TypedBaseDetailComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AdminDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AdminDetailComponent, selector: "vdr-admin-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"administrator-detail\" />\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-action-bar-dropdown-menu locationId=\"administrator-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field\r\n                        [label]=\"'settings.email-address-or-identifier' | translate\"\r\n                        for=\"emailAddress\"\r\n                        class=\"form-grid-span\"\r\n                    >\r\n                        <input\r\n                            id=\"emailAddress\"\r\n                            type=\"text\"\r\n                            formControlName=\"emailAddress\"\r\n                            [readonly]=\"!(['CreateAdministrator', '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]=\"!(['CreateAdministrator', '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]=\"!(['CreateAdministrator', 'UpdateAdministrator'] | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        *ngIf=\"isNew$ | async\"\r\n                        [label]=\"'settings.password' | translate\"\r\n                        for=\"password\"\r\n                    >\r\n                        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        *ngIf=\"\r\n                            !(isNew$ | async) &&\r\n                            (['CreateAdministrator', 'UpdateAdministrator'] | hasPermission)\r\n                        \"\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                </div>\r\n            </vdr-card>\r\n\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\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            </vdr-card>\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        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n    <vdr-page-block>\r\n        <vdr-card [title]=\"'settings.roles' | translate\">\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 mt-2\" 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        </vdr-card>\r\n    </vdr-page-block>\r\n</form>\r\n", styles: ["ul.nav{overflow-x:auto;overflow-y:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: PermissionGridComponent, selector: "vdr-permission-grid", inputs: ["permissionDefinitions", "activePermissions", "readonly"], outputs: ["permissionChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AdminDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AdminDetailComponent, selector: "vdr-admin-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"administrator-detail\" />\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-action-bar-dropdown-menu locationId=\"administrator-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field\r\n                        [label]=\"'settings.email-address-or-identifier' | translate\"\r\n                        for=\"emailAddress\"\r\n                        class=\"form-grid-span\"\r\n                    >\r\n                        <input\r\n                            id=\"emailAddress\"\r\n                            type=\"text\"\r\n                            formControlName=\"emailAddress\"\r\n                            [readonly]=\"!(['CreateAdministrator', '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]=\"!(['CreateAdministrator', '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]=\"!(['CreateAdministrator', 'UpdateAdministrator'] | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        *ngIf=\"isNew$ | async\"\r\n                        [label]=\"'settings.password' | translate\"\r\n                        for=\"password\"\r\n                    >\r\n                        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        *ngIf=\"\r\n                            !(isNew$ | async) &&\r\n                            (['CreateAdministrator', 'UpdateAdministrator'] | hasPermission)\r\n                        \"\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                </div>\r\n            </vdr-card>\r\n\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\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            </vdr-card>\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        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n    <vdr-page-block>\r\n        <vdr-card [title]=\"'settings.roles' | translate\">\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 mt-2\" 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        </vdr-card>\r\n    </vdr-page-block>\r\n</form>\r\n", styles: ["ul.nav{overflow-x:auto;overflow-y:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: PermissionGridComponent, selector: "vdr-permission-grid", inputs: ["permissionDefinitions", "activePermissions", "readonly"], outputs: ["permissionChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AdminDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AdminDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-admin-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"administrator-detail\" />\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-action-bar-dropdown-menu locationId=\"administrator-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field\r\n                        [label]=\"'settings.email-address-or-identifier' | translate\"\r\n                        for=\"emailAddress\"\r\n                        class=\"form-grid-span\"\r\n                    >\r\n                        <input\r\n                            id=\"emailAddress\"\r\n                            type=\"text\"\r\n                            formControlName=\"emailAddress\"\r\n                            [readonly]=\"!(['CreateAdministrator', '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]=\"!(['CreateAdministrator', '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]=\"!(['CreateAdministrator', 'UpdateAdministrator'] | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        *ngIf=\"isNew$ | async\"\r\n                        [label]=\"'settings.password' | translate\"\r\n                        for=\"password\"\r\n                    >\r\n                        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        *ngIf=\"\r\n                            !(isNew$ | async) &&\r\n                            (['CreateAdministrator', 'UpdateAdministrator'] | hasPermission)\r\n                        \"\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                </div>\r\n            </vdr-card>\r\n\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\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            </vdr-card>\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        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n    <vdr-page-block>\r\n        <vdr-card [title]=\"'settings.roles' | translate\">\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 mt-2\" 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        </vdr-card>\r\n    </vdr-page-block>\r\n</form>\r\n", styles: ["ul.nav{overflow-x:auto;overflow-y:hidden}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i2$1.FormBuilder }, { type: i1.NotificationService }] });
@@ -484,6 +484,7 @@ const GET_ADMINISTRATOR_LIST = gql `
 class AdministratorListComponent extends TypedBaseListComponent {
     constructor() {
         super();
+        this.dataTableListId = 'administrator-list';
         this.customFields = this.getCustomFieldConfig('Administrator');
         this.filters = this.createFilterCollection()
             .addIdFilter()
@@ -553,12 +554,12 @@ class AdministratorListComponent extends TypedBaseListComponent {
             },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AdministratorListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AdministratorListComponent, selector: "vdr-administrator-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"administrator-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateAdministrator']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'admin.create-new-administrator' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"administrator-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"administrator-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"administrator-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-administrator=\"item\">\r\n            {{ administrator.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-administrator=\"item\">\r\n            {{ administrator.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-administrator=\"item\">\r\n            {{ administrator.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('lastName')\">\r\n        <ng-template let-administrator=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', administrator.id]\"\r\n                ><span>{{ administrator.firstName }} {{ administrator.lastName }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.email-address' | translate\" id=\"email-address\" [sort]=\"sorts.get('emailAddress')\">\r\n        <ng-template let-administrator=\"item\">\r\n            {{ administrator.emailAddress }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.roles' | translate\" id=\"roles\">\r\n        <ng-template let-administrator=\"item\">\r\n            <vdr-chip *ngFor=\"let role of administrator.user.roles\">{{ role.description }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".search-input{min-width:300px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AdministratorListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AdministratorListComponent, selector: "vdr-administrator-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"administrator-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateAdministrator']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'admin.create-new-administrator' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"administrator-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"administrator-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-administrator=\"item\">\r\n            {{ administrator.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-administrator=\"item\">\r\n            {{ administrator.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-administrator=\"item\">\r\n            {{ administrator.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('lastName')\">\r\n        <ng-template let-administrator=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', administrator.id]\"\r\n                ><span>{{ administrator.firstName }} {{ administrator.lastName }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.email-address' | translate\" id=\"email-address\" [sort]=\"sorts.get('emailAddress')\">\r\n        <ng-template let-administrator=\"item\">\r\n            {{ administrator.emailAddress }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.roles' | translate\" id=\"roles\">\r\n        <ng-template let-administrator=\"item\">\r\n            <vdr-chip *ngFor=\"let role of administrator.user.roles\">{{ role.description }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".search-input{min-width:300px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AdministratorListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AdministratorListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-administrator-list', template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"administrator-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateAdministrator']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'admin.create-new-administrator' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"administrator-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"administrator-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"administrator-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-administrator=\"item\">\r\n            {{ administrator.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-administrator=\"item\">\r\n            {{ administrator.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-administrator=\"item\">\r\n            {{ administrator.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('lastName')\">\r\n        <ng-template let-administrator=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', administrator.id]\"\r\n                ><span>{{ administrator.firstName }} {{ administrator.lastName }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.email-address' | translate\" id=\"email-address\" [sort]=\"sorts.get('emailAddress')\">\r\n        <ng-template let-administrator=\"item\">\r\n            {{ administrator.emailAddress }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.roles' | translate\" id=\"roles\">\r\n        <ng-template let-administrator=\"item\">\r\n            <vdr-chip *ngFor=\"let role of administrator.user.roles\">{{ role.description }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".search-input{min-width:300px}\n"] }]
+            args: [{ selector: 'vdr-administrator-list', template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"administrator-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateAdministrator']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'admin.create-new-administrator' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"administrator-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"administrator-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-administrator=\"item\">\r\n            {{ administrator.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-administrator=\"item\">\r\n            {{ administrator.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-administrator=\"item\">\r\n            {{ administrator.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('lastName')\">\r\n        <ng-template let-administrator=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', administrator.id]\"\r\n                ><span>{{ administrator.firstName }} {{ administrator.lastName }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.email-address' | translate\" id=\"email-address\" [sort]=\"sorts.get('emailAddress')\">\r\n        <ng-template let-administrator=\"item\">\r\n            {{ administrator.emailAddress }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.roles' | translate\" id=\"roles\">\r\n        <ng-template let-administrator=\"item\">\r\n            <vdr-chip *ngFor=\"let role of administrator.user.roles\">{{ role.description }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".search-input{min-width:300px}\n"] }]
         }], ctorParameters: () => [] });
 
 const GET_CHANNEL_DETAIL = gql `
@@ -742,10 +743,10 @@ class ChannelDetailComponent extends TypedBaseDetailComponent {
             .map(b => b.toString(16).padStart(2, '0'))
             .join('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChannelDetailComponent, deps: [{ token: i1.ServerConfigService }, { token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ChannelDetailComponent, selector: "vdr-channel-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left></vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"channel-detail\" />\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-action-bar-dropdown-menu locationId=\"channel-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field\r\n                        class=\"form-grid-span\"\r\n                        *ngIf=\"entity?.code !== DEFAULT_CHANNEL_CODE\"\r\n                        [label]=\"'common.code' | translate\"\r\n                        for=\"code\"\r\n                    >\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-item\r\n                        class=\"form-grid-span\"\r\n                        *ngIf=\"entity?.code === DEFAULT_CHANNEL_CODE\"\r\n                        [label]=\"'common.code' | translate\"\r\n                    >\r\n                        {{ entity?.code | channelCodeToLabel | translate }}\r\n                    </vdr-form-item>\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\r\n                    <vdr-form-field [label]=\"'common.seller' | translate\" for=\"sellerId\">\r\n                        <select\r\n                            name=\"sellerId\"\r\n                            formControlName=\"sellerId\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        >\r\n                            <option selected value style=\"display: none\"></option>\r\n                            <option *ngFor=\"let seller of sellers$ | async\" [value]=\"seller.id\">\r\n                                {{ seller.name }}\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'common.available-languages' | translate\"\r\n                        for=\"availableLanguageCodes\"\r\n                    >\r\n                        <vdr-language-code-selector\r\n                            formControlName=\"availableLanguageCodes\"\r\n                            [languageCodes]=\"availableLanguageCodes$ | async\"\r\n                        ></vdr-language-code-selector>\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'common.available-currencies' | translate\"\r\n                        for=\"availableCurrencyCodes\"\r\n                    >\r\n                        <vdr-currency-code-selector\r\n                            formControlName=\"availableCurrencyCodes\"\r\n                        ></vdr-currency-code-selector>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'settings.defaults' | translate\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.default-language' | translate\" for=\"defaultLanguage\">\r\n                        <select\r\n                            name=\"defaultLanguageCode\"\r\n                            formControlName=\"defaultLanguageCode\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        >\r\n                            <option\r\n                                *ngFor=\"let languageCode of detailForm.value.availableLanguageCodes\"\r\n                                [value]=\"languageCode\"\r\n                            >\r\n                                {{ languageCode | localeLanguageName }} ({{ languageCode | uppercase }})\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'settings.default-currency' | translate\" for=\"defaultCurrency\">\r\n                        <select\r\n                            name=\"defaultCurrencyCode\"\r\n                            formControlName=\"defaultCurrencyCode\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        >\r\n                            <option\r\n                                *ngFor=\"let code of detailForm.value.availableCurrencyCodes\"\r\n                                [value]=\"code\"\r\n                            >\r\n                                {{ code | localeCurrencyName }}\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n                    <div>\r\n                        <vdr-form-field\r\n                            [label]=\"'settings.default-tax-zone' | translate\"\r\n                            for=\"defaultTaxZoneId\"\r\n                        >\r\n                            <vdr-zone-selector\r\n                                formControlName=\"defaultTaxZoneId\"\r\n                                [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                            ></vdr-zone-selector>\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                    </div>\r\n\r\n                    <div>\r\n                        <vdr-form-field\r\n                            [label]=\"'settings.default-shipping-zone' | translate\"\r\n                            for=\"defaultShippingZoneId\"\r\n                        >\r\n                            <vdr-zone-selector\r\n                                name=\"defaultShippingZoneId\"\r\n                                formControlName=\"defaultShippingZoneId\"\r\n                                [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                            ></vdr-zone-selector>\r\n                        </vdr-form-field>\r\n                        <clr-alert\r\n                            *ngIf=\"detailForm.value.code && !detailForm.value.defaultShippingZoneId\"\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-shipping-zone-set' | translate }}\r\n                                </span>\r\n                            </clr-alert-item>\r\n                        </clr-alert>\r\n                    </div>\r\n                    <vdr-form-field\r\n                        [label]=\"'settings.prices-include-tax' | translate\"\r\n                        for=\"pricesIncludeTax\"\r\n                    >\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                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Channel\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: ["clr-alert{max-width:30rem;margin-bottom:12px}\n"], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i3.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i3.ClrAlertText, selector: ".alert-text" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.FormItemComponent, selector: "vdr-form-item", inputs: ["label", "tooltip"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: i1.ZoneSelectorComponent, selector: "vdr-zone-selector", inputs: ["readonly", "transformControlValueAccessorValue"], outputs: ["selectedValuesChange"] }, { kind: "component", type: i1.CurrencyCodeSelectorComponent, selector: "vdr-currency-code-selector" }, { kind: "component", type: i1.LanguageCodeSelectorComponent, selector: "vdr-language-code-selector", inputs: ["languageCodes"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyNamePipe, name: "localeCurrencyName" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }, { kind: "pipe", type: i1.LocaleLanguageNamePipe, name: "localeLanguageName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChannelDetailComponent, deps: [{ token: i1.ServerConfigService }, { token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ChannelDetailComponent, selector: "vdr-channel-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left></vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"channel-detail\" />\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-action-bar-dropdown-menu locationId=\"channel-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field\r\n                        class=\"form-grid-span\"\r\n                        *ngIf=\"entity?.code !== DEFAULT_CHANNEL_CODE\"\r\n                        [label]=\"'common.code' | translate\"\r\n                        for=\"code\"\r\n                    >\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-item\r\n                        class=\"form-grid-span\"\r\n                        *ngIf=\"entity?.code === DEFAULT_CHANNEL_CODE\"\r\n                        [label]=\"'common.code' | translate\"\r\n                    >\r\n                        {{ entity?.code | channelCodeToLabel | translate }}\r\n                    </vdr-form-item>\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\r\n                    <vdr-form-field [label]=\"'common.seller' | translate\" for=\"sellerId\">\r\n                        <select\r\n                            name=\"sellerId\"\r\n                            formControlName=\"sellerId\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        >\r\n                            <option selected value style=\"display: none\"></option>\r\n                            <option *ngFor=\"let seller of sellers$ | async\" [value]=\"seller.id\">\r\n                                {{ seller.name }}\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'common.available-languages' | translate\"\r\n                        for=\"availableLanguageCodes\"\r\n                    >\r\n                        <vdr-language-code-selector\r\n                            formControlName=\"availableLanguageCodes\"\r\n                            [languageCodes]=\"availableLanguageCodes$ | async\"\r\n                        ></vdr-language-code-selector>\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'common.available-currencies' | translate\"\r\n                        for=\"availableCurrencyCodes\"\r\n                    >\r\n                        <vdr-currency-code-selector\r\n                            formControlName=\"availableCurrencyCodes\"\r\n                        ></vdr-currency-code-selector>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'settings.defaults' | translate\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.default-language' | translate\" for=\"defaultLanguage\">\r\n                        <select\r\n                            name=\"defaultLanguageCode\"\r\n                            formControlName=\"defaultLanguageCode\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        >\r\n                            <option\r\n                                *ngFor=\"let languageCode of detailForm.value.availableLanguageCodes\"\r\n                                [value]=\"languageCode\"\r\n                            >\r\n                                {{ languageCode | localeLanguageName }} ({{ languageCode | uppercase }})\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'settings.default-currency' | translate\" for=\"defaultCurrency\">\r\n                        <select\r\n                            name=\"defaultCurrencyCode\"\r\n                            formControlName=\"defaultCurrencyCode\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        >\r\n                            <option\r\n                                *ngFor=\"let code of detailForm.value.availableCurrencyCodes\"\r\n                                [value]=\"code\"\r\n                            >\r\n                                {{ code | localeCurrencyName }}\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n                    <div>\r\n                        <vdr-form-field\r\n                            [label]=\"'settings.default-tax-zone' | translate\"\r\n                            for=\"defaultTaxZoneId\"\r\n                        >\r\n                            <vdr-zone-selector\r\n                                formControlName=\"defaultTaxZoneId\"\r\n                                [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                            ></vdr-zone-selector>\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                    </div>\r\n\r\n                    <div>\r\n                        <vdr-form-field\r\n                            [label]=\"'settings.default-shipping-zone' | translate\"\r\n                            for=\"defaultShippingZoneId\"\r\n                        >\r\n                            <vdr-zone-selector\r\n                                name=\"defaultShippingZoneId\"\r\n                                formControlName=\"defaultShippingZoneId\"\r\n                                [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                            ></vdr-zone-selector>\r\n                        </vdr-form-field>\r\n                        <clr-alert\r\n                            *ngIf=\"detailForm.value.code && !detailForm.value.defaultShippingZoneId\"\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-shipping-zone-set' | translate }}\r\n                                </span>\r\n                            </clr-alert-item>\r\n                        </clr-alert>\r\n                    </div>\r\n                    <vdr-form-field\r\n                        [label]=\"'settings.prices-include-tax' | translate\"\r\n                        for=\"pricesIncludeTax\"\r\n                    >\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                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Channel\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: ["clr-alert{max-width:30rem;margin-bottom:12px}\n"], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i3.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i3.ClrAlertText, selector: ".alert-text" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.FormItemComponent, selector: "vdr-form-item", inputs: ["label", "tooltip"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: i1.ZoneSelectorComponent, selector: "vdr-zone-selector", inputs: ["readonly", "transformControlValueAccessorValue"], outputs: ["selectedValuesChange"] }, { kind: "component", type: i1.CurrencyCodeSelectorComponent, selector: "vdr-currency-code-selector" }, { kind: "component", type: i1.LanguageCodeSelectorComponent, selector: "vdr-language-code-selector", inputs: ["languageCodes"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyNamePipe, name: "localeCurrencyName" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }, { kind: "pipe", type: i1.LocaleLanguageNamePipe, name: "localeLanguageName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChannelDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChannelDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-channel-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left></vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"channel-detail\" />\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-action-bar-dropdown-menu locationId=\"channel-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field\r\n                        class=\"form-grid-span\"\r\n                        *ngIf=\"entity?.code !== DEFAULT_CHANNEL_CODE\"\r\n                        [label]=\"'common.code' | translate\"\r\n                        for=\"code\"\r\n                    >\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-item\r\n                        class=\"form-grid-span\"\r\n                        *ngIf=\"entity?.code === DEFAULT_CHANNEL_CODE\"\r\n                        [label]=\"'common.code' | translate\"\r\n                    >\r\n                        {{ entity?.code | channelCodeToLabel | translate }}\r\n                    </vdr-form-item>\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\r\n                    <vdr-form-field [label]=\"'common.seller' | translate\" for=\"sellerId\">\r\n                        <select\r\n                            name=\"sellerId\"\r\n                            formControlName=\"sellerId\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        >\r\n                            <option selected value style=\"display: none\"></option>\r\n                            <option *ngFor=\"let seller of sellers$ | async\" [value]=\"seller.id\">\r\n                                {{ seller.name }}\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'common.available-languages' | translate\"\r\n                        for=\"availableLanguageCodes\"\r\n                    >\r\n                        <vdr-language-code-selector\r\n                            formControlName=\"availableLanguageCodes\"\r\n                            [languageCodes]=\"availableLanguageCodes$ | async\"\r\n                        ></vdr-language-code-selector>\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'common.available-currencies' | translate\"\r\n                        for=\"availableCurrencyCodes\"\r\n                    >\r\n                        <vdr-currency-code-selector\r\n                            formControlName=\"availableCurrencyCodes\"\r\n                        ></vdr-currency-code-selector>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'settings.defaults' | translate\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.default-language' | translate\" for=\"defaultLanguage\">\r\n                        <select\r\n                            name=\"defaultLanguageCode\"\r\n                            formControlName=\"defaultLanguageCode\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        >\r\n                            <option\r\n                                *ngFor=\"let languageCode of detailForm.value.availableLanguageCodes\"\r\n                                [value]=\"languageCode\"\r\n                            >\r\n                                {{ languageCode | localeLanguageName }} ({{ languageCode | uppercase }})\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'settings.default-currency' | translate\" for=\"defaultCurrency\">\r\n                        <select\r\n                            name=\"defaultCurrencyCode\"\r\n                            formControlName=\"defaultCurrencyCode\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        >\r\n                            <option\r\n                                *ngFor=\"let code of detailForm.value.availableCurrencyCodes\"\r\n                                [value]=\"code\"\r\n                            >\r\n                                {{ code | localeCurrencyName }}\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n                    <div>\r\n                        <vdr-form-field\r\n                            [label]=\"'settings.default-tax-zone' | translate\"\r\n                            for=\"defaultTaxZoneId\"\r\n                        >\r\n                            <vdr-zone-selector\r\n                                formControlName=\"defaultTaxZoneId\"\r\n                                [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                            ></vdr-zone-selector>\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                    </div>\r\n\r\n                    <div>\r\n                        <vdr-form-field\r\n                            [label]=\"'settings.default-shipping-zone' | translate\"\r\n                            for=\"defaultShippingZoneId\"\r\n                        >\r\n                            <vdr-zone-selector\r\n                                name=\"defaultShippingZoneId\"\r\n                                formControlName=\"defaultShippingZoneId\"\r\n                                [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                            ></vdr-zone-selector>\r\n                        </vdr-form-field>\r\n                        <clr-alert\r\n                            *ngIf=\"detailForm.value.code && !detailForm.value.defaultShippingZoneId\"\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-shipping-zone-set' | translate }}\r\n                                </span>\r\n                            </clr-alert-item>\r\n                        </clr-alert>\r\n                    </div>\r\n                    <vdr-form-field\r\n                        [label]=\"'settings.prices-include-tax' | translate\"\r\n                        for=\"pricesIncludeTax\"\r\n                    >\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                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Channel\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: ["clr-alert{max-width:30rem;margin-bottom:12px}\n"] }]
         }], ctorParameters: () => [{ type: i1.ServerConfigService }, { type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i2$1.FormBuilder }, { type: i1.NotificationService }] });
@@ -778,6 +779,7 @@ const GET_CHANNEL_LIST = gql `
 class ChannelListComponent extends TypedBaseListComponent {
     constructor() {
         super();
+        this.dataTableListId = 'channel-list';
         this.customFields = this.getCustomFieldConfig('Channel');
         this.filters = this.createFilterCollection()
             .addIdFilter()
@@ -826,12 +828,12 @@ class ChannelListComponent extends TypedBaseListComponent {
     isDefaultChannel(channelCode) {
         return channelCode === DEFAULT_CHANNEL_CODE;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChannelListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ChannelListComponent, selector: "vdr-channel-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"channel-list\" />\r\n            <a class=\"btn btn-primary\" *vdrIfPermissions=\"['SuperAdmin', 'CreateChannel']\" [routerLink]=\"['./', 'create']\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-channel' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"channel-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"channel-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"channel-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-channel=\"item\">\r\n            {{ channel.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-channel=\"item\">\r\n            {{ channel.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-channel=\"item\">\r\n            {{ channel.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-channel=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', channel.id]\"\r\n                ><span>{{ channel.code | channelCodeToLabel | translate }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.channel-token' | translate\" id=\"channel-token\" [sort]=\"sorts.get('token')\">\r\n        <ng-template let-channel=\"item\">\r\n            {{ channel.token }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChannelListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ChannelListComponent, selector: "vdr-channel-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"channel-list\" />\r\n            <a class=\"btn btn-primary\" *vdrIfPermissions=\"['SuperAdmin', 'CreateChannel']\" [routerLink]=\"['./', 'create']\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-channel' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"channel-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"channel-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-channel=\"item\">\r\n            {{ channel.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-channel=\"item\">\r\n            {{ channel.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-channel=\"item\">\r\n            {{ channel.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-channel=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', channel.id]\"\r\n                ><span>{{ channel.code | channelCodeToLabel | translate }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.channel-token' | translate\" id=\"channel-token\" [sort]=\"sorts.get('token')\">\r\n        <ng-template let-channel=\"item\">\r\n            {{ channel.token }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChannelListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChannelListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-channel-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"channel-list\" />\r\n            <a class=\"btn btn-primary\" *vdrIfPermissions=\"['SuperAdmin', 'CreateChannel']\" [routerLink]=\"['./', 'create']\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-channel' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"channel-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"channel-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"channel-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-channel=\"item\">\r\n            {{ channel.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-channel=\"item\">\r\n            {{ channel.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-channel=\"item\">\r\n            {{ channel.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-channel=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', channel.id]\"\r\n                ><span>{{ channel.code | channelCodeToLabel | translate }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.channel-token' | translate\" id=\"channel-token\" [sort]=\"sorts.get('token')\">\r\n        <ng-template let-channel=\"item\">\r\n            {{ channel.token }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n" }]
+            args: [{ selector: 'vdr-channel-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"channel-list\" />\r\n            <a class=\"btn btn-primary\" *vdrIfPermissions=\"['SuperAdmin', 'CreateChannel']\" [routerLink]=\"['./', 'create']\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-channel' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"channel-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"channel-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-channel=\"item\">\r\n            {{ channel.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-channel=\"item\">\r\n            {{ channel.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-channel=\"item\">\r\n            {{ channel.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-channel=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', channel.id]\"\r\n                ><span>{{ channel.code | channelCodeToLabel | translate }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.channel-token' | translate\" id=\"channel-token\" [sort]=\"sorts.get('token')\">\r\n        <ng-template let-channel=\"item\">\r\n            {{ channel.token }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n" }]
         }], ctorParameters: () => [] });
 
 const GET_COUNTRY_DETAIL = gql `
@@ -939,10 +941,10 @@ class CountryDetailComponent extends TypedBaseDetailComponent {
             this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['customFields']), country, currentTranslation);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CountryDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CountryDetailComponent, selector: "vdr-country-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block\r\n    ><vdr-action-bar>\r\n        <vdr-ab-left>\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            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"country-detail\" />\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-action-bar-dropdown-menu locationId=\"country-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card>\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-card>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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.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                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Region\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CountryDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CountryDetailComponent, selector: "vdr-country-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block\r\n    ><vdr-action-bar>\r\n        <vdr-ab-left>\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            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"country-detail\" />\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-action-bar-dropdown-menu locationId=\"country-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card>\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-card>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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.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                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Region\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CountryDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CountryDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-country-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block\r\n    ><vdr-action-bar>\r\n        <vdr-ab-left>\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            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"country-detail\" />\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-action-bar-dropdown-menu locationId=\"country-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card>\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-card>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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.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                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Region\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i2$1.FormBuilder }, { type: i1.NotificationService }] });
@@ -977,6 +979,7 @@ const GET_COUNTRY_LIST = gql `
 class CountryListComponent extends TypedBaseListComponent {
     constructor() {
         super();
+        this.dataTableListId = 'country-list';
         this.customFields = this.getCustomFieldConfig('Region');
         this.filters = this.createFilterCollection()
             .addIdFilter()
@@ -1028,12 +1031,12 @@ class CountryListComponent extends TypedBaseListComponent {
             refreshListOnChanges: [this.filters.valueChanges, this.sorts.valueChanges],
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CountryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CountryListComponent, selector: "vdr-country-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <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            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"country-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateCountry']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-country' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"country-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"country-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"country-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-country=\"item\">\r\n            {{ country.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\"\r\n        id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-country=\"item\">\r\n            {{ country.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\"\r\n        id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-country=\"item\">\r\n            {{ country.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.name' | translate\"\r\n        id=\"name\"\r\n        [optional]=\"false\"\r\n        [sort]=\"sorts.get('name')\"\r\n    >\r\n        <ng-template let-country=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', country.id]\"\r\n                ><span>{{ country.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-country=\"item\">\r\n            {{ country.code }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-country=\"item\">\r\n            <vdr-chip *ngIf=\"country.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!country.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".search-input{margin-top:6px;min-width:300px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CountryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CountryListComponent, selector: "vdr-country-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <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            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"country-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateCountry']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-country' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"country-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"country-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-country=\"item\">\r\n            {{ country.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\"\r\n        id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-country=\"item\">\r\n            {{ country.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\"\r\n        id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-country=\"item\">\r\n            {{ country.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.name' | translate\"\r\n        id=\"name\"\r\n        [optional]=\"false\"\r\n        [sort]=\"sorts.get('name')\"\r\n    >\r\n        <ng-template let-country=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', country.id]\"\r\n                ><span>{{ country.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-country=\"item\">\r\n            {{ country.code }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-country=\"item\">\r\n            <vdr-chip *ngIf=\"country.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!country.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".search-input{margin-top:6px;min-width:300px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CountryListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CountryListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-country-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <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            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"country-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateCountry']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-country' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"country-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"country-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"country-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-country=\"item\">\r\n            {{ country.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\"\r\n        id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-country=\"item\">\r\n            {{ country.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\"\r\n        id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-country=\"item\">\r\n            {{ country.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.name' | translate\"\r\n        id=\"name\"\r\n        [optional]=\"false\"\r\n        [sort]=\"sorts.get('name')\"\r\n    >\r\n        <ng-template let-country=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', country.id]\"\r\n                ><span>{{ country.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-country=\"item\">\r\n            {{ country.code }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-country=\"item\">\r\n            <vdr-chip *ngIf=\"country.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!country.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".search-input{margin-top:6px;min-width:300px}\n"] }]
+            args: [{ selector: 'vdr-country-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <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            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"country-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateCountry']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-country' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"country-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"country-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-country=\"item\">\r\n            {{ country.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\"\r\n        id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-country=\"item\">\r\n            {{ country.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\"\r\n        id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-country=\"item\">\r\n            {{ country.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.name' | translate\"\r\n        id=\"name\"\r\n        [optional]=\"false\"\r\n        [sort]=\"sorts.get('name')\"\r\n    >\r\n        <ng-template let-country=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', country.id]\"\r\n                ><span>{{ country.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-country=\"item\">\r\n            {{ country.code }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-country=\"item\">\r\n            <vdr-chip *ngIf=\"country.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!country.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".search-input{margin-top:6px;min-width:300px}\n"] }]
         }], ctorParameters: () => [] });
 
 const GET_GLOBAL_SETTINGS_DETAIL = gql `
@@ -1118,10 +1121,10 @@ class GlobalSettingsComponent extends TypedBaseDetailComponent {
             this.setCustomFieldFormValues(this.customFields, this.detailForm.get('customFields'), entity);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GlobalSettingsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GlobalSettingsComponent, selector: "vdr-global-settings", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"global-setting-detail\" />\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-action-bar-dropdown-menu locationId=\"global-setting-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-block>\r\n        <vdr-card>\r\n            <div class=\"form-grid\">\r\n                <vdr-form-field\r\n                    [label]=\"'common.available-languages' | translate\"\r\n                    for=\"availableLanguages\"\r\n                    [tooltip]=\"'settings.global-available-languages-tooltip' | translate\"\r\n                >\r\n                    <vdr-language-code-selector\r\n                        formControlName=\"availableLanguages\"\r\n                        [languageCodes]=\"languageCodes\"\r\n                    ></vdr-language-code-selector>\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            </div>\r\n        </vdr-card>\r\n        <vdr-card\r\n            formGroupName=\"customFields\"\r\n            *ngIf=\"customFields.length\"\r\n            [title]=\"'common.custom-fields' | translate\"\r\n        >\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        </vdr-card>\r\n\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    </vdr-page-block>\r\n</form>\r\n", 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"], dependencies: [{ kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: i1.LanguageCodeSelectorComponent, selector: "vdr-language-code-selector", inputs: ["languageCodes"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GlobalSettingsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GlobalSettingsComponent, selector: "vdr-global-settings", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"global-setting-detail\" />\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-action-bar-dropdown-menu locationId=\"global-setting-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-block>\r\n        <vdr-card>\r\n            <div class=\"form-grid\">\r\n                <vdr-form-field\r\n                    [label]=\"'common.available-languages' | translate\"\r\n                    for=\"availableLanguages\"\r\n                    [tooltip]=\"'settings.global-available-languages-tooltip' | translate\"\r\n                >\r\n                    <vdr-language-code-selector\r\n                        formControlName=\"availableLanguages\"\r\n                        [languageCodes]=\"languageCodes\"\r\n                    ></vdr-language-code-selector>\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            </div>\r\n        </vdr-card>\r\n        <vdr-card\r\n            formGroupName=\"customFields\"\r\n            *ngIf=\"customFields.length\"\r\n            [title]=\"'common.custom-fields' | translate\"\r\n        >\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        </vdr-card>\r\n\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    </vdr-page-block>\r\n</form>\r\n", 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"], dependencies: [{ kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: i1.LanguageCodeSelectorComponent, selector: "vdr-language-code-selector", inputs: ["languageCodes"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GlobalSettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GlobalSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-global-settings', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"global-setting-detail\" />\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-action-bar-dropdown-menu locationId=\"global-setting-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-block>\r\n        <vdr-card>\r\n            <div class=\"form-grid\">\r\n                <vdr-form-field\r\n                    [label]=\"'common.available-languages' | translate\"\r\n                    for=\"availableLanguages\"\r\n                    [tooltip]=\"'settings.global-available-languages-tooltip' | translate\"\r\n                >\r\n                    <vdr-language-code-selector\r\n                        formControlName=\"availableLanguages\"\r\n                        [languageCodes]=\"languageCodes\"\r\n                    ></vdr-language-code-selector>\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            </div>\r\n        </vdr-card>\r\n        <vdr-card\r\n            formGroupName=\"customFields\"\r\n            *ngIf=\"customFields.length\"\r\n            [title]=\"'common.custom-fields' | translate\"\r\n        >\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        </vdr-card>\r\n\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    </vdr-page-block>\r\n</form>\r\n", 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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i2$1.FormBuilder }, { type: i1.NotificationService }] });
@@ -1310,10 +1313,10 @@ class PaymentMethodDetailComponent extends TypedBaseDetailComponent {
             this.setCustomFieldFormValues(this.customFields, this.detailForm.get('customFields'), paymentMethod, currentTranslation);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PaymentMethodDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PaymentMethodDetailComponent, selector: "vdr-payment-method-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block\r\n    ><vdr-action-bar>\r\n        <vdr-ab-left>\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            />\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"payment-method-detail\" />\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                [disabled]=\"detailForm.pristine || detailForm.invalid || !selectedHandler\"\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-action-bar-dropdown-menu locationId=\"payment-method-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card>\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            </vdr-card>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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(entity?.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                        class=\"form-grid-span\"\r\n                        formControlName=\"description\"\r\n                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        [label]=\"'common.description' | translate\"\r\n                    ></vdr-rich-text-editor>\r\n                </div>\r\n            </vdr-card>\r\n\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"PaymentMethod\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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            <vdr-card [title]=\"'settings.payment-eligibility-checker' | translate\">\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            </vdr-card>\r\n            <vdr-card [title]=\"'settings.payment-handler' | translate\">\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            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position", "hideDescription"], outputs: ["remove"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaymentMethodDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PaymentMethodDetailComponent, selector: "vdr-payment-method-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block\r\n    ><vdr-action-bar>\r\n        <vdr-ab-left>\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            />\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"payment-method-detail\" />\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                [disabled]=\"detailForm.pristine || detailForm.invalid || !selectedHandler\"\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-action-bar-dropdown-menu locationId=\"payment-method-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card>\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            </vdr-card>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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(entity?.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                        class=\"form-grid-span\"\r\n                        formControlName=\"description\"\r\n                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        [label]=\"'common.description' | translate\"\r\n                    ></vdr-rich-text-editor>\r\n                </div>\r\n            </vdr-card>\r\n\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"PaymentMethod\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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            <vdr-card [title]=\"'settings.payment-eligibility-checker' | translate\">\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            </vdr-card>\r\n            <vdr-card [title]=\"'settings.payment-handler' | translate\">\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            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position", "hideDescription"], outputs: ["remove"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PaymentMethodDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaymentMethodDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-payment-method-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block\r\n    ><vdr-action-bar>\r\n        <vdr-ab-left>\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            />\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"payment-method-detail\" />\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                [disabled]=\"detailForm.pristine || detailForm.invalid || !selectedHandler\"\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-action-bar-dropdown-menu locationId=\"payment-method-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card>\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            </vdr-card>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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(entity?.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                        class=\"form-grid-span\"\r\n                        formControlName=\"description\"\r\n                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        [label]=\"'common.description' | translate\"\r\n                    ></vdr-rich-text-editor>\r\n                </div>\r\n            </vdr-card>\r\n\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"PaymentMethod\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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            <vdr-card [title]=\"'settings.payment-eligibility-checker' | translate\">\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            </vdr-card>\r\n            <vdr-card [title]=\"'settings.payment-handler' | translate\">\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            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i2$1.FormBuilder }, { type: i1.NotificationService }] });
@@ -1393,6 +1396,7 @@ const GET_PAYMENT_METHOD_LIST = gql `
 class PaymentMethodListComponent extends TypedBaseListComponent {
     constructor() {
         super();
+        this.dataTableListId = 'payment-method-list';
         this.customFields = this.getCustomFieldConfig('PaymentMethod');
         this.filters = this.createFilterCollection()
             .addIdFilter()
@@ -1452,12 +1456,12 @@ class PaymentMethodListComponent extends TypedBaseListComponent {
             refreshListOnChanges: [this.filters.valueChanges, this.sorts.valueChanges],
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PaymentMethodListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PaymentMethodListComponent, selector: "vdr-payment-method-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <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            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"payment-method-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreatePaymentMethod']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-payment-method' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"payment-method-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    id=\"payment-method-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"payment-method-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    ></vdr-dt2-search>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.id' | translate\"\r\n        id=\"id\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('id')\"\r\n    >\r\n        <ng-template let-paymentMethod=\"item\">\r\n            {{ paymentMethod.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\"\r\n        id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-paymentMethod=\"item\">\r\n            {{ paymentMethod.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\"\r\n        id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-paymentMethod=\"item\">\r\n            {{ paymentMethod.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.name' | translate\"\r\n        id=\"name\"\r\n        [optional]=\"false\"\r\n        [sort]=\"sorts.get('name')\"\r\n    >\r\n        <ng-template let-paymentMethod=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', paymentMethod.id]\"\r\n                ><span>{{ paymentMethod.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-paymentMethod=\"item\">\r\n            {{ paymentMethod.code }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-paymentMethod=\"item\">\r\n            <vdr-chip *ngIf=\"paymentMethod.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!paymentMethod.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaymentMethodListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PaymentMethodListComponent, selector: "vdr-payment-method-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <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            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"payment-method-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreatePaymentMethod']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-payment-method' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"payment-method-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"payment-method-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    ></vdr-dt2-search>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.id' | translate\"\r\n        id=\"id\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('id')\"\r\n    >\r\n        <ng-template let-paymentMethod=\"item\">\r\n            {{ paymentMethod.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\"\r\n        id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-paymentMethod=\"item\">\r\n            {{ paymentMethod.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\"\r\n        id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-paymentMethod=\"item\">\r\n            {{ paymentMethod.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.name' | translate\"\r\n        id=\"name\"\r\n        [optional]=\"false\"\r\n        [sort]=\"sorts.get('name')\"\r\n    >\r\n        <ng-template let-paymentMethod=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', paymentMethod.id]\"\r\n                ><span>{{ paymentMethod.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-paymentMethod=\"item\">\r\n            {{ paymentMethod.code }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-paymentMethod=\"item\">\r\n            <vdr-chip *ngIf=\"paymentMethod.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!paymentMethod.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PaymentMethodListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaymentMethodListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-payment-method-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <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            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"payment-method-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreatePaymentMethod']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-payment-method' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"payment-method-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    id=\"payment-method-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"payment-method-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    ></vdr-dt2-search>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.id' | translate\"\r\n        id=\"id\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('id')\"\r\n    >\r\n        <ng-template let-paymentMethod=\"item\">\r\n            {{ paymentMethod.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\"\r\n        id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-paymentMethod=\"item\">\r\n            {{ paymentMethod.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\"\r\n        id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-paymentMethod=\"item\">\r\n            {{ paymentMethod.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.name' | translate\"\r\n        id=\"name\"\r\n        [optional]=\"false\"\r\n        [sort]=\"sorts.get('name')\"\r\n    >\r\n        <ng-template let-paymentMethod=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', paymentMethod.id]\"\r\n                ><span>{{ paymentMethod.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-paymentMethod=\"item\">\r\n            {{ paymentMethod.code }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-paymentMethod=\"item\">\r\n            <vdr-chip *ngIf=\"paymentMethod.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!paymentMethod.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n" }]
+            args: [{ selector: 'vdr-payment-method-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <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            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"payment-method-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreatePaymentMethod']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-payment-method' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"payment-method-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"payment-method-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    ></vdr-dt2-search>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.id' | translate\"\r\n        id=\"id\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('id')\"\r\n    >\r\n        <ng-template let-paymentMethod=\"item\">\r\n            {{ paymentMethod.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\"\r\n        id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-paymentMethod=\"item\">\r\n            {{ paymentMethod.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\"\r\n        id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-paymentMethod=\"item\">\r\n            {{ paymentMethod.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.name' | translate\"\r\n        id=\"name\"\r\n        [optional]=\"false\"\r\n        [sort]=\"sorts.get('name')\"\r\n    >\r\n        <ng-template let-paymentMethod=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', paymentMethod.id]\"\r\n                ><span>{{ paymentMethod.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-paymentMethod=\"item\">\r\n            {{ paymentMethod.code }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-paymentMethod=\"item\">\r\n            <vdr-chip *ngIf=\"paymentMethod.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!paymentMethod.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n" }]
         }], ctorParameters: () => [] });
 
 const GET_PROFILE_DETAIL = gql `
@@ -1537,10 +1541,10 @@ class ProfileComponent extends TypedBaseDetailComponent {
             this.setCustomFieldFormValues(this.customFields, this.detailForm.get('customFields'), administrator);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProfileComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ProfileComponent, selector: "vdr-profile", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left></vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"profile\"></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</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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\r\n                        *ngIf=\"isNew$ | async\"\r\n                        [label]=\"'settings.password' | translate\"\r\n                        for=\"password\"\r\n                    >\r\n                        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\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                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\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            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"administrator-profile\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProfileComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ProfileComponent, selector: "vdr-profile", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left></vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"profile\"></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</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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\r\n                        *ngIf=\"isNew$ | async\"\r\n                        [label]=\"'settings.password' | translate\"\r\n                        for=\"password\"\r\n                    >\r\n                        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\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                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\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            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"administrator-profile\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProfileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProfileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-profile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left></vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"profile\"></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</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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\r\n                        *ngIf=\"isNew$ | async\"\r\n                        [label]=\"'settings.password' | translate\"\r\n                        for=\"password\"\r\n                    >\r\n                        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\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                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\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            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"administrator-profile\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i2$1.FormBuilder }, { type: i1.NotificationService }] });
@@ -1642,10 +1646,10 @@ class RoleDetailComponent extends TypedBaseDetailComponent {
         // cause did not yield a solution, therefore this next line.
         this.changeDetector.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RoleDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RoleDetailComponent, selector: "vdr-role-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left></vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"role-detail\" />\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-action-bar-dropdown-menu locationId=\"role-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\">\r\n                        <input\r\n                            id=\"description\"\r\n                            type=\"text\"\r\n                            formControlName=\"description\"\r\n                            [readonly]=\"!('UpdateAdministrator' | hasPermission)\"\r\n                            (input)=\"updateCode($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]=\"'UpdateAdministrator' | hasPermission\"\r\n                    >\r\n                        <input\r\n                            id=\"code\"\r\n                            type=\"text\"\r\n                            formControlName=\"code\"\r\n                            [readonly]=\"!('UpdateAdministrator' | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n    <vdr-page-block class=\"mt-2\">\r\n        <vdr-card [title]=\"'settings.permissions' | translate\">\r\n            <vdr-form-field [label]=\"'settings.channel' | translate\">\r\n                <vdr-channel-assignment-control\r\n                    formControlName=\"channelIds\"\r\n                    [vdrDisabled]=\"!('UpdateAdministrator' | hasPermission)\"\r\n                ></vdr-channel-assignment-control>\r\n            </vdr-form-field>\r\n            <vdr-permission-grid\r\n                class=\"mt-2\"\r\n                [permissionDefinitions]=\"permissionDefinitions\"\r\n                [activePermissions]=\"detailForm.get('permissions')?.value\"\r\n                (permissionChange)=\"setPermission($event)\"\r\n                [readonly]=\"!('UpdateAdministrator' | hasPermission)\"\r\n            ></vdr-permission-grid>\r\n        </vdr-card>\r\n    </vdr-page-block>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.ChannelAssignmentControlComponent, selector: "vdr-channel-assignment-control", inputs: ["multiple", "includeDefaultChannel", "disableChannelIds"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: PermissionGridComponent, selector: "vdr-permission-grid", inputs: ["permissionDefinitions", "activePermissions", "readonly"], outputs: ["permissionChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RoleDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RoleDetailComponent, selector: "vdr-role-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left></vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"role-detail\" />\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-action-bar-dropdown-menu locationId=\"role-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\">\r\n                        <input\r\n                            id=\"description\"\r\n                            type=\"text\"\r\n                            formControlName=\"description\"\r\n                            [readonly]=\"!('UpdateAdministrator' | hasPermission)\"\r\n                            (input)=\"updateCode($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]=\"'UpdateAdministrator' | hasPermission\"\r\n                    >\r\n                        <input\r\n                            id=\"code\"\r\n                            type=\"text\"\r\n                            formControlName=\"code\"\r\n                            [readonly]=\"!('UpdateAdministrator' | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n    <vdr-page-block class=\"mt-2\">\r\n        <vdr-card [title]=\"'settings.permissions' | translate\">\r\n            <vdr-form-field [label]=\"'settings.channel' | translate\">\r\n                <vdr-channel-assignment-control\r\n                    formControlName=\"channelIds\"\r\n                    [vdrDisabled]=\"!('UpdateAdministrator' | hasPermission)\"\r\n                ></vdr-channel-assignment-control>\r\n            </vdr-form-field>\r\n            <vdr-permission-grid\r\n                class=\"mt-2\"\r\n                [permissionDefinitions]=\"permissionDefinitions\"\r\n                [activePermissions]=\"detailForm.get('permissions')?.value\"\r\n                (permissionChange)=\"setPermission($event)\"\r\n                [readonly]=\"!('UpdateAdministrator' | hasPermission)\"\r\n            ></vdr-permission-grid>\r\n        </vdr-card>\r\n    </vdr-page-block>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.ChannelAssignmentControlComponent, selector: "vdr-channel-assignment-control", inputs: ["multiple", "includeDefaultChannel", "disableChannelIds"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: PermissionGridComponent, selector: "vdr-permission-grid", inputs: ["permissionDefinitions", "activePermissions", "readonly"], outputs: ["permissionChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RoleDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RoleDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-role-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left></vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"role-detail\" />\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-action-bar-dropdown-menu locationId=\"role-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\">\r\n                        <input\r\n                            id=\"description\"\r\n                            type=\"text\"\r\n                            formControlName=\"description\"\r\n                            [readonly]=\"!('UpdateAdministrator' | hasPermission)\"\r\n                            (input)=\"updateCode($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]=\"'UpdateAdministrator' | hasPermission\"\r\n                    >\r\n                        <input\r\n                            id=\"code\"\r\n                            type=\"text\"\r\n                            formControlName=\"code\"\r\n                            [readonly]=\"!('UpdateAdministrator' | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n    <vdr-page-block class=\"mt-2\">\r\n        <vdr-card [title]=\"'settings.permissions' | translate\">\r\n            <vdr-form-field [label]=\"'settings.channel' | translate\">\r\n                <vdr-channel-assignment-control\r\n                    formControlName=\"channelIds\"\r\n                    [vdrDisabled]=\"!('UpdateAdministrator' | hasPermission)\"\r\n                ></vdr-channel-assignment-control>\r\n            </vdr-form-field>\r\n            <vdr-permission-grid\r\n                class=\"mt-2\"\r\n                [permissionDefinitions]=\"permissionDefinitions\"\r\n                [activePermissions]=\"detailForm.get('permissions')?.value\"\r\n                (permissionChange)=\"setPermission($event)\"\r\n                [readonly]=\"!('UpdateAdministrator' | hasPermission)\"\r\n            ></vdr-permission-grid>\r\n        </vdr-card>\r\n    </vdr-page-block>\r\n</form>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i2$1.FormBuilder }, { type: i1.NotificationService }] });
@@ -1671,6 +1675,7 @@ const GET_ROLE_LIST = gql `
 class RoleListComponent extends TypedBaseListComponent {
     constructor() {
         super();
+        this.dataTableListId = 'role-list';
         this.initialLimit = 3;
         this.displayLimit = {};
         this.filters = this.createFilterCollection()
@@ -1720,12 +1725,12 @@ class RoleListComponent extends TypedBaseListComponent {
     isDefaultRole(role) {
         return role.code === SUPER_ADMIN_ROLE_CODE || role.code === CUSTOMER_ROLE_CODE;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RoleListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RoleListComponent, selector: "vdr-role-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"role-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateAdministrator']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-role' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"role-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    id=\"role-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"role-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-role=\"item\">\r\n            {{ role.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-role=\"item\">\r\n            {{ role.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-role=\"item\">\r\n            {{ role.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.description' | translate\" id=\"description\"\r\n        [optional]=\"false\"\r\n        [sort]=\"sorts.get('description')\"\r\n    >\r\n        <ng-template let-role=\"item\">\r\n            <a\r\n                *ngIf=\"!isDefaultRole(role); else defaultRole\"\r\n                class=\"button-ghost\"\r\n                [routerLink]=\"['./', role.id]\"\r\n                ><span>{{ role.description }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n            <ng-template #defaultRole>\r\n                {{ role.description }}\r\n            </ng-template>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-role=\"item\">\r\n            <span *ngIf=\"!isDefaultRole(role)\">{{ role.code }}</span>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.channel' | translate\" id=\"channel\">\r\n        <ng-template let-role=\"item\">\r\n            <ng-container *ngIf=\"!isDefaultRole(role)\">\r\n                <vdr-chip *ngFor=\"let channel of role.channels\">\r\n                    <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                    <div class=\"ml-1\">{{ channel.code | channelCodeToLabel | translate }}</div>\r\n                </vdr-chip>\r\n            </ng-container>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.permissions' | translate\" id=\"permissions\">\r\n        <ng-template let-role=\"item\">\r\n            <ng-container *ngIf=\"!isDefaultRole(role); else defaultRole\">\r\n                <div class=\"permissions-list\">\r\n                    <vdr-chip\r\n                        *ngFor=\"let permission of role.permissions | slice : 0 : displayLimit[role.id] || 3\"\r\n                        >{{ permission }}</vdr-chip\r\n                    >\r\n                    <button\r\n                        class=\"button-small\"\r\n                        *ngIf=\"role.permissions.length > initialLimit\"\r\n                        (click)=\"toggleDisplayLimit(role)\"\r\n                    >\r\n                        <ng-container\r\n                            *ngIf=\"(displayLimit[role.id] || 0) < role.permissions.length; else collapse\"\r\n                        >\r\n                            <clr-icon shape=\"plus\"></clr-icon>\r\n                            {{ role.permissions.length - initialLimit }}\r\n                        </ng-container>\r\n                        <ng-template #collapse>\r\n                            <clr-icon shape=\"minus\"></clr-icon>\r\n                        </ng-template>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #defaultRole>\r\n                <span class=\"default-role-label\">{{ 'settings.default-role-label' | translate }}</span>\r\n            </ng-template>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-data-table-2>\r\n", styles: [".default-role-label{color:var(--color-grey-400)}.permissions-list{max-width:500px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RoleListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RoleListComponent, selector: "vdr-role-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"role-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateAdministrator']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-role' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"role-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"role-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-role=\"item\">\r\n            {{ role.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-role=\"item\">\r\n            {{ role.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-role=\"item\">\r\n            {{ role.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.description' | translate\" id=\"description\"\r\n        [optional]=\"false\"\r\n        [sort]=\"sorts.get('description')\"\r\n    >\r\n        <ng-template let-role=\"item\">\r\n            <a\r\n                *ngIf=\"!isDefaultRole(role); else defaultRole\"\r\n                class=\"button-ghost\"\r\n                [routerLink]=\"['./', role.id]\"\r\n                ><span>{{ role.description }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n            <ng-template #defaultRole>\r\n                {{ role.description }}\r\n            </ng-template>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-role=\"item\">\r\n            <span *ngIf=\"!isDefaultRole(role)\">{{ role.code }}</span>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.channel' | translate\" id=\"channel\">\r\n        <ng-template let-role=\"item\">\r\n            <ng-container *ngIf=\"!isDefaultRole(role)\">\r\n                <vdr-chip *ngFor=\"let channel of role.channels\">\r\n                    <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                    <div class=\"ml-1\">{{ channel.code | channelCodeToLabel | translate }}</div>\r\n                </vdr-chip>\r\n            </ng-container>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.permissions' | translate\" id=\"permissions\">\r\n        <ng-template let-role=\"item\">\r\n            <ng-container *ngIf=\"!isDefaultRole(role); else defaultRole\">\r\n                <div class=\"permissions-list\">\r\n                    <vdr-chip\r\n                        *ngFor=\"let permission of role.permissions | slice : 0 : displayLimit[role.id] || 3\"\r\n                        >{{ permission }}</vdr-chip\r\n                    >\r\n                    <button\r\n                        class=\"button-small\"\r\n                        *ngIf=\"role.permissions.length > initialLimit\"\r\n                        (click)=\"toggleDisplayLimit(role)\"\r\n                    >\r\n                        <ng-container\r\n                            *ngIf=\"(displayLimit[role.id] || 0) < role.permissions.length; else collapse\"\r\n                        >\r\n                            <clr-icon shape=\"plus\"></clr-icon>\r\n                            {{ role.permissions.length - initialLimit }}\r\n                        </ng-container>\r\n                        <ng-template #collapse>\r\n                            <clr-icon shape=\"minus\"></clr-icon>\r\n                        </ng-template>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #defaultRole>\r\n                <span class=\"default-role-label\">{{ 'settings.default-role-label' | translate }}</span>\r\n            </ng-template>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-data-table-2>\r\n", styles: [".default-role-label{color:var(--color-grey-400)}.permissions-list{max-width:500px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RoleListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RoleListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-role-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"role-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateAdministrator']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-role' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"role-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    id=\"role-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"role-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-role=\"item\">\r\n            {{ role.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-role=\"item\">\r\n            {{ role.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-role=\"item\">\r\n            {{ role.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.description' | translate\" id=\"description\"\r\n        [optional]=\"false\"\r\n        [sort]=\"sorts.get('description')\"\r\n    >\r\n        <ng-template let-role=\"item\">\r\n            <a\r\n                *ngIf=\"!isDefaultRole(role); else defaultRole\"\r\n                class=\"button-ghost\"\r\n                [routerLink]=\"['./', role.id]\"\r\n                ><span>{{ role.description }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n            <ng-template #defaultRole>\r\n                {{ role.description }}\r\n            </ng-template>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-role=\"item\">\r\n            <span *ngIf=\"!isDefaultRole(role)\">{{ role.code }}</span>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.channel' | translate\" id=\"channel\">\r\n        <ng-template let-role=\"item\">\r\n            <ng-container *ngIf=\"!isDefaultRole(role)\">\r\n                <vdr-chip *ngFor=\"let channel of role.channels\">\r\n                    <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                    <div class=\"ml-1\">{{ channel.code | channelCodeToLabel | translate }}</div>\r\n                </vdr-chip>\r\n            </ng-container>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.permissions' | translate\" id=\"permissions\">\r\n        <ng-template let-role=\"item\">\r\n            <ng-container *ngIf=\"!isDefaultRole(role); else defaultRole\">\r\n                <div class=\"permissions-list\">\r\n                    <vdr-chip\r\n                        *ngFor=\"let permission of role.permissions | slice : 0 : displayLimit[role.id] || 3\"\r\n                        >{{ permission }}</vdr-chip\r\n                    >\r\n                    <button\r\n                        class=\"button-small\"\r\n                        *ngIf=\"role.permissions.length > initialLimit\"\r\n                        (click)=\"toggleDisplayLimit(role)\"\r\n                    >\r\n                        <ng-container\r\n                            *ngIf=\"(displayLimit[role.id] || 0) < role.permissions.length; else collapse\"\r\n                        >\r\n                            <clr-icon shape=\"plus\"></clr-icon>\r\n                            {{ role.permissions.length - initialLimit }}\r\n                        </ng-container>\r\n                        <ng-template #collapse>\r\n                            <clr-icon shape=\"minus\"></clr-icon>\r\n                        </ng-template>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #defaultRole>\r\n                <span class=\"default-role-label\">{{ 'settings.default-role-label' | translate }}</span>\r\n            </ng-template>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-data-table-2>\r\n", styles: [".default-role-label{color:var(--color-grey-400)}.permissions-list{max-width:500px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}\n"] }]
+            args: [{ selector: 'vdr-role-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"role-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateAdministrator']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-role' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"role-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"role-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-role=\"item\">\r\n            {{ role.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-role=\"item\">\r\n            {{ role.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-role=\"item\">\r\n            {{ role.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.description' | translate\" id=\"description\"\r\n        [optional]=\"false\"\r\n        [sort]=\"sorts.get('description')\"\r\n    >\r\n        <ng-template let-role=\"item\">\r\n            <a\r\n                *ngIf=\"!isDefaultRole(role); else defaultRole\"\r\n                class=\"button-ghost\"\r\n                [routerLink]=\"['./', role.id]\"\r\n                ><span>{{ role.description }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n            <ng-template #defaultRole>\r\n                {{ role.description }}\r\n            </ng-template>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-role=\"item\">\r\n            <span *ngIf=\"!isDefaultRole(role)\">{{ role.code }}</span>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.channel' | translate\" id=\"channel\">\r\n        <ng-template let-role=\"item\">\r\n            <ng-container *ngIf=\"!isDefaultRole(role)\">\r\n                <vdr-chip *ngFor=\"let channel of role.channels\">\r\n                    <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                    <div class=\"ml-1\">{{ channel.code | channelCodeToLabel | translate }}</div>\r\n                </vdr-chip>\r\n            </ng-container>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.permissions' | translate\" id=\"permissions\">\r\n        <ng-template let-role=\"item\">\r\n            <ng-container *ngIf=\"!isDefaultRole(role); else defaultRole\">\r\n                <div class=\"permissions-list\">\r\n                    <vdr-chip\r\n                        *ngFor=\"let permission of role.permissions | slice : 0 : displayLimit[role.id] || 3\"\r\n                        >{{ permission }}</vdr-chip\r\n                    >\r\n                    <button\r\n                        class=\"button-small\"\r\n                        *ngIf=\"role.permissions.length > initialLimit\"\r\n                        (click)=\"toggleDisplayLimit(role)\"\r\n                    >\r\n                        <ng-container\r\n                            *ngIf=\"(displayLimit[role.id] || 0) < role.permissions.length; else collapse\"\r\n                        >\r\n                            <clr-icon shape=\"plus\"></clr-icon>\r\n                            {{ role.permissions.length - initialLimit }}\r\n                        </ng-container>\r\n                        <ng-template #collapse>\r\n                            <clr-icon shape=\"minus\"></clr-icon>\r\n                        </ng-template>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #defaultRole>\r\n                <span class=\"default-role-label\">{{ 'settings.default-role-label' | translate }}</span>\r\n            </ng-template>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-data-table-2>\r\n", styles: [".default-role-label{color:var(--color-grey-400)}.permissions-list{max-width:500px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}\n"] }]
         }], ctorParameters: () => [] });
 
 const GET_SELLER_DETAIL = gql `
@@ -1828,10 +1833,10 @@ class SellerDetailComponent extends TypedBaseDetailComponent {
             this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['customFields']), entity);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SellerDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SellerDetailComponent, selector: "vdr-seller-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"seller-detail\" />\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', 'UpdateSeller']\"\r\n                    [disabled]=\"!saveButtonEnabled()\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n            <vdr-action-bar-dropdown-menu locationId=\"seller-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            id=\"name\"\r\n                            type=\"text\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"name\"\r\n                        />\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Seller\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"seller-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: ["clr-alert{max-width:30rem;margin-bottom:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SellerDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SellerDetailComponent, selector: "vdr-seller-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"seller-detail\" />\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', 'UpdateSeller']\"\r\n                    [disabled]=\"!saveButtonEnabled()\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n            <vdr-action-bar-dropdown-menu locationId=\"seller-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            id=\"name\"\r\n                            type=\"text\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"name\"\r\n                        />\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Seller\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"seller-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: ["clr-alert{max-width:30rem;margin-bottom:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SellerDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SellerDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-seller-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"seller-detail\" />\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', 'UpdateSeller']\"\r\n                    [disabled]=\"!saveButtonEnabled()\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n            <vdr-action-bar-dropdown-menu locationId=\"seller-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            id=\"name\"\r\n                            type=\"text\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"name\"\r\n                        />\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Seller\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"seller-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: ["clr-alert{max-width:30rem;margin-bottom:12px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i2$1.FormBuilder }, { type: i1.NotificationService }] });
@@ -1862,6 +1867,7 @@ const GET_SELLER_LIST = gql `
 class SellerListComponent extends TypedBaseListComponent {
     constructor() {
         super();
+        this.dataTableListId = 'seller-list';
         this.customFields = this.getCustomFieldConfig('Seller');
         this.filters = this.createFilterCollection()
             .addIdFilter()
@@ -1900,12 +1906,12 @@ class SellerListComponent extends TypedBaseListComponent {
             refreshListOnChanges: [this.filters.valueChanges, this.sorts.valueChanges],
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SellerListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SellerListComponent, selector: "vdr-seller-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"seller-list\" />\r\n            <a class=\"btn btn-primary\" *vdrIfPermissions=\"['SuperAdmin', 'CreateSeller']\" [routerLink]=\"['./', 'create']\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-seller' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"seller-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    id=\"seller-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"seller-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-seller=\"item\">{{ seller.id }}</ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-seller=\"item\">\r\n            {{ seller.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-seller=\"item\">\r\n            {{ seller.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-seller=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', seller.id]\"\r\n                ><span>{{ seller.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SellerListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SellerListComponent, selector: "vdr-seller-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"seller-list\" />\r\n            <a class=\"btn btn-primary\" *vdrIfPermissions=\"['SuperAdmin', 'CreateSeller']\" [routerLink]=\"['./', 'create']\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-seller' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"seller-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"seller-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-seller=\"item\">{{ seller.id }}</ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-seller=\"item\">\r\n            {{ seller.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-seller=\"item\">\r\n            {{ seller.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-seller=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', seller.id]\"\r\n                ><span>{{ seller.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SellerListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SellerListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-seller-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"seller-list\" />\r\n            <a class=\"btn btn-primary\" *vdrIfPermissions=\"['SuperAdmin', 'CreateSeller']\" [routerLink]=\"['./', 'create']\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-seller' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"seller-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    id=\"seller-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"seller-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-seller=\"item\">{{ seller.id }}</ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-seller=\"item\">\r\n            {{ seller.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-seller=\"item\">\r\n            {{ seller.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-seller=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', seller.id]\"\r\n                ><span>{{ seller.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n" }]
+            args: [{ selector: 'vdr-seller-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"seller-list\" />\r\n            <a class=\"btn btn-primary\" *vdrIfPermissions=\"['SuperAdmin', 'CreateSeller']\" [routerLink]=\"['./', 'create']\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-seller' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"seller-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"seller-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-seller=\"item\">{{ seller.id }}</ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-seller=\"item\">\r\n            {{ seller.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-seller=\"item\">\r\n            {{ seller.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-seller=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', seller.id]\"\r\n                ><span>{{ seller.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n" }]
         }], ctorParameters: () => [] });
 
 class ShippingEligibilityTestResultComponent {
@@ -1914,10 +1920,10 @@ class ShippingEligibilityTestResultComponent {
         this.testDataUpdated = false;
         this.runTest = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ShippingEligibilityTestResultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ShippingEligibilityTestResultComponent, selector: "vdr-shipping-eligibility-test-result", inputs: { testResult: "testResult", okToRun: "okToRun", testDataUpdated: "testDataUpdated", currencyCode: "currencyCode" }, outputs: { runTest: "runTest" }, ngImport: i0, template: "<vdr-card class=\"test-result\" [title]=\"'settings.test-result' | translate\">\r\n    <div class=\"card-span\" *ngFor=\"let quote of testResult\">\r\n        <div class=\"result-details\" [class.stale]=\"testDataUpdated\">\r\n            <vdr-labeled-data [label]=\"'settings.shipping-method' | translate\">\r\n                {{ quote.name }}\r\n            </vdr-labeled-data>\r\n            <div class=\"price-row\">\r\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                    {{ quote.price | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'common.price-with-tax' | translate\">\r\n                    {{ quote.priceWithTax | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <vdr-object-tree *ngIf=\"quote.metadata\" [value]=\"quote.metadata\"></vdr-object-tree>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-span\" *ngIf=\"testResult?.length === 0\">\r\n        <clr-icon shape=\"ban\" class=\"is-solid error\"></clr-icon>\r\n        {{ 'settings.no-eligible-shipping-methods' | translate }}\r\n    </div>\r\n    <div class=\"card-footer\">\r\n        <button class=\"btn btn-secondary\" (click)=\"runTest.emit()\" [disabled]=\"!okToRun\">\r\n            {{ 'settings.test-shipping-methods' | translate }}\r\n        </button>\r\n    </div>\r\n</vdr-card>\r\n", styles: [":host{display:block}.result-details{transition:opacity .2s}.result-details.stale{opacity:.5}.price-row{display:flex}.price-row>*:not(:first-child){margin-inline-start:24px}clr-icon.error{color:var(--color-error-500)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShippingEligibilityTestResultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ShippingEligibilityTestResultComponent, selector: "vdr-shipping-eligibility-test-result", inputs: { testResult: "testResult", okToRun: "okToRun", testDataUpdated: "testDataUpdated", currencyCode: "currencyCode" }, outputs: { runTest: "runTest" }, ngImport: i0, template: "<vdr-card class=\"test-result\" [title]=\"'settings.test-result' | translate\">\r\n    <div class=\"card-span\" *ngFor=\"let quote of testResult\">\r\n        <div class=\"result-details\" [class.stale]=\"testDataUpdated\">\r\n            <vdr-labeled-data [label]=\"'settings.shipping-method' | translate\">\r\n                {{ quote.name }}\r\n            </vdr-labeled-data>\r\n            <div class=\"price-row\">\r\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                    {{ quote.price | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'common.price-with-tax' | translate\">\r\n                    {{ quote.priceWithTax | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <vdr-object-tree *ngIf=\"quote.metadata\" [value]=\"quote.metadata\"></vdr-object-tree>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-span\" *ngIf=\"testResult?.length === 0\">\r\n        <clr-icon shape=\"ban\" class=\"is-solid error\"></clr-icon>\r\n        {{ 'settings.no-eligible-shipping-methods' | translate }}\r\n    </div>\r\n    <div class=\"card-footer\">\r\n        <button class=\"btn btn-secondary\" (click)=\"runTest.emit()\" [disabled]=\"!okToRun\">\r\n            {{ 'settings.test-shipping-methods' | translate }}\r\n        </button>\r\n    </div>\r\n</vdr-card>\r\n", styles: [":host{display:block}.result-details{transition:opacity .2s}.result-details.stale{opacity:.5}.price-row{display:flex}.price-row>*:not(:first-child){margin-inline-start:24px}clr-icon.error{color:var(--color-error-500)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ShippingEligibilityTestResultComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShippingEligibilityTestResultComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-shipping-eligibility-test-result', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-card class=\"test-result\" [title]=\"'settings.test-result' | translate\">\r\n    <div class=\"card-span\" *ngFor=\"let quote of testResult\">\r\n        <div class=\"result-details\" [class.stale]=\"testDataUpdated\">\r\n            <vdr-labeled-data [label]=\"'settings.shipping-method' | translate\">\r\n                {{ quote.name }}\r\n            </vdr-labeled-data>\r\n            <div class=\"price-row\">\r\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                    {{ quote.price | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'common.price-with-tax' | translate\">\r\n                    {{ quote.priceWithTax | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <vdr-object-tree *ngIf=\"quote.metadata\" [value]=\"quote.metadata\"></vdr-object-tree>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-span\" *ngIf=\"testResult?.length === 0\">\r\n        <clr-icon shape=\"ban\" class=\"is-solid error\"></clr-icon>\r\n        {{ 'settings.no-eligible-shipping-methods' | translate }}\r\n    </div>\r\n    <div class=\"card-footer\">\r\n        <button class=\"btn btn-secondary\" (click)=\"runTest.emit()\" [disabled]=\"!okToRun\">\r\n            {{ 'settings.test-shipping-methods' | translate }}\r\n        </button>\r\n    </div>\r\n</vdr-card>\r\n", styles: [":host{display:block}.result-details{transition:opacity .2s}.result-details.stale{opacity:.5}.price-row{display:flex}.price-row>*:not(:first-child){margin-inline-start:24px}clr-icon.error{color:var(--color-error-500)}\n"] }]
         }], propDecorators: { testResult: [{
@@ -1985,10 +1991,10 @@ class TestOrderBuilderComponent {
     loadFromLocalStorage() {
         return this.localStorageService.getForCurrentLocation('shippingTestOrder') || [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestOrderBuilderComponent, deps: [{ token: i1.DataService }, { token: i1.LocalStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TestOrderBuilderComponent, selector: "vdr-test-order-builder", outputs: { orderLinesChange: "orderLinesChange" }, ngImport: i0, template: "<table class=\"order-table table\" *ngIf=\"lines.length; else emptyPlaceholder\">\r\n    <thead>\r\n        <tr>\r\n            <th></th>\r\n            <th>{{ 'order.product-name' | translate }}</th>\r\n            <th>{{ 'order.product-sku' | translate }}</th>\r\n            <th>{{ 'order.unit-price' | translate }}</th>\r\n            <th>{{ 'order.quantity' | translate }}</th>\r\n            <th>{{ 'order.total' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tr *ngFor=\"let line of lines\" class=\"order-line\">\r\n        <td class=\"align-middle thumb\">\r\n            <img [src]=\"line.preview + '?preset=tiny'\" />\r\n        </td>\r\n        <td class=\"align-middle name\">{{ line.name }}</td>\r\n        <td class=\"align-middle sku\">{{ line.sku }}</td>\r\n        <td class=\"align-middle unit-price\">\r\n            {{ line.unitPriceWithTax | localeCurrency : currencyCode }}\r\n        </td>\r\n        <td class=\"align-middle quantity\">\r\n            <input [(ngModel)]=\"line.quantity\" (change)=\"updateQuantity()\" type=\"number\" max=\"9999\" min=\"1\" />\r\n            <button class=\"icon-button\" (click)=\"removeLine(line)\">\r\n                <clr-icon shape=\"trash\"></clr-icon>\r\n            </button>\r\n        </td>\r\n        <td class=\"align-middle total\">\r\n            {{ line.unitPriceWithTax * line.quantity | localeCurrency : currencyCode }}\r\n        </td>\r\n    </tr>\r\n    <tr class=\"sub-total\">\r\n        <td class=\"left\">{{ 'order.sub-total' | translate }}</td>\r\n        <td></td>\r\n        <td></td>\r\n        <td></td>\r\n        <td></td>\r\n        <td>{{ subTotal | localeCurrency : currencyCode }}</td>\r\n    </tr>\r\n</table>\r\n\r\n<ng-template #emptyPlaceholder>\r\n    <div class=\"card-block empty-placeholder card-span\">\r\n        <div class=\"empty-text\">{{ 'settings.add-products-to-test-order' | translate }}</div>\r\n        <clr-icon shape=\"arrow\" dir=\"down\" size=\"96\"></clr-icon>\r\n    </div>\r\n</ng-template>\r\n<div class=\"card-block\">\r\n    <vdr-product-variant-selector (productSelected)=\"selectResult($event)\"> </vdr-product-variant-selector>\r\n</div>\r\n", styles: [".empty-placeholder{color:var(--color-grey-400);text-align:center}.empty-text{font-size:22px}.thumb{max-width:50px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TestOrderBuilderComponent, deps: [{ token: i1.DataService }, { token: i1.LocalStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TestOrderBuilderComponent, selector: "vdr-test-order-builder", outputs: { orderLinesChange: "orderLinesChange" }, ngImport: i0, template: "<table class=\"order-table table\" *ngIf=\"lines.length; else emptyPlaceholder\">\r\n    <thead>\r\n        <tr>\r\n            <th></th>\r\n            <th>{{ 'order.product-name' | translate }}</th>\r\n            <th>{{ 'order.product-sku' | translate }}</th>\r\n            <th>{{ 'order.unit-price' | translate }}</th>\r\n            <th>{{ 'order.quantity' | translate }}</th>\r\n            <th>{{ 'order.total' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tr *ngFor=\"let line of lines\" class=\"order-line\">\r\n        <td class=\"align-middle thumb\">\r\n            <img [src]=\"line.preview + '?preset=tiny'\" />\r\n        </td>\r\n        <td class=\"align-middle name\">{{ line.name }}</td>\r\n        <td class=\"align-middle sku\">{{ line.sku }}</td>\r\n        <td class=\"align-middle unit-price\">\r\n            {{ line.unitPriceWithTax | localeCurrency : currencyCode }}\r\n        </td>\r\n        <td class=\"align-middle quantity\">\r\n            <input [(ngModel)]=\"line.quantity\" (change)=\"updateQuantity()\" type=\"number\" max=\"9999\" min=\"1\" />\r\n            <button class=\"icon-button\" (click)=\"removeLine(line)\">\r\n                <clr-icon shape=\"trash\"></clr-icon>\r\n            </button>\r\n        </td>\r\n        <td class=\"align-middle total\">\r\n            {{ line.unitPriceWithTax * line.quantity | localeCurrency : currencyCode }}\r\n        </td>\r\n    </tr>\r\n    <tr class=\"sub-total\">\r\n        <td class=\"left\">{{ 'order.sub-total' | translate }}</td>\r\n        <td></td>\r\n        <td></td>\r\n        <td></td>\r\n        <td></td>\r\n        <td>{{ subTotal | localeCurrency : currencyCode }}</td>\r\n    </tr>\r\n</table>\r\n\r\n<ng-template #emptyPlaceholder>\r\n    <div class=\"card-block empty-placeholder card-span\">\r\n        <div class=\"empty-text\">{{ 'settings.add-products-to-test-order' | translate }}</div>\r\n        <clr-icon shape=\"arrow\" dir=\"down\" size=\"96\"></clr-icon>\r\n    </div>\r\n</ng-template>\r\n<div class=\"card-block\">\r\n    <vdr-product-variant-selector (productSelected)=\"selectResult($event)\"> </vdr-product-variant-selector>\r\n</div>\r\n", styles: [".empty-placeholder{color:var(--color-grey-400);text-align:center}.empty-text{font-size:22px}.thumb{max-width:50px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestOrderBuilderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TestOrderBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-test-order-builder', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"order-table table\" *ngIf=\"lines.length; else emptyPlaceholder\">\r\n    <thead>\r\n        <tr>\r\n            <th></th>\r\n            <th>{{ 'order.product-name' | translate }}</th>\r\n            <th>{{ 'order.product-sku' | translate }}</th>\r\n            <th>{{ 'order.unit-price' | translate }}</th>\r\n            <th>{{ 'order.quantity' | translate }}</th>\r\n            <th>{{ 'order.total' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tr *ngFor=\"let line of lines\" class=\"order-line\">\r\n        <td class=\"align-middle thumb\">\r\n            <img [src]=\"line.preview + '?preset=tiny'\" />\r\n        </td>\r\n        <td class=\"align-middle name\">{{ line.name }}</td>\r\n        <td class=\"align-middle sku\">{{ line.sku }}</td>\r\n        <td class=\"align-middle unit-price\">\r\n            {{ line.unitPriceWithTax | localeCurrency : currencyCode }}\r\n        </td>\r\n        <td class=\"align-middle quantity\">\r\n            <input [(ngModel)]=\"line.quantity\" (change)=\"updateQuantity()\" type=\"number\" max=\"9999\" min=\"1\" />\r\n            <button class=\"icon-button\" (click)=\"removeLine(line)\">\r\n                <clr-icon shape=\"trash\"></clr-icon>\r\n            </button>\r\n        </td>\r\n        <td class=\"align-middle total\">\r\n            {{ line.unitPriceWithTax * line.quantity | localeCurrency : currencyCode }}\r\n        </td>\r\n    </tr>\r\n    <tr class=\"sub-total\">\r\n        <td class=\"left\">{{ 'order.sub-total' | translate }}</td>\r\n        <td></td>\r\n        <td></td>\r\n        <td></td>\r\n        <td></td>\r\n        <td>{{ subTotal | localeCurrency : currencyCode }}</td>\r\n    </tr>\r\n</table>\r\n\r\n<ng-template #emptyPlaceholder>\r\n    <div class=\"card-block empty-placeholder card-span\">\r\n        <div class=\"empty-text\">{{ 'settings.add-products-to-test-order' | translate }}</div>\r\n        <clr-icon shape=\"arrow\" dir=\"down\" size=\"96\"></clr-icon>\r\n    </div>\r\n</ng-template>\r\n<div class=\"card-block\">\r\n    <vdr-product-variant-selector (productSelected)=\"selectResult($event)\"> </vdr-product-variant-selector>\r\n</div>\r\n", styles: [".empty-placeholder{color:var(--color-grey-400);text-align:center}.empty-text{font-size:22px}.thumb{max-width:50px}\n"] }]
         }], ctorParameters: () => [{ type: i1.DataService }, { type: i1.LocalStorageService }], propDecorators: { orderLinesChange: [{
@@ -2027,10 +2033,10 @@ class TestAddressFormComponent {
             this.subscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestAddressFormComponent, deps: [{ token: i2$1.UntypedFormBuilder }, { token: i1.DataService }, { token: i1.LocalStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TestAddressFormComponent, selector: "vdr-test-address-form", outputs: { addressChange: "addressChange" }, ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-header\">\r\n        {{ 'settings.test-address' | translate }}\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <form [formGroup]=\"form\" class=\"form-grid\">\r\n            <vdr-form-field [label]=\"'customer.city' | translate\">\r\n                <input formControlName=\"city\" type=\"text\"  />\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'customer.province' | translate\">\r\n                <input formControlName=\"province\" type=\"text\"  />\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'customer.postal-code' | translate\">\r\n                <input formControlName=\"postalCode\" type=\"text\"  />\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'customer.country' | translate\">\r\n                <select name=\"countryCode\" formControlName=\"countryCode\" >\r\n                    <option *ngFor=\"let country of availableCountries$ | async\" [value]=\"country.code\">\r\n                        {{ country.name }}\r\n                    </option>\r\n                </select>\r\n            </vdr-form-field>\r\n        </form>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}clr-input-container{margin-bottom:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TestAddressFormComponent, deps: [{ token: i2$1.UntypedFormBuilder }, { token: i1.DataService }, { token: i1.LocalStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TestAddressFormComponent, selector: "vdr-test-address-form", outputs: { addressChange: "addressChange" }, ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-header\">\r\n        {{ 'settings.test-address' | translate }}\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <form [formGroup]=\"form\" class=\"form-grid\">\r\n            <vdr-form-field [label]=\"'customer.city' | translate\">\r\n                <input formControlName=\"city\" type=\"text\"  />\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'customer.province' | translate\">\r\n                <input formControlName=\"province\" type=\"text\"  />\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'customer.postal-code' | translate\">\r\n                <input formControlName=\"postalCode\" type=\"text\"  />\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'customer.country' | translate\">\r\n                <select name=\"countryCode\" formControlName=\"countryCode\" >\r\n                    <option *ngFor=\"let country of availableCountries$ | async\" [value]=\"country.code\">\r\n                        {{ country.name }}\r\n                    </option>\r\n                </select>\r\n            </vdr-form-field>\r\n        </form>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}clr-input-container{margin-bottom:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestAddressFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TestAddressFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-test-address-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card\">\r\n    <div class=\"card-header\">\r\n        {{ 'settings.test-address' | translate }}\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <form [formGroup]=\"form\" class=\"form-grid\">\r\n            <vdr-form-field [label]=\"'customer.city' | translate\">\r\n                <input formControlName=\"city\" type=\"text\"  />\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'customer.province' | translate\">\r\n                <input formControlName=\"province\" type=\"text\"  />\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'customer.postal-code' | translate\">\r\n                <input formControlName=\"postalCode\" type=\"text\"  />\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'customer.country' | translate\">\r\n                <select name=\"countryCode\" formControlName=\"countryCode\" >\r\n                    <option *ngFor=\"let country of availableCountries$ | async\" [value]=\"country.code\">\r\n                        {{ country.name }}\r\n                    </option>\r\n                </select>\r\n            </vdr-form-field>\r\n        </form>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}clr-input-container{margin-bottom:12px}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.UntypedFormBuilder }, { type: i1.DataService }, { type: i1.LocalStorageService }], propDecorators: { addressChange: [{
@@ -2043,10 +2049,10 @@ class ShippingMethodTestResultComponent {
         this.testDataUpdated = false;
         this.runTest = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ShippingMethodTestResultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ShippingMethodTestResultComponent, selector: "vdr-shipping-method-test-result", inputs: { testResult: "testResult", okToRun: "okToRun", testDataUpdated: "testDataUpdated", currencyCode: "currencyCode" }, outputs: { runTest: "runTest" }, ngImport: i0, template: "<div\r\n    class=\"test-result card\"\r\n    [ngClass]=\"{\r\n        success: testResult?.eligible === true,\r\n        error: testResult?.eligible === false,\r\n        unknown: !testResult\r\n    }\"\r\n>\r\n    <div class=\"card-header\">\r\n        {{ 'settings.test-result' | translate }}\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"result-details\" [class.stale]=\"testDataUpdated\">\r\n            <vdr-labeled-data [label]=\"'settings.eligible' | translate\">\r\n                <div class=\"eligible-icon\">\r\n                    <clr-icon\r\n                        shape=\"success-standard\"\r\n                        class=\"is-solid success\"\r\n                        *ngIf=\"testResult?.eligible\"\r\n                    ></clr-icon>\r\n                    <clr-icon\r\n                        shape=\"ban\"\r\n                        class=\"is-solid error\"\r\n                        *ngIf=\"testResult?.eligible === false\"\r\n                    ></clr-icon>\r\n                    <clr-icon shape=\"unknown-status\" *ngIf=\"!testResult\"></clr-icon>\r\n                </div>\r\n                {{ testResult?.eligible }}\r\n            </vdr-labeled-data>\r\n            <div class=\"price-row\">\r\n                <vdr-labeled-data\r\n                    [label]=\"'common.price' | translate\"\r\n                    *ngIf=\"testResult?.quote?.price != null\"\r\n                >\r\n                    {{ testResult.quote?.price | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data\r\n                    [label]=\"'common.price-with-tax' | translate\"\r\n                    *ngIf=\"testResult?.quote?.priceWithTax != null\"\r\n                >\r\n                    {{ testResult.quote?.priceWithTax | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <vdr-object-tree\r\n                *ngIf=\"testResult?.quote?.metadata\"\r\n                [value]=\"testResult?.quote?.metadata\"\r\n            ></vdr-object-tree>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-footer\">\r\n        <button class=\"btn btn-secondary\" (click)=\"runTest.emit()\" [disabled]=\"!okToRun\">\r\n            {{ 'settings.test-shipping-method' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.test-result.success .card-block{background-color:var(--color-success-100)}.test-result.error .card-block{background-color:var(--color-error-100)}.test-result.unknown .card-block{background-color:var(--color-component-bg-100)}.result-details{transition:opacity .2s}.result-details.stale{opacity:.5}.eligible-icon{display:inline-block}.eligible-icon .success{color:var(--color-success-500)}.eligible-icon .error{color:var(--color-error-500)}.price-row{display:flex}.price-row>*:not(:first-child){margin-inline-start:24px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShippingMethodTestResultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ShippingMethodTestResultComponent, selector: "vdr-shipping-method-test-result", inputs: { testResult: "testResult", okToRun: "okToRun", testDataUpdated: "testDataUpdated", currencyCode: "currencyCode" }, outputs: { runTest: "runTest" }, ngImport: i0, template: "<div\r\n    class=\"test-result card\"\r\n    [ngClass]=\"{\r\n        success: testResult?.eligible === true,\r\n        error: testResult?.eligible === false,\r\n        unknown: !testResult\r\n    }\"\r\n>\r\n    <div class=\"card-header\">\r\n        {{ 'settings.test-result' | translate }}\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"result-details\" [class.stale]=\"testDataUpdated\">\r\n            <vdr-labeled-data [label]=\"'settings.eligible' | translate\">\r\n                <div class=\"eligible-icon\">\r\n                    <clr-icon\r\n                        shape=\"success-standard\"\r\n                        class=\"is-solid success\"\r\n                        *ngIf=\"testResult?.eligible\"\r\n                    ></clr-icon>\r\n                    <clr-icon\r\n                        shape=\"ban\"\r\n                        class=\"is-solid error\"\r\n                        *ngIf=\"testResult?.eligible === false\"\r\n                    ></clr-icon>\r\n                    <clr-icon shape=\"unknown-status\" *ngIf=\"!testResult\"></clr-icon>\r\n                </div>\r\n                {{ testResult?.eligible }}\r\n            </vdr-labeled-data>\r\n            <div class=\"price-row\">\r\n                <vdr-labeled-data\r\n                    [label]=\"'common.price' | translate\"\r\n                    *ngIf=\"testResult?.quote?.price != null\"\r\n                >\r\n                    {{ testResult.quote?.price | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data\r\n                    [label]=\"'common.price-with-tax' | translate\"\r\n                    *ngIf=\"testResult?.quote?.priceWithTax != null\"\r\n                >\r\n                    {{ testResult.quote?.priceWithTax | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <vdr-object-tree\r\n                *ngIf=\"testResult?.quote?.metadata\"\r\n                [value]=\"testResult?.quote?.metadata\"\r\n            ></vdr-object-tree>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-footer\">\r\n        <button class=\"btn btn-secondary\" (click)=\"runTest.emit()\" [disabled]=\"!okToRun\">\r\n            {{ 'settings.test-shipping-method' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.test-result.success .card-block{background-color:var(--color-success-100)}.test-result.error .card-block{background-color:var(--color-error-100)}.test-result.unknown .card-block{background-color:var(--color-component-bg-100)}.result-details{transition:opacity .2s}.result-details.stale{opacity:.5}.eligible-icon{display:inline-block}.eligible-icon .success{color:var(--color-success-500)}.eligible-icon .error{color:var(--color-error-500)}.price-row{display:flex}.price-row>*:not(:first-child){margin-inline-start:24px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ShippingMethodTestResultComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShippingMethodTestResultComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-shipping-method-test-result', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    class=\"test-result card\"\r\n    [ngClass]=\"{\r\n        success: testResult?.eligible === true,\r\n        error: testResult?.eligible === false,\r\n        unknown: !testResult\r\n    }\"\r\n>\r\n    <div class=\"card-header\">\r\n        {{ 'settings.test-result' | translate }}\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"result-details\" [class.stale]=\"testDataUpdated\">\r\n            <vdr-labeled-data [label]=\"'settings.eligible' | translate\">\r\n                <div class=\"eligible-icon\">\r\n                    <clr-icon\r\n                        shape=\"success-standard\"\r\n                        class=\"is-solid success\"\r\n                        *ngIf=\"testResult?.eligible\"\r\n                    ></clr-icon>\r\n                    <clr-icon\r\n                        shape=\"ban\"\r\n                        class=\"is-solid error\"\r\n                        *ngIf=\"testResult?.eligible === false\"\r\n                    ></clr-icon>\r\n                    <clr-icon shape=\"unknown-status\" *ngIf=\"!testResult\"></clr-icon>\r\n                </div>\r\n                {{ testResult?.eligible }}\r\n            </vdr-labeled-data>\r\n            <div class=\"price-row\">\r\n                <vdr-labeled-data\r\n                    [label]=\"'common.price' | translate\"\r\n                    *ngIf=\"testResult?.quote?.price != null\"\r\n                >\r\n                    {{ testResult.quote?.price | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data\r\n                    [label]=\"'common.price-with-tax' | translate\"\r\n                    *ngIf=\"testResult?.quote?.priceWithTax != null\"\r\n                >\r\n                    {{ testResult.quote?.priceWithTax | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <vdr-object-tree\r\n                *ngIf=\"testResult?.quote?.metadata\"\r\n                [value]=\"testResult?.quote?.metadata\"\r\n            ></vdr-object-tree>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-footer\">\r\n        <button class=\"btn btn-secondary\" (click)=\"runTest.emit()\" [disabled]=\"!okToRun\">\r\n            {{ 'settings.test-shipping-method' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.test-result.success .card-block{background-color:var(--color-success-100)}.test-result.error .card-block{background-color:var(--color-error-100)}.test-result.unknown .card-block{background-color:var(--color-component-bg-100)}.result-details{transition:opacity .2s}.result-details.stale{opacity:.5}.eligible-icon{display:inline-block}.eligible-icon .success{color:var(--color-success-500)}.eligible-icon .error{color:var(--color-error-500)}.price-row{display:flex}.price-row>*:not(:first-child){margin-inline-start:24px}\n"] }]
         }], propDecorators: { testResult: [{
@@ -2292,10 +2298,10 @@ class ShippingMethodDetailComponent extends TypedBaseDetailComponent {
             this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['customFields']), shippingMethod, currentTranslation);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ShippingMethodDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ShippingMethodDetailComponent, selector: "vdr-shipping-method-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\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            />\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"shipping-method-detail\" />\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"\r\n                    detailForm.pristine || detailForm.invalid || !selectedChecker || !selectedCalculator\r\n                \"\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-action-bar-dropdown-menu locationId=\"shipping-method-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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(entity?.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                        class=\"form-grid-span\"\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\r\n                        [label]=\"'settings.fulfillment-handler' | translate\"\r\n                        for=\"fulfillmentHandler\"\r\n                    >\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                </div>\r\n            </vdr-card>\r\n\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"ShippingMethod\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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            <vdr-card [title]=\"'settings.shipping-eligibility-checker' | translate\">\r\n                <vdr-configurable-input\r\n                    class=\"card-span\"\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\" class=\"card-span\">\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            </vdr-card>\r\n            <vdr-card [title]=\"'settings.shipping-calculator' | translate\">\r\n                <vdr-configurable-input\r\n                    class=\"card-span\"\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\" class=\"card-span\">\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            </vdr-card>\r\n            <vdr-card [title]=\"'settings.test-shipping-method' | translate\">\r\n                <vdr-test-order-builder\r\n                    class=\"card-span\"\r\n                    (orderLinesChange)=\"setTestOrderLines($event)\"\r\n                ></vdr-test-order-builder>\r\n                <vdr-test-address-form\r\n                    (addressChange)=\"setTestAddress($event)\"\r\n                    class=\"mt-2\"\r\n                ></vdr-test-address-form>\r\n                <vdr-shipping-method-test-result\r\n                    class=\"mt-2\"\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            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position", "hideDescription"], outputs: ["remove"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: TestOrderBuilderComponent, selector: "vdr-test-order-builder", outputs: ["orderLinesChange"] }, { kind: "component", type: TestAddressFormComponent, selector: "vdr-test-address-form", outputs: ["addressChange"] }, { kind: "component", type: ShippingMethodTestResultComponent, selector: "vdr-shipping-method-test-result", inputs: ["testResult", "okToRun", "testDataUpdated", "currencyCode"], outputs: ["runTest"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShippingMethodDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ShippingMethodDetailComponent, selector: "vdr-shipping-method-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\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            />\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"shipping-method-detail\" />\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"\r\n                    detailForm.pristine || detailForm.invalid || !selectedChecker || !selectedCalculator\r\n                \"\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-action-bar-dropdown-menu locationId=\"shipping-method-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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(entity?.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                        class=\"form-grid-span\"\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\r\n                        [label]=\"'settings.fulfillment-handler' | translate\"\r\n                        for=\"fulfillmentHandler\"\r\n                    >\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                </div>\r\n            </vdr-card>\r\n\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"ShippingMethod\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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            <vdr-card [title]=\"'settings.shipping-eligibility-checker' | translate\">\r\n                <vdr-configurable-input\r\n                    class=\"card-span\"\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\" class=\"card-span\">\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            </vdr-card>\r\n            <vdr-card [title]=\"'settings.shipping-calculator' | translate\">\r\n                <vdr-configurable-input\r\n                    class=\"card-span\"\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\" class=\"card-span\">\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            </vdr-card>\r\n            <vdr-card [title]=\"'settings.test-shipping-method' | translate\">\r\n                <vdr-test-order-builder\r\n                    class=\"card-span\"\r\n                    (orderLinesChange)=\"setTestOrderLines($event)\"\r\n                ></vdr-test-order-builder>\r\n                <vdr-test-address-form\r\n                    (addressChange)=\"setTestAddress($event)\"\r\n                    class=\"mt-2\"\r\n                ></vdr-test-address-form>\r\n                <vdr-shipping-method-test-result\r\n                    class=\"mt-2\"\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            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position", "hideDescription"], outputs: ["remove"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: TestOrderBuilderComponent, selector: "vdr-test-order-builder", outputs: ["orderLinesChange"] }, { kind: "component", type: TestAddressFormComponent, selector: "vdr-test-address-form", outputs: ["addressChange"] }, { kind: "component", type: ShippingMethodTestResultComponent, selector: "vdr-shipping-method-test-result", inputs: ["testResult", "okToRun", "testDataUpdated", "currencyCode"], outputs: ["runTest"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ShippingMethodDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShippingMethodDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-shipping-method-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\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            />\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"shipping-method-detail\" />\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"\r\n                    detailForm.pristine || detailForm.invalid || !selectedChecker || !selectedCalculator\r\n                \"\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-action-bar-dropdown-menu locationId=\"shipping-method-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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(entity?.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                        class=\"form-grid-span\"\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\r\n                        [label]=\"'settings.fulfillment-handler' | translate\"\r\n                        for=\"fulfillmentHandler\"\r\n                    >\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                </div>\r\n            </vdr-card>\r\n\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"ShippingMethod\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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            <vdr-card [title]=\"'settings.shipping-eligibility-checker' | translate\">\r\n                <vdr-configurable-input\r\n                    class=\"card-span\"\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\" class=\"card-span\">\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            </vdr-card>\r\n            <vdr-card [title]=\"'settings.shipping-calculator' | translate\">\r\n                <vdr-configurable-input\r\n                    class=\"card-span\"\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\" class=\"card-span\">\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            </vdr-card>\r\n            <vdr-card [title]=\"'settings.test-shipping-method' | translate\">\r\n                <vdr-test-order-builder\r\n                    class=\"card-span\"\r\n                    (orderLinesChange)=\"setTestOrderLines($event)\"\r\n                ></vdr-test-order-builder>\r\n                <vdr-test-address-form\r\n                    (addressChange)=\"setTestAddress($event)\"\r\n                    class=\"mt-2\"\r\n                ></vdr-test-address-form>\r\n                <vdr-shipping-method-test-result\r\n                    class=\"mt-2\"\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            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i2$1.FormBuilder }, { type: i1.NotificationService }] });
@@ -2373,6 +2379,7 @@ const GET_SHIPPING_METHOD_LIST = gql `
 class ShippingMethodListComponent extends TypedBaseListComponent {
     constructor() {
         super();
+        this.dataTableListId = 'shipping-method-list';
         this.customFields = this.getCustomFieldConfig('ShippingMethod');
         this.filters = this.createFilterCollection()
             .addIdFilter()
@@ -2432,12 +2439,12 @@ class ShippingMethodListComponent extends TypedBaseListComponent {
             refreshListOnChanges: [this.filters.valueChanges, this.sorts.valueChanges],
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ShippingMethodListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ShippingMethodListComponent, selector: "vdr-shipping-method-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <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            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"shipping-method-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateShippingMethod']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-shipping-method' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"shipping-method-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    id=\"shipping-method-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"shipping-method-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-shippingMethod=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', shippingMethod.id]\"\r\n                ><span>{{ shippingMethod.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.code }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.description' | translate\" id=\"description\"\r\n        [sort]=\"sorts.get('description')\"\r\n        [hiddenByDefault]=\"true\"\r\n    >\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.description }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.fulfillment-handler' | translate\" id=\"fulfillment-handler\" [sort]=\"sorts.get('fulfillmentHandlerCode')\">\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.fulfillmentHandlerCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShippingMethodListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ShippingMethodListComponent, selector: "vdr-shipping-method-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <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            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"shipping-method-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateShippingMethod']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-shipping-method' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"shipping-method-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"shipping-method-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-shippingMethod=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', shippingMethod.id]\"\r\n                ><span>{{ shippingMethod.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.code }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.description' | translate\" id=\"description\"\r\n        [sort]=\"sorts.get('description')\"\r\n        [hiddenByDefault]=\"true\"\r\n    >\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.description }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.fulfillment-handler' | translate\" id=\"fulfillment-handler\" [sort]=\"sorts.get('fulfillmentHandlerCode')\">\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.fulfillmentHandlerCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ShippingMethodListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShippingMethodListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-shipping-method-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <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            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"shipping-method-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateShippingMethod']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-shipping-method' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"shipping-method-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    id=\"shipping-method-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"shipping-method-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-shippingMethod=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', shippingMethod.id]\"\r\n                ><span>{{ shippingMethod.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.code }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.description' | translate\" id=\"description\"\r\n        [sort]=\"sorts.get('description')\"\r\n        [hiddenByDefault]=\"true\"\r\n    >\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.description }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.fulfillment-handler' | translate\" id=\"fulfillment-handler\" [sort]=\"sorts.get('fulfillmentHandlerCode')\">\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.fulfillmentHandlerCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n" }]
+            args: [{ selector: 'vdr-shipping-method-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <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            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"shipping-method-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateShippingMethod']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-shipping-method' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"shipping-method-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"shipping-method-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-shippingMethod=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', shippingMethod.id]\"\r\n                ><span>{{ shippingMethod.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [sort]=\"sorts.get('code')\">\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.code }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.description' | translate\" id=\"description\"\r\n        [sort]=\"sorts.get('description')\"\r\n        [hiddenByDefault]=\"true\"\r\n    >\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.description }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.fulfillment-handler' | translate\" id=\"fulfillment-handler\" [sort]=\"sorts.get('fulfillmentHandlerCode')\">\r\n        <ng-template let-shippingMethod=\"item\">\r\n            {{ shippingMethod.fulfillmentHandlerCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n" }]
         }], ctorParameters: () => [] });
 
 const STOCK_LOCATION_DETAIL_FRAGMENT = gql `
@@ -2558,10 +2565,10 @@ class StockLocationDetailComponent extends TypedBaseDetailComponent {
             this.setCustomFieldFormValues(this.customFields, this.detailForm.get('customFields'), entity);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StockLocationDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StockLocationDetailComponent, selector: "vdr-stock-location-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left></vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"stock-location-detail\" />\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                    [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n                    *vdrIfPermissions=\"'UpdateStockLocation'\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n            <vdr-action-bar-dropdown-menu locationId=\"stock-location-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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]=\"!('UpdateStockLocation' | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        class=\"form-grid-span\"\r\n                        [label]=\"'common.description' | translate\"\r\n                        for=\"slug\"\r\n                        [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\r\n                    >\r\n                        <vdr-rich-text-editor\r\n                            formControlName=\"description\"\r\n                            [readonly]=\"!('UpdateStockLocation' | hasPermission)\"\r\n                        ></vdr-rich-text-editor>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"StockLocation\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"stock-location-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StockLocationDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StockLocationDetailComponent, selector: "vdr-stock-location-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left></vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"stock-location-detail\" />\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                    [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n                    *vdrIfPermissions=\"'UpdateStockLocation'\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n            <vdr-action-bar-dropdown-menu locationId=\"stock-location-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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]=\"!('UpdateStockLocation' | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        class=\"form-grid-span\"\r\n                        [label]=\"'common.description' | translate\"\r\n                        for=\"slug\"\r\n                        [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\r\n                    >\r\n                        <vdr-rich-text-editor\r\n                            formControlName=\"description\"\r\n                            [readonly]=\"!('UpdateStockLocation' | hasPermission)\"\r\n                        ></vdr-rich-text-editor>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"StockLocation\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"stock-location-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StockLocationDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StockLocationDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-stock-location-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left></vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"stock-location-detail\" />\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                    [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n                    *vdrIfPermissions=\"'UpdateStockLocation'\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n            <vdr-action-bar-dropdown-menu locationId=\"stock-location-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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]=\"!('UpdateStockLocation' | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        class=\"form-grid-span\"\r\n                        [label]=\"'common.description' | translate\"\r\n                        for=\"slug\"\r\n                        [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\r\n                    >\r\n                        <vdr-rich-text-editor\r\n                            formControlName=\"description\"\r\n                            [readonly]=\"!('UpdateStockLocation' | hasPermission)\"\r\n                        ></vdr-rich-text-editor>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"StockLocation\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"stock-location-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i2$1.FormBuilder }, { type: i1.NotificationService }] });
@@ -2651,6 +2658,7 @@ const GET_STOCK_LOCATION_LIST = gql `
 class StockLocationListComponent extends TypedBaseListComponent {
     constructor() {
         super();
+        this.dataTableListId = 'stock-location-list';
         this.customFields = this.getCustomFieldConfig('StockLocation');
         this.filters = this.createFilterCollection()
             .addIdFilter()
@@ -2700,12 +2708,12 @@ class StockLocationListComponent extends TypedBaseListComponent {
             refreshListOnChanges: [this.sorts.valueChanges, this.filters.valueChanges],
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StockLocationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StockLocationListComponent, selector: "vdr-stock-location-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"stock-location-list\" />\r\n            <a\r\n                class=\"button primary\"\r\n                *vdrIfPermissions=\"['CreateStockLocation']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-stock-location' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"stock-location-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"stock-location-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"stock-location-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-stockLocation=\"item\">\r\n            {{ stockLocation.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-stockLocation=\"item\">\r\n            {{ stockLocation.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-stockLocation=\"item\">\r\n            {{ stockLocation.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-stockLocation=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', stockLocation.id]\"\r\n                ><span>{{ stockLocation.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.description' | translate\" id=\"description\" [sort]=\"sorts.get('description')\">\r\n        <ng-template let-stockLocation=\"item\">\r\n            <div class=\"description\" [innerHTML]=\"stockLocation.description\"></div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let field of customFields\"\r\n        [customField]=\"field\"\r\n        [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: ["::ng-deep .description>p{margin-top:0!important}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StockLocationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StockLocationListComponent, selector: "vdr-stock-location-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"stock-location-list\" />\r\n            <a\r\n                class=\"button primary\"\r\n                *vdrIfPermissions=\"['CreateStockLocation']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-stock-location' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"stock-location-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"stock-location-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-stockLocation=\"item\">\r\n            {{ stockLocation.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-stockLocation=\"item\">\r\n            {{ stockLocation.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-stockLocation=\"item\">\r\n            {{ stockLocation.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-stockLocation=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', stockLocation.id]\"\r\n                ><span>{{ stockLocation.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.description' | translate\" id=\"description\" [sort]=\"sorts.get('description')\">\r\n        <ng-template let-stockLocation=\"item\">\r\n            <div class=\"description\" [innerHTML]=\"stockLocation.description\"></div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let field of customFields\"\r\n        [customField]=\"field\"\r\n        [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: ["::ng-deep .description>p{margin-top:0!important}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StockLocationListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StockLocationListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-stock-location-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"stock-location-list\" />\r\n            <a\r\n                class=\"button primary\"\r\n                *vdrIfPermissions=\"['CreateStockLocation']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-stock-location' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"stock-location-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"stock-location-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"stock-location-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-stockLocation=\"item\">\r\n            {{ stockLocation.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-stockLocation=\"item\">\r\n            {{ stockLocation.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-stockLocation=\"item\">\r\n            {{ stockLocation.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-stockLocation=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', stockLocation.id]\"\r\n                ><span>{{ stockLocation.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.description' | translate\" id=\"description\" [sort]=\"sorts.get('description')\">\r\n        <ng-template let-stockLocation=\"item\">\r\n            <div class=\"description\" [innerHTML]=\"stockLocation.description\"></div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let field of customFields\"\r\n        [customField]=\"field\"\r\n        [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: ["::ng-deep .description>p{margin-top:0!important}\n"] }]
+            args: [{ selector: 'vdr-stock-location-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"stock-location-list\" />\r\n            <a\r\n                class=\"button primary\"\r\n                *vdrIfPermissions=\"['CreateStockLocation']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-stock-location' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"stock-location-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"stock-location-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-stockLocation=\"item\">\r\n            {{ stockLocation.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-stockLocation=\"item\">\r\n            {{ stockLocation.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-stockLocation=\"item\">\r\n            {{ stockLocation.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-stockLocation=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', stockLocation.id]\"\r\n                ><span>{{ stockLocation.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.description' | translate\" id=\"description\" [sort]=\"sorts.get('description')\">\r\n        <ng-template let-stockLocation=\"item\">\r\n            <div class=\"description\" [innerHTML]=\"stockLocation.description\"></div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let field of customFields\"\r\n        [customField]=\"field\"\r\n        [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: ["::ng-deep .description>p{margin-top:0!important}\n"] }]
         }], ctorParameters: () => [] });
 
 const GET_TAX_CATEGORY_DETAIL = gql `
@@ -2802,10 +2810,10 @@ class TaxCategoryDetailComponent extends TypedBaseDetailComponent {
             this.setCustomFieldFormValues(this.customFields, this.detailForm.get('customFields'), entity);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TaxCategoryDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TaxCategoryDetailComponent, selector: "vdr-tax-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"tax-category-detail\" />\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-action-bar-dropdown-menu locationId=\"tax-category-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"TaxCategory\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TaxCategoryDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TaxCategoryDetailComponent, selector: "vdr-tax-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"tax-category-detail\" />\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-action-bar-dropdown-menu locationId=\"tax-category-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"TaxCategory\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TaxCategoryDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TaxCategoryDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-tax-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"tax-category-detail\" />\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-action-bar-dropdown-menu locationId=\"tax-category-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"TaxCategory\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i2$1.FormBuilder }, { type: i1.NotificationService }] });
@@ -2832,6 +2840,7 @@ const GET_TAX_CATEGORY_LIST = gql `
 class TaxCategoryListComponent extends TypedBaseListComponent {
     constructor() {
         super();
+        this.dataTableListId = 'tax-category-list';
         this.customFields = this.serverConfigService.getCustomFieldsFor('TaxCategory');
         this.filters = this.createFilterCollection()
             .addIdFilter()
@@ -2869,12 +2878,12 @@ class TaxCategoryListComponent extends TypedBaseListComponent {
             refreshListOnChanges: [this.filters.valueChanges, this.sorts.valueChanges],
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TaxCategoryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TaxCategoryListComponent, selector: "vdr-tax-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"tax-category-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateTaxCategory']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-tax-category' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"tax-category-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    id=\"tax-category-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"tax-category-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-taxCategory=\"item\">\r\n            {{ taxCategory.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-taxCategory=\"item\">\r\n            {{ taxCategory.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-taxCategory=\"item\">\r\n            {{ taxCategory.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-taxCategory=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', taxCategory.id]\"\r\n                ><span>{{ taxCategory.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.default-tax-category' | translate\" id=\"default-tax-category\">\r\n        <ng-template let-taxCategory=\"item\">\r\n            <vdr-chip *ngIf=\"taxCategory.isDefault\">{{ 'common.default-tax-category' | translate }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TaxCategoryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TaxCategoryListComponent, selector: "vdr-tax-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"tax-category-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateTaxCategory']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-tax-category' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"tax-category-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"tax-category-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-taxCategory=\"item\">\r\n            {{ taxCategory.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-taxCategory=\"item\">\r\n            {{ taxCategory.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-taxCategory=\"item\">\r\n            {{ taxCategory.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-taxCategory=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', taxCategory.id]\"\r\n                ><span>{{ taxCategory.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.default-tax-category' | translate\" id=\"default-tax-category\">\r\n        <ng-template let-taxCategory=\"item\">\r\n            <vdr-chip *ngIf=\"taxCategory.isDefault\">{{ 'common.default-tax-category' | translate }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TaxCategoryListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TaxCategoryListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-tax-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"tax-category-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateTaxCategory']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-tax-category' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"tax-category-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    id=\"tax-category-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"tax-category-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-taxCategory=\"item\">\r\n            {{ taxCategory.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-taxCategory=\"item\">\r\n            {{ taxCategory.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-taxCategory=\"item\">\r\n            {{ taxCategory.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-taxCategory=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', taxCategory.id]\"\r\n                ><span>{{ taxCategory.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.default-tax-category' | translate\" id=\"default-tax-category\">\r\n        <ng-template let-taxCategory=\"item\">\r\n            <vdr-chip *ngIf=\"taxCategory.isDefault\">{{ 'common.default-tax-category' | translate }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n" }]
+            args: [{ selector: 'vdr-tax-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"tax-category-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateTaxCategory']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-tax-category' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"tax-category-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"tax-category-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-taxCategory=\"item\">\r\n            {{ taxCategory.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-taxCategory=\"item\">\r\n            {{ taxCategory.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-taxCategory=\"item\">\r\n            {{ taxCategory.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-taxCategory=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', taxCategory.id]\"\r\n                ><span>{{ taxCategory.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.default-tax-category' | translate\" id=\"default-tax-category\">\r\n        <ng-template let-taxCategory=\"item\">\r\n            <vdr-chip *ngIf=\"taxCategory.isDefault\">{{ 'common.default-tax-category' | translate }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n" }]
         }], ctorParameters: () => [] });
 
 const GET_TAX_RATE_DETAIL = gql `
@@ -2994,10 +3003,10 @@ class TaxRateDetailComponent extends TypedBaseDetailComponent {
             this.setCustomFieldFormValues(this.customFields, this.detailForm.get('customFields'), entity);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TaxRateDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TaxRateDetailComponent, selector: "vdr-tax-rate-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left></vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"tax-rate-detail\" />\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-action-bar-dropdown-menu locationId=\"tax-rate-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card>\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-card>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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]=\"'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                            name=\"taxCategoryId\"\r\n                            formControlName=\"taxCategoryId\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        >\r\n                            <option\r\n                                *ngFor=\"let taxCategory of taxCategories$ | async\"\r\n                                [value]=\"taxCategory.id\"\r\n                            >\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                        <vdr-zone-selector\r\n                            name=\"zoneId\"\r\n                            formControlName=\"zoneId\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        >\r\n                        </vdr-zone-selector>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"TaxRate\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: i1.ZoneSelectorComponent, selector: "vdr-zone-selector", inputs: ["readonly", "transformControlValueAccessorValue"], outputs: ["selectedValuesChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TaxRateDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TaxRateDetailComponent, selector: "vdr-tax-rate-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left></vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"tax-rate-detail\" />\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-action-bar-dropdown-menu locationId=\"tax-rate-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card>\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-card>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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]=\"'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                            name=\"taxCategoryId\"\r\n                            formControlName=\"taxCategoryId\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        >\r\n                            <option\r\n                                *ngFor=\"let taxCategory of taxCategories$ | async\"\r\n                                [value]=\"taxCategory.id\"\r\n                            >\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                        <vdr-zone-selector\r\n                            name=\"zoneId\"\r\n                            formControlName=\"zoneId\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        >\r\n                        </vdr-zone-selector>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"TaxRate\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: i1.ZoneSelectorComponent, selector: "vdr-zone-selector", inputs: ["readonly", "transformControlValueAccessorValue"], outputs: ["selectedValuesChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TaxRateDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TaxRateDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-tax-rate-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left></vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"tax-rate-detail\" />\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-action-bar-dropdown-menu locationId=\"tax-rate-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card>\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-card>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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]=\"'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                            name=\"taxCategoryId\"\r\n                            formControlName=\"taxCategoryId\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        >\r\n                            <option\r\n                                *ngFor=\"let taxCategory of taxCategories$ | async\"\r\n                                [value]=\"taxCategory.id\"\r\n                            >\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                        <vdr-zone-selector\r\n                            name=\"zoneId\"\r\n                            formControlName=\"zoneId\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        >\r\n                        </vdr-zone-selector>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"TaxRate\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i2$1.FormBuilder }, { type: i1.NotificationService }] });
@@ -3024,6 +3033,7 @@ const GET_TAX_RATE_LIST = gql `
 class TaxRateListComponent extends TypedBaseListComponent {
     constructor() {
         super();
+        this.dataTableListId = 'tax-rate-list';
         this.customFields = this.getCustomFieldConfig('TaxRate');
         this.filters = this.createFilterCollection()
             .addIdFilter()
@@ -3075,12 +3085,12 @@ class TaxRateListComponent extends TypedBaseListComponent {
             refreshListOnChanges: [this.filters.valueChanges, this.sorts.valueChanges],
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TaxRateListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TaxRateListComponent, selector: "vdr-tax-rate-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"tax-rate-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateTaxRate']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-tax-rate' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"tax-rate-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    id=\"tax-rate-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"tax-rate-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-taxRate=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', taxRate.id]\"\r\n                ><span>{{ taxRate.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.tax-category' | translate\" id=\"tax-category\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.category.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.zone' | translate\" id=\"zone\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.zone.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.customer-group' | translate\" id=\"customer-group\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.customerGroup?.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.tax-rate' | translate\" id=\"tax-rate\" [sort]=\"sorts.get('value')\">\r\n        <ng-template let-taxRate=\"item\"> {{ taxRate.value }}% </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-taxRate=\"item\">\r\n            <vdr-chip *ngIf=\"taxRate.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!taxRate.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TaxRateListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TaxRateListComponent, selector: "vdr-tax-rate-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"tax-rate-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateTaxRate']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-tax-rate' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"tax-rate-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"tax-rate-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-taxRate=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', taxRate.id]\"\r\n                ><span>{{ taxRate.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.tax-category' | translate\" id=\"tax-category\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.category.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.zone' | translate\" id=\"zone\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.zone.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.customer-group' | translate\" id=\"customer-group\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.customerGroup?.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.tax-rate' | translate\" id=\"tax-rate\" [sort]=\"sorts.get('value')\">\r\n        <ng-template let-taxRate=\"item\"> {{ taxRate.value }}% </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-taxRate=\"item\">\r\n            <vdr-chip *ngIf=\"taxRate.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!taxRate.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TaxRateListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TaxRateListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-tax-rate-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"tax-rate-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateTaxRate']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-tax-rate' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"tax-rate-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    id=\"tax-rate-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"tax-rate-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-taxRate=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', taxRate.id]\"\r\n                ><span>{{ taxRate.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.tax-category' | translate\" id=\"tax-category\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.category.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.zone' | translate\" id=\"zone\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.zone.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.customer-group' | translate\" id=\"customer-group\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.customerGroup?.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.tax-rate' | translate\" id=\"tax-rate\" [sort]=\"sorts.get('value')\">\r\n        <ng-template let-taxRate=\"item\"> {{ taxRate.value }}% </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-taxRate=\"item\">\r\n            <vdr-chip *ngIf=\"taxRate.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!taxRate.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n" }]
+            args: [{ selector: 'vdr-tax-rate-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"tax-rate-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateTaxRate']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-tax-rate' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"tax-rate-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"tax-rate-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-taxRate=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', taxRate.id]\"\r\n                ><span>{{ taxRate.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.tax-category' | translate\" id=\"tax-category\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.category.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.zone' | translate\" id=\"zone\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.zone.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.customer-group' | translate\" id=\"customer-group\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-taxRate=\"item\">\r\n            {{ taxRate.customerGroup?.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'settings.tax-rate' | translate\" id=\"tax-rate\" [sort]=\"sorts.get('value')\">\r\n        <ng-template let-taxRate=\"item\"> {{ taxRate.value }}% </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-taxRate=\"item\">\r\n            <vdr-chip *ngIf=\"taxRate.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!taxRate.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n" }]
         }], ctorParameters: () => [] });
 
 class TestShippingMethodsComponent {
@@ -3118,10 +3128,10 @@ class TestShippingMethodsComponent {
         this.fetchTestResult$.next([this.testAddress, this.testOrderLines]);
         this.testDataUpdated = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestShippingMethodsComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TestShippingMethodsComponent, selector: "vdr-test-shipping-methods", ngImport: i0, template: "<vdr-page-block>\r\n    <div class=\"test-wrapper\">\r\n        <div class=\"\">\r\n            <vdr-test-order-builder (orderLinesChange)=\"setTestOrderLines($event)\"></vdr-test-order-builder>\r\n        </div>\r\n        <div class=\"\">\r\n            <vdr-test-address-form (addressChange)=\"setTestAddress($event)\"></vdr-test-address-form>\r\n            <vdr-shipping-eligibility-test-result\r\n                class=\"mt-1\"\r\n                [currencyCode]=\"(activeChannel$ | async)?.currencyCode\"\r\n                [okToRun]=\"allTestDataPresent()\"\r\n                [testDataUpdated]=\"testDataUpdated\"\r\n                [testResult]=\"testResult$ | async\"\r\n                (runTest)=\"runTest()\"\r\n            ></vdr-shipping-eligibility-test-result>\r\n        </div>\r\n    </div>\r\n</vdr-page-block>\r\n", styles: [".test-wrapper{display:flex;width:100%;gap:var(--space-unit)}.test-wrapper>div{flex:1}@media screen and (max-width: 992px){.test-wrapper{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: TestOrderBuilderComponent, selector: "vdr-test-order-builder", outputs: ["orderLinesChange"] }, { kind: "component", type: TestAddressFormComponent, selector: "vdr-test-address-form", outputs: ["addressChange"] }, { kind: "component", type: ShippingEligibilityTestResultComponent, selector: "vdr-shipping-eligibility-test-result", inputs: ["testResult", "okToRun", "testDataUpdated", "currencyCode"], outputs: ["runTest"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TestShippingMethodsComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TestShippingMethodsComponent, selector: "vdr-test-shipping-methods", ngImport: i0, template: "<vdr-page-block>\r\n    <div class=\"test-wrapper\">\r\n        <div class=\"\">\r\n            <vdr-test-order-builder (orderLinesChange)=\"setTestOrderLines($event)\"></vdr-test-order-builder>\r\n        </div>\r\n        <div class=\"\">\r\n            <vdr-test-address-form (addressChange)=\"setTestAddress($event)\"></vdr-test-address-form>\r\n            <vdr-shipping-eligibility-test-result\r\n                class=\"mt-1\"\r\n                [currencyCode]=\"(activeChannel$ | async)?.currencyCode\"\r\n                [okToRun]=\"allTestDataPresent()\"\r\n                [testDataUpdated]=\"testDataUpdated\"\r\n                [testResult]=\"testResult$ | async\"\r\n                (runTest)=\"runTest()\"\r\n            ></vdr-shipping-eligibility-test-result>\r\n        </div>\r\n    </div>\r\n</vdr-page-block>\r\n", styles: [".test-wrapper{display:flex;width:100%;gap:var(--space-unit)}.test-wrapper>div{flex:1}@media screen and (max-width: 992px){.test-wrapper{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: TestOrderBuilderComponent, selector: "vdr-test-order-builder", outputs: ["orderLinesChange"] }, { kind: "component", type: TestAddressFormComponent, selector: "vdr-test-address-form", outputs: ["addressChange"] }, { kind: "component", type: ShippingEligibilityTestResultComponent, selector: "vdr-shipping-eligibility-test-result", inputs: ["testResult", "okToRun", "testDataUpdated", "currencyCode"], outputs: ["runTest"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestShippingMethodsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TestShippingMethodsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-test-shipping-methods', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <div class=\"test-wrapper\">\r\n        <div class=\"\">\r\n            <vdr-test-order-builder (orderLinesChange)=\"setTestOrderLines($event)\"></vdr-test-order-builder>\r\n        </div>\r\n        <div class=\"\">\r\n            <vdr-test-address-form (addressChange)=\"setTestAddress($event)\"></vdr-test-address-form>\r\n            <vdr-shipping-eligibility-test-result\r\n                class=\"mt-1\"\r\n                [currencyCode]=\"(activeChannel$ | async)?.currencyCode\"\r\n                [okToRun]=\"allTestDataPresent()\"\r\n                [testDataUpdated]=\"testDataUpdated\"\r\n                [testResult]=\"testResult$ | async\"\r\n                (runTest)=\"runTest()\"\r\n            ></vdr-shipping-eligibility-test-result>\r\n        </div>\r\n    </div>\r\n</vdr-page-block>\r\n", styles: [".test-wrapper{display:flex;width:100%;gap:var(--space-unit)}.test-wrapper>div{flex:1}@media screen and (max-width: 992px){.test-wrapper{flex-direction:column}}\n"] }]
         }], ctorParameters: () => [{ type: i1.DataService }] });
@@ -3224,10 +3234,10 @@ class ZoneDetailComponent extends TypedBaseDetailComponent {
             this.setCustomFieldFormValues(this.customFields, this.detailForm.get('customFields'), entity);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ZoneDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ZoneDetailComponent, selector: "vdr-zone-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"zone-detail\" />\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-action-bar-dropdown-menu locationId=\"zone-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Zone\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"zone-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2$1.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZoneDetailComponent, selector: "vdr-zone-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"zone-detail\" />\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-action-bar-dropdown-menu locationId=\"zone-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Zone\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"zone-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ZoneDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-zone-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"zone-detail\" />\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-action-bar-dropdown-menu locationId=\"zone-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\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                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Zone\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"zone-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i2$1.FormBuilder }, { type: i1.NotificationService }] });
@@ -3262,6 +3272,7 @@ class ZoneListComponent extends TypedBaseListComponent {
         this.dataService = dataService;
         this.notificationService = notificationService;
         this.modalService = modalService;
+        this.dataTableListId = 'zone-list';
         this.selectedMemberIds = [];
         this.customFields = this.serverConfigService.getCustomFieldsFor('Zone');
         this.filters = this.createFilterCollection()
@@ -3357,12 +3368,12 @@ class ZoneListComponent extends TypedBaseListComponent {
     refreshMemberList() {
         this.zoneMemberList?.refresh();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ZoneListComponent, deps: [{ token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ZoneListComponent, selector: "vdr-zone-list", viewQueries: [{ propertyName: "zoneMemberList", first: true, predicate: ZoneMemberListComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <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            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"zone-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateZone']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-zone' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"zone-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-split-view [rightPanelOpen]=\"activeZone$ | async\" (closeClicked)=\"closeMembers()\">\r\n    <ng-template vdrSplitViewLeft>\r\n        <vdr-data-table-2\r\n            id=\"zone-list\"\r\n            [items]=\"items$ | async\"\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            [totalItems]=\"totalItems$ | async\"\r\n            [currentPage]=\"currentPage$ | async\"\r\n            [filters]=\"filters\"\r\n            [activeIndex]=\"activeIndex$ | async\"\r\n            (pageChange)=\"setPageNumber($event)\"\r\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n        >\r\n            <vdr-bulk-action-menu\r\n                locationId=\"zone-list\"\r\n                [hostComponent]=\"this\"\r\n                [selectionManager]=\"selectionManager\"\r\n            />\r\n            <vdr-dt2-search\r\n                [searchTermControl]=\"searchTermControl\"\r\n                [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n            />\r\n            <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.id }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('createdAt')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.createdAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('updatedAt')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.updatedAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.name' | translate\" id=\"name\"\r\n                [optional]=\"false\"\r\n                [sort]=\"sorts.get('name')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    <a class=\"button-ghost\" [routerLink]=\"['./', customerGroup.id]\"\r\n                        ><span>{{ customerGroup.name }}</span>\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.view-contents' | translate\" id=\"view-contents\" [optional]=\"false\">\r\n                <ng-template let-customerGroup=\"item\">\r\n                    <a\r\n                        class=\"button-small bg-weight-150\"\r\n                        [routerLink]=\"['./', { contents: customerGroup.id }]\"\r\n                        queryParamsHandling=\"preserve\"\r\n                    >\r\n                        <span>{{ 'settings.view-zone-members' | translate }}</span>\r\n                        <clr-icon shape=\"file-group\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-custom-field-column\r\n                *ngFor=\"let customField of customFields\"\r\n                [customField]=\"customField\"\r\n                [sort]=\"sorts\"\r\n            />\r\n        </vdr-data-table-2>\r\n    </ng-template>\r\n    <ng-template vdrSplitViewRight [splitViewTitle]=\"(activeZone$ | async)?.name\">\r\n        <ng-container *ngIf=\"activeZone$ | async as activeZone\">\r\n            <button class=\"button-ghost ml-4\" (click)=\"addToZone(activeZone)\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                <span>{{\r\n                    'settings.add-countries-to-zone' | translate : { zoneName: activeZone.name }\r\n                }}</span>\r\n            </button>\r\n            <vdr-zone-member-list\r\n                *ngIf=\"activeZone$ | async as activeZone\"\r\n                locationId=\"zone-members-list\"\r\n                [selectedMemberIds]=\"selectedMemberIds\"\r\n                [activeZone]=\"activeZone\"\r\n                (selectionChange)=\"selectedMemberIds = $event\"\r\n            />\r\n        </ng-container>\r\n    </ng-template>\r\n</vdr-split-view>\r\n", 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-inline-start: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"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.SplitViewComponent, selector: "vdr-split-view", inputs: ["rightPanelOpen"], outputs: ["closeClicked"] }, { kind: "directive", type: i1.SplitViewLeftDirective, selector: "[vdrSplitViewLeft]" }, { kind: "directive", type: i1.SplitViewRightDirective, selector: "[vdrSplitViewRight]", inputs: ["splitViewTitle"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: ZoneMemberListComponent, selector: "vdr-zone-member-list", inputs: ["locationId", "members", "selectedMemberIds", "activeZone"], outputs: ["selectionChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneListComponent, deps: [{ token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZoneListComponent, selector: "vdr-zone-list", viewQueries: [{ propertyName: "zoneMemberList", first: true, predicate: ZoneMemberListComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <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            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"zone-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateZone']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-zone' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"zone-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-split-view [rightPanelOpen]=\"activeZone$ | async\" (closeClicked)=\"closeMembers()\">\r\n    <ng-template vdrSplitViewLeft>\r\n        <vdr-data-table-2\r\n            [id]=\"dataTableListId\"\r\n            [items]=\"items$ | async\"\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            [totalItems]=\"totalItems$ | async\"\r\n            [currentPage]=\"currentPage$ | async\"\r\n            [filters]=\"filters\"\r\n            [activeIndex]=\"activeIndex$ | async\"\r\n            (pageChange)=\"setPageNumber($event)\"\r\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n            (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n        >\r\n            <vdr-bulk-action-menu\r\n                locationId=\"zone-list\"\r\n                [hostComponent]=\"this\"\r\n                [selectionManager]=\"selectionManager\"\r\n            />\r\n            <vdr-dt2-search\r\n                [searchTermControl]=\"searchTermControl\"\r\n                [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n            />\r\n            <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.id }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('createdAt')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.createdAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('updatedAt')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.updatedAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.name' | translate\" id=\"name\"\r\n                [optional]=\"false\"\r\n                [sort]=\"sorts.get('name')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    <a class=\"button-ghost\" [routerLink]=\"['./', customerGroup.id]\"\r\n                        ><span>{{ customerGroup.name }}</span>\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.view-contents' | translate\" id=\"view-contents\" [optional]=\"false\">\r\n                <ng-template let-customerGroup=\"item\">\r\n                    <a\r\n                        class=\"button-small bg-weight-150\"\r\n                        [routerLink]=\"['./', { contents: customerGroup.id }]\"\r\n                        queryParamsHandling=\"preserve\"\r\n                    >\r\n                        <span>{{ 'settings.view-zone-members' | translate }}</span>\r\n                        <clr-icon shape=\"file-group\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-custom-field-column\r\n                *ngFor=\"let customField of customFields\"\r\n                [customField]=\"customField\"\r\n                [sort]=\"sorts\"\r\n            />\r\n        </vdr-data-table-2>\r\n    </ng-template>\r\n    <ng-template vdrSplitViewRight [splitViewTitle]=\"(activeZone$ | async)?.name\">\r\n        <ng-container *ngIf=\"activeZone$ | async as activeZone\">\r\n            <button class=\"button-ghost ml-4\" (click)=\"addToZone(activeZone)\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                <span>{{\r\n                    'settings.add-countries-to-zone' | translate : { zoneName: activeZone.name }\r\n                }}</span>\r\n            </button>\r\n            <vdr-zone-member-list\r\n                *ngIf=\"activeZone$ | async as activeZone\"\r\n                locationId=\"zone-members-list\"\r\n                [selectedMemberIds]=\"selectedMemberIds\"\r\n                [activeZone]=\"activeZone\"\r\n                (selectionChange)=\"selectedMemberIds = $event\"\r\n            />\r\n        </ng-container>\r\n    </ng-template>\r\n</vdr-split-view>\r\n", 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-inline-start: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"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.SplitViewComponent, selector: "vdr-split-view", inputs: ["rightPanelOpen"], outputs: ["closeClicked"] }, { kind: "directive", type: i1.SplitViewLeftDirective, selector: "[vdrSplitViewLeft]" }, { kind: "directive", type: i1.SplitViewRightDirective, selector: "[vdrSplitViewRight]", inputs: ["splitViewTitle"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: ZoneMemberListComponent, selector: "vdr-zone-member-list", inputs: ["locationId", "members", "selectedMemberIds", "activeZone"], outputs: ["selectionChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ZoneListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-zone-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <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            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"zone-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateZone']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-zone' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"zone-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-split-view [rightPanelOpen]=\"activeZone$ | async\" (closeClicked)=\"closeMembers()\">\r\n    <ng-template vdrSplitViewLeft>\r\n        <vdr-data-table-2\r\n            id=\"zone-list\"\r\n            [items]=\"items$ | async\"\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            [totalItems]=\"totalItems$ | async\"\r\n            [currentPage]=\"currentPage$ | async\"\r\n            [filters]=\"filters\"\r\n            [activeIndex]=\"activeIndex$ | async\"\r\n            (pageChange)=\"setPageNumber($event)\"\r\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n        >\r\n            <vdr-bulk-action-menu\r\n                locationId=\"zone-list\"\r\n                [hostComponent]=\"this\"\r\n                [selectionManager]=\"selectionManager\"\r\n            />\r\n            <vdr-dt2-search\r\n                [searchTermControl]=\"searchTermControl\"\r\n                [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n            />\r\n            <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.id }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('createdAt')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.createdAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('updatedAt')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.updatedAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.name' | translate\" id=\"name\"\r\n                [optional]=\"false\"\r\n                [sort]=\"sorts.get('name')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    <a class=\"button-ghost\" [routerLink]=\"['./', customerGroup.id]\"\r\n                        ><span>{{ customerGroup.name }}</span>\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.view-contents' | translate\" id=\"view-contents\" [optional]=\"false\">\r\n                <ng-template let-customerGroup=\"item\">\r\n                    <a\r\n                        class=\"button-small bg-weight-150\"\r\n                        [routerLink]=\"['./', { contents: customerGroup.id }]\"\r\n                        queryParamsHandling=\"preserve\"\r\n                    >\r\n                        <span>{{ 'settings.view-zone-members' | translate }}</span>\r\n                        <clr-icon shape=\"file-group\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-custom-field-column\r\n                *ngFor=\"let customField of customFields\"\r\n                [customField]=\"customField\"\r\n                [sort]=\"sorts\"\r\n            />\r\n        </vdr-data-table-2>\r\n    </ng-template>\r\n    <ng-template vdrSplitViewRight [splitViewTitle]=\"(activeZone$ | async)?.name\">\r\n        <ng-container *ngIf=\"activeZone$ | async as activeZone\">\r\n            <button class=\"button-ghost ml-4\" (click)=\"addToZone(activeZone)\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                <span>{{\r\n                    'settings.add-countries-to-zone' | translate : { zoneName: activeZone.name }\r\n                }}</span>\r\n            </button>\r\n            <vdr-zone-member-list\r\n                *ngIf=\"activeZone$ | async as activeZone\"\r\n                locationId=\"zone-members-list\"\r\n                [selectedMemberIds]=\"selectedMemberIds\"\r\n                [activeZone]=\"activeZone\"\r\n                (selectionChange)=\"selectedMemberIds = $event\"\r\n            />\r\n        </ng-container>\r\n    </ng-template>\r\n</vdr-split-view>\r\n", 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-inline-start: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"] }]
+            args: [{ selector: 'vdr-zone-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <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            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"zone-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateSettings', 'CreateZone']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'settings.create-new-zone' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"zone-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-split-view [rightPanelOpen]=\"activeZone$ | async\" (closeClicked)=\"closeMembers()\">\r\n    <ng-template vdrSplitViewLeft>\r\n        <vdr-data-table-2\r\n            [id]=\"dataTableListId\"\r\n            [items]=\"items$ | async\"\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            [totalItems]=\"totalItems$ | async\"\r\n            [currentPage]=\"currentPage$ | async\"\r\n            [filters]=\"filters\"\r\n            [activeIndex]=\"activeIndex$ | async\"\r\n            (pageChange)=\"setPageNumber($event)\"\r\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n            (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n        >\r\n            <vdr-bulk-action-menu\r\n                locationId=\"zone-list\"\r\n                [hostComponent]=\"this\"\r\n                [selectionManager]=\"selectionManager\"\r\n            />\r\n            <vdr-dt2-search\r\n                [searchTermControl]=\"searchTermControl\"\r\n                [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n            />\r\n            <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.id }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('createdAt')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.createdAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('updatedAt')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.updatedAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.name' | translate\" id=\"name\"\r\n                [optional]=\"false\"\r\n                [sort]=\"sorts.get('name')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    <a class=\"button-ghost\" [routerLink]=\"['./', customerGroup.id]\"\r\n                        ><span>{{ customerGroup.name }}</span>\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.view-contents' | translate\" id=\"view-contents\" [optional]=\"false\">\r\n                <ng-template let-customerGroup=\"item\">\r\n                    <a\r\n                        class=\"button-small bg-weight-150\"\r\n                        [routerLink]=\"['./', { contents: customerGroup.id }]\"\r\n                        queryParamsHandling=\"preserve\"\r\n                    >\r\n                        <span>{{ 'settings.view-zone-members' | translate }}</span>\r\n                        <clr-icon shape=\"file-group\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-custom-field-column\r\n                *ngFor=\"let customField of customFields\"\r\n                [customField]=\"customField\"\r\n                [sort]=\"sorts\"\r\n            />\r\n        </vdr-data-table-2>\r\n    </ng-template>\r\n    <ng-template vdrSplitViewRight [splitViewTitle]=\"(activeZone$ | async)?.name\">\r\n        <ng-container *ngIf=\"activeZone$ | async as activeZone\">\r\n            <button class=\"button-ghost ml-4\" (click)=\"addToZone(activeZone)\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                <span>{{\r\n                    'settings.add-countries-to-zone' | translate : { zoneName: activeZone.name }\r\n                }}</span>\r\n            </button>\r\n            <vdr-zone-member-list\r\n                *ngIf=\"activeZone$ | async as activeZone\"\r\n                locationId=\"zone-members-list\"\r\n                [selectedMemberIds]=\"selectedMemberIds\"\r\n                [activeZone]=\"activeZone\"\r\n                (selectionChange)=\"selectedMemberIds = $event\"\r\n            />\r\n        </ng-container>\r\n    </ng-template>\r\n</vdr-split-view>\r\n", 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-inline-start: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"] }]
         }], ctorParameters: () => [{ type: i1.DataService }, { type: i1.NotificationService }, { type: i1.ModalService }], propDecorators: { zoneMemberList: [{
                 type: ViewChild,
                 args: [ZoneMemberListComponent]
@@ -3407,10 +3418,10 @@ class ProfileResolver extends BaseEntityResolver {
             .getActiveAdministrator()
             .mapStream(data => data.activeAdministrator));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProfileResolver, deps: [{ token: i3$1.Router }, { token: i1.DataService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProfileResolver, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProfileResolver, deps: [{ token: i3$1.Router }, { token: i1.DataService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProfileResolver, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProfileResolver, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProfileResolver, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3962,8 +3973,8 @@ class SettingsModule {
         });
         SettingsModule.hasRegisteredTabsAndBulkActions = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SettingsModule, deps: [{ token: i1.BulkActionRegistryService }, { token: i1.PageService }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: SettingsModule, declarations: [TaxCategoryListComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SettingsModule, deps: [{ token: i1.BulkActionRegistryService }, { token: i1.PageService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SettingsModule, declarations: [TaxCategoryListComponent,
             TaxCategoryDetailComponent,
             AdministratorListComponent,
             RoleListComponent,
@@ -3997,7 +4008,7 @@ class SettingsModule {
             ZoneDetailComponent,
             StockLocationListComponent,
             StockLocationDetailComponent], imports: [SharedModule, i3$1.RouterModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SettingsModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SettingsModule, providers: [
             {
                 provide: ROUTES,
                 useFactory: (pageService) => createRoutes(pageService),
@@ -4006,7 +4017,7 @@ class SettingsModule {
             },
         ], imports: [SharedModule, RouterModule.forChild([])] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SettingsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SettingsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SharedModule, RouterModule.forChild([])],