@vendure/admin-ui 3.2.0 → 3.2.1

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

@@ -18,11 +18,11 @@ import * as i3$2 from '@ng-select/ng-select';
 
 class CustomerStatusLabelComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CustomerStatusLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CustomerStatusLabelComponent, isStandalone: false, selector: "vdr-customer-status-label", inputs: { customer: "customer" }, ngImport: i0, template: "<vdr-chip *ngIf=\"customer.user?.id\">\r\n    <ng-container *ngIf=\"customer.user?.verified\">\r\n        <clr-icon shape=\"check-circle\" class=\"verified-user-icon\"></clr-icon>\r\n        {{ 'customer.verified' | translate }}\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!customer.user?.verified\">\r\n        <clr-icon shape=\"check-circle\" class=\"registered-user-icon\"></clr-icon>\r\n        {{ 'customer.registered' | translate }}\r\n    </ng-container>\r\n</vdr-chip>\r\n<vdr-chip *ngIf=\"!customer.user?.id\">{{ 'customer.guest' | translate }}</vdr-chip>\r\n", styles: [".registered-user-icon{color:var(--color-grey-300)}.verified-user-icon{color:var(--color-success-500)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CustomerStatusLabelComponent, isStandalone: false, selector: "vdr-customer-status-label", inputs: { customer: "customer" }, ngImport: i0, template: "<vdr-chip *ngIf=\"customer.user?.id\">\n    <ng-container *ngIf=\"customer.user?.verified\">\n        <clr-icon shape=\"check-circle\" class=\"verified-user-icon\"></clr-icon>\n        {{ 'customer.verified' | translate }}\n    </ng-container>\n    <ng-container *ngIf=\"!customer.user?.verified\">\n        <clr-icon shape=\"check-circle\" class=\"registered-user-icon\"></clr-icon>\n        {{ 'customer.registered' | translate }}\n    </ng-container>\n</vdr-chip>\n<vdr-chip *ngIf=\"!customer.user?.id\">{{ 'customer.guest' | translate }}</vdr-chip>\n", styles: [".registered-user-icon{color:var(--color-grey-300)}.verified-user-icon{color:var(--color-success-500)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CustomerStatusLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-customer-status-label', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-chip *ngIf=\"customer.user?.id\">\r\n    <ng-container *ngIf=\"customer.user?.verified\">\r\n        <clr-icon shape=\"check-circle\" class=\"verified-user-icon\"></clr-icon>\r\n        {{ 'customer.verified' | translate }}\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!customer.user?.verified\">\r\n        <clr-icon shape=\"check-circle\" class=\"registered-user-icon\"></clr-icon>\r\n        {{ 'customer.registered' | translate }}\r\n    </ng-container>\r\n</vdr-chip>\r\n<vdr-chip *ngIf=\"!customer.user?.id\">{{ 'customer.guest' | translate }}</vdr-chip>\r\n", styles: [".registered-user-icon{color:var(--color-grey-300)}.verified-user-icon{color:var(--color-success-500)}\n"] }]
+            args: [{ selector: 'vdr-customer-status-label', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-chip *ngIf=\"customer.user?.id\">\n    <ng-container *ngIf=\"customer.user?.verified\">\n        <clr-icon shape=\"check-circle\" class=\"verified-user-icon\"></clr-icon>\n        {{ 'customer.verified' | translate }}\n    </ng-container>\n    <ng-container *ngIf=\"!customer.user?.verified\">\n        <clr-icon shape=\"check-circle\" class=\"registered-user-icon\"></clr-icon>\n        {{ 'customer.registered' | translate }}\n    </ng-container>\n</vdr-chip>\n<vdr-chip *ngIf=\"!customer.user?.id\">{{ 'customer.guest' | translate }}</vdr-chip>\n", styles: [".registered-user-icon{color:var(--color-grey-300)}.verified-user-icon{color:var(--color-success-500)}\n"] }]
         }], propDecorators: { customer: [{
                 type: Input
             }] } });
@@ -83,11 +83,11 @@ class CustomerGroupMemberListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CustomerGroupMemberListComponent, deps: [{ token: i2.Router }, { token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CustomerGroupMemberListComponent, isStandalone: false, selector: "vdr-customer-group-member-list", inputs: { locationId: "locationId", members: "members", totalItems: "totalItems", route: "route", selectedMemberIds: "selectedMemberIds", activeGroup: "activeGroup" }, outputs: { selectionChange: "selectionChange", fetchParamsChange: "fetchParamsChange" }, ngImport: i0, template: "<vdr-data-table-2\r\n    [id]=\"locationId\"\r\n    [items]=\"members\"\r\n    [itemsPerPage]=\"membersItemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems\"\r\n    [currentPage]=\"membersCurrentPage$ | async\"\r\n    (pageChange)=\"setContentsPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setContentsItemsPerPage($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]=\"'customer.search-customers-by-email' | translate\"\r\n    ></vdr-dt2-search>\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 [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.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-customer=\"item\">\r\n            {{ customer.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.name' | translate\" id=\"name\" [optional]=\"false\">\r\n        <ng-template let-customer=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['/customer/customers', customer.id]\"\r\n                ><span> {{ customer.title }} {{ customer.firstName }} {{ customer.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]=\"'common.status' | translate\" id=\"status\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-customer=\"item\">\r\n            <vdr-customer-status-label [customer]=\"customer\" />\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.email-address' | translate\" id=\"email-address\">\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.emailAddress }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-data-table-2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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", "trackByPath"], 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: CustomerStatusLabelComponent, selector: "vdr-customer-status-label", inputs: ["customer"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CustomerGroupMemberListComponent, isStandalone: false, selector: "vdr-customer-group-member-list", inputs: { locationId: "locationId", members: "members", totalItems: "totalItems", route: "route", selectedMemberIds: "selectedMemberIds", activeGroup: "activeGroup" }, outputs: { selectionChange: "selectionChange", fetchParamsChange: "fetchParamsChange" }, ngImport: i0, template: "<vdr-data-table-2\n    [id]=\"locationId\"\n    [items]=\"members\"\n    [itemsPerPage]=\"membersItemsPerPage$ | async\"\n    [totalItems]=\"totalItems\"\n    [currentPage]=\"membersCurrentPage$ | async\"\n    (pageChange)=\"setContentsPageNumber($event)\"\n    (itemsPerPageChange)=\"setContentsItemsPerPage($event)\"\n>\n    <vdr-bulk-action-menu\n        [locationId]=\"locationId\"\n        [hostComponent]=\"this\"\n        [selectionManager]=\"selectionManager\"\n    ></vdr-bulk-action-menu>\n    <vdr-dt2-search\n        [searchTermControl]=\"filterTermControl\"\n        [searchTermPlaceholder]=\"'customer.search-customers-by-email' | translate\"\n    ></vdr-dt2-search>\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n        <ng-template let-customerGroup=\"item\">\n            {{ customerGroup.id }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\n        <ng-template let-customer=\"item\">\n            {{ customer.createdAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\n        <ng-template let-customer=\"item\">\n            {{ customer.createdAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'customer.name' | translate\" id=\"name\" [optional]=\"false\">\n        <ng-template let-customer=\"item\">\n            <a class=\"button-ghost\" [routerLink]=\"['/customer/customers', customer.id]\"\n                ><span> {{ customer.title }} {{ customer.firstName }} {{ customer.lastName }} </span>\n                <clr-icon shape=\"arrow right\"></clr-icon>\n            </a>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.status' | translate\" id=\"status\" [hiddenByDefault]=\"true\">\n        <ng-template let-customer=\"item\">\n            <vdr-customer-status-label [customer]=\"customer\" />\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'customer.email-address' | translate\" id=\"email-address\">\n        <ng-template let-customer=\"item\">\n            {{ customer.emailAddress }}\n        </ng-template>\n    </vdr-dt2-column>\n</vdr-data-table-2>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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", "trackByPath"], 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: CustomerStatusLabelComponent, selector: "vdr-customer-status-label", inputs: ["customer"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CustomerGroupMemberListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-customer-group-member-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-data-table-2\r\n    [id]=\"locationId\"\r\n    [items]=\"members\"\r\n    [itemsPerPage]=\"membersItemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems\"\r\n    [currentPage]=\"membersCurrentPage$ | async\"\r\n    (pageChange)=\"setContentsPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setContentsItemsPerPage($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]=\"'customer.search-customers-by-email' | translate\"\r\n    ></vdr-dt2-search>\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 [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.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-customer=\"item\">\r\n            {{ customer.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.name' | translate\" id=\"name\" [optional]=\"false\">\r\n        <ng-template let-customer=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['/customer/customers', customer.id]\"\r\n                ><span> {{ customer.title }} {{ customer.firstName }} {{ customer.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]=\"'common.status' | translate\" id=\"status\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-customer=\"item\">\r\n            <vdr-customer-status-label [customer]=\"customer\" />\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.email-address' | translate\" id=\"email-address\">\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.emailAddress }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-data-table-2>\r\n" }]
+            args: [{ selector: 'vdr-customer-group-member-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-data-table-2\n    [id]=\"locationId\"\n    [items]=\"members\"\n    [itemsPerPage]=\"membersItemsPerPage$ | async\"\n    [totalItems]=\"totalItems\"\n    [currentPage]=\"membersCurrentPage$ | async\"\n    (pageChange)=\"setContentsPageNumber($event)\"\n    (itemsPerPageChange)=\"setContentsItemsPerPage($event)\"\n>\n    <vdr-bulk-action-menu\n        [locationId]=\"locationId\"\n        [hostComponent]=\"this\"\n        [selectionManager]=\"selectionManager\"\n    ></vdr-bulk-action-menu>\n    <vdr-dt2-search\n        [searchTermControl]=\"filterTermControl\"\n        [searchTermPlaceholder]=\"'customer.search-customers-by-email' | translate\"\n    ></vdr-dt2-search>\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n        <ng-template let-customerGroup=\"item\">\n            {{ customerGroup.id }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\n        <ng-template let-customer=\"item\">\n            {{ customer.createdAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\n        <ng-template let-customer=\"item\">\n            {{ customer.createdAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'customer.name' | translate\" id=\"name\" [optional]=\"false\">\n        <ng-template let-customer=\"item\">\n            <a class=\"button-ghost\" [routerLink]=\"['/customer/customers', customer.id]\"\n                ><span> {{ customer.title }} {{ customer.firstName }} {{ customer.lastName }} </span>\n                <clr-icon shape=\"arrow right\"></clr-icon>\n            </a>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.status' | translate\" id=\"status\" [hiddenByDefault]=\"true\">\n        <ng-template let-customer=\"item\">\n            <vdr-customer-status-label [customer]=\"customer\" />\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'customer.email-address' | translate\" id=\"email-address\">\n        <ng-template let-customer=\"item\">\n            {{ customer.emailAddress }}\n        </ng-template>\n    </vdr-dt2-column>\n</vdr-data-table-2>\n" }]
         }], ctorParameters: () => [{ type: i2.Router }, { type: i1.DataService }], propDecorators: { locationId: [{
                 type: Input
             }], members: [{
@@ -130,11 +130,11 @@ class AddCustomerToGroupDialogComponent {
         this.resolveWith(this.selectedCustomerIds);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AddCustomerToGroupDialogComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: AddCustomerToGroupDialogComponent, isStandalone: false, selector: "vdr-add-customer-to-group-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'customer.add-customers-to-group-with-name' | translate: {groupName: group.name} }}\r\n</ng-template>\r\n\r\n<vdr-customer-group-member-list\r\n    locationId=\"customer-group-members-picker-list\"\r\n    [members]=\"customers$ | async\"\r\n    [totalItems]=\"customersTotal$ | async\"\r\n    [route]=\"route\"\r\n    [selectedMemberIds]=\"selectedCustomerIds\"\r\n    (fetchParamsChange)=\"fetchGroupMembers$.next($event)\"\r\n    (selectionChange)=\"selectedCustomerIds = $event\"\r\n/>\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]=\"!selectedCustomerIds.length\" class=\"btn btn-primary\">\r\n        {{ 'customer.add-customers-to-group-with-count' | translate: {count: selectedCustomerIds.length} }}\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: CustomerGroupMemberListComponent, selector: "vdr-customer-group-member-list", inputs: ["locationId", "members", "totalItems", "route", "selectedMemberIds", "activeGroup"], outputs: ["selectionChange", "fetchParamsChange"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: AddCustomerToGroupDialogComponent, isStandalone: false, selector: "vdr-add-customer-to-group-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\n    {{ 'customer.add-customers-to-group-with-name' | translate: {groupName: group.name} }}\n</ng-template>\n\n<vdr-customer-group-member-list\n    locationId=\"customer-group-members-picker-list\"\n    [members]=\"customers$ | async\"\n    [totalItems]=\"customersTotal$ | async\"\n    [route]=\"route\"\n    [selectedMemberIds]=\"selectedCustomerIds\"\n    (fetchParamsChange)=\"fetchGroupMembers$.next($event)\"\n    (selectionChange)=\"selectedCustomerIds = $event\"\n/>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button type=\"submit\" (click)=\"add()\" [disabled]=\"!selectedCustomerIds.length\" class=\"btn btn-primary\">\n        {{ 'customer.add-customers-to-group-with-count' | translate: {count: selectedCustomerIds.length} }}\n    </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: CustomerGroupMemberListComponent, selector: "vdr-customer-group-member-list", inputs: ["locationId", "members", "totalItems", "route", "selectedMemberIds", "activeGroup"], outputs: ["selectionChange", "fetchParamsChange"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AddCustomerToGroupDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-add-customer-to-group-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\r\n    {{ 'customer.add-customers-to-group-with-name' | translate: {groupName: group.name} }}\r\n</ng-template>\r\n\r\n<vdr-customer-group-member-list\r\n    locationId=\"customer-group-members-picker-list\"\r\n    [members]=\"customers$ | async\"\r\n    [totalItems]=\"customersTotal$ | async\"\r\n    [route]=\"route\"\r\n    [selectedMemberIds]=\"selectedCustomerIds\"\r\n    (fetchParamsChange)=\"fetchGroupMembers$.next($event)\"\r\n    (selectionChange)=\"selectedCustomerIds = $event\"\r\n/>\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]=\"!selectedCustomerIds.length\" class=\"btn btn-primary\">\r\n        {{ 'customer.add-customers-to-group-with-count' | translate: {count: selectedCustomerIds.length} }}\r\n    </button>\r\n</ng-template>\r\n" }]
+            args: [{ selector: 'vdr-add-customer-to-group-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\n    {{ 'customer.add-customers-to-group-with-name' | translate: {groupName: group.name} }}\n</ng-template>\n\n<vdr-customer-group-member-list\n    locationId=\"customer-group-members-picker-list\"\n    [members]=\"customers$ | async\"\n    [totalItems]=\"customersTotal$ | async\"\n    [route]=\"route\"\n    [selectedMemberIds]=\"selectedCustomerIds\"\n    (fetchParamsChange)=\"fetchGroupMembers$.next($event)\"\n    (selectionChange)=\"selectedCustomerIds = $event\"\n/>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button type=\"submit\" (click)=\"add()\" [disabled]=\"!selectedCustomerIds.length\" class=\"btn btn-primary\">\n        {{ 'customer.add-customers-to-group-with-count' | translate: {count: selectedCustomerIds.length} }}\n    </button>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1.DataService }] });
 
 class AddressDetailDialogComponent {
@@ -152,11 +152,11 @@ class AddressDetailDialogComponent {
         this.resolveWith(this.addressForm);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AddressDetailDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: AddressDetailDialogComponent, isStandalone: false, selector: "vdr-address-detail-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <span *ngIf=\"addressForm.get('streetLine1')?.value as streetLine1\">{{ streetLine1 }},</span>\r\n    <span *ngIf=\"addressForm.get('countryCode')?.value as countryCode\"> {{ countryCode }}</span>\r\n</ng-template>\r\n\r\n<vdr-address-form\r\n    [formGroup]=\"addressForm\"\r\n    [availableCountries]=\"availableCountries\"\r\n    [customFields]=\"customFields\"\r\n></vdr-address-form>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"save()\"\r\n        [disabled]=\"!addressForm.valid || !addressForm.touched\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.update' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: ["clr-input-container{margin-bottom:12px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: AddressDetailDialogComponent, isStandalone: false, selector: "vdr-address-detail-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\n    <span *ngIf=\"addressForm.get('streetLine1')?.value as streetLine1\">{{ streetLine1 }},</span>\n    <span *ngIf=\"addressForm.get('countryCode')?.value as countryCode\"> {{ countryCode }}</span>\n</ng-template>\n\n<vdr-address-form\n    [formGroup]=\"addressForm\"\n    [availableCountries]=\"availableCountries\"\n    [customFields]=\"customFields\"\n></vdr-address-form>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button\n        type=\"submit\"\n        (click)=\"save()\"\n        [disabled]=\"!addressForm.valid || !addressForm.touched\"\n        class=\"btn btn-primary\"\n    >\n        {{ 'common.update' | translate }}\n    </button>\n</ng-template>\n", styles: ["clr-input-container{margin-bottom:12px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AddressDetailDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-address-detail-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\r\n    <span *ngIf=\"addressForm.get('streetLine1')?.value as streetLine1\">{{ streetLine1 }},</span>\r\n    <span *ngIf=\"addressForm.get('countryCode')?.value as countryCode\"> {{ countryCode }}</span>\r\n</ng-template>\r\n\r\n<vdr-address-form\r\n    [formGroup]=\"addressForm\"\r\n    [availableCountries]=\"availableCountries\"\r\n    [customFields]=\"customFields\"\r\n></vdr-address-form>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"save()\"\r\n        [disabled]=\"!addressForm.valid || !addressForm.touched\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.update' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: ["clr-input-container{margin-bottom:12px}\n"] }]
+            args: [{ selector: 'vdr-address-detail-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\n    <span *ngIf=\"addressForm.get('streetLine1')?.value as streetLine1\">{{ streetLine1 }},</span>\n    <span *ngIf=\"addressForm.get('countryCode')?.value as countryCode\"> {{ countryCode }}</span>\n</ng-template>\n\n<vdr-address-form\n    [formGroup]=\"addressForm\"\n    [availableCountries]=\"availableCountries\"\n    [customFields]=\"customFields\"\n></vdr-address-form>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button\n        type=\"submit\"\n        (click)=\"save()\"\n        [disabled]=\"!addressForm.valid || !addressForm.touched\"\n        class=\"btn btn-primary\"\n    >\n        {{ 'common.update' | translate }}\n    </button>\n</ng-template>\n", styles: ["clr-input-container{margin-bottom:12px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 class AddressCardComponent {
@@ -222,11 +222,11 @@ class AddressCardComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AddressCardComponent, deps: [{ token: i1.ModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: AddressCardComponent, isStandalone: false, selector: "vdr-address-card", inputs: { addressForm: "addressForm", customFields: "customFields", availableCountries: "availableCountries", isDefaultBilling: "isDefaultBilling", isDefaultShipping: "isDefaultShipping", editable: "editable" }, outputs: { setAsDefaultShipping: "setAsDefaultShipping", setAsDefaultBilling: "setAsDefaultBilling", deleteAddress: "deleteAddress" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card\" *ngIf=\"addressForm.value as address\">\r\n    <div class=\"card-header\">\r\n        <div class=\"address-title\">\r\n            <span class=\"street-line\" *ngIf=\"address.streetLine1\">{{ address.streetLine1 }},</span>\r\n            {{ address.countryCode }}\r\n        </div>\r\n        <div class=\"default-controls\">\r\n            <vdr-chip class=\"is-default p8\" *ngIf=\"isDefaultShipping\">\r\n                <clr-icon shape=\"truck\"></clr-icon>\r\n                {{ 'customer.default-shipping-address' | translate }}\r\n            </vdr-chip>\r\n            <vdr-chip class=\"is-default p8\" *ngIf=\"isDefaultBilling\">\r\n                <clr-icon shape=\"credit-card\"></clr-icon>\r\n                {{ 'customer.default-billing-address' | translate }}\r\n            </vdr-chip>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"card-text\">\r\n            <vdr-formatted-address [address]=\"address\"></vdr-formatted-address>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-footer\">\r\n        <div class=\"address-actions\">\r\n            <vdr-entity-info [entity]=\"address\"></vdr-entity-info>\r\n            <ng-container *ngIf=\"editable\">\r\n                <button class=\"button-small\" (click)=\"editAddress()\">\r\n                    {{ 'common.edit' | translate }}\r\n                </button>\r\n                <vdr-dropdown>\r\n                    <button type=\"button\" class=\"button-small\" vdrDropdownTrigger>\r\n                        {{ 'common.more' | translate }}\r\n                        <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu>\r\n                        <button\r\n                            vdrDropdownItem\r\n                            [disabled]=\"isDefaultShipping\"\r\n                            (click)=\"setAsDefaultShippingAddress()\"\r\n                        >\r\n                            {{ 'customer.set-as-default-shipping-address' | translate }}\r\n                        </button>\r\n                        <button\r\n                            vdrDropdownItem\r\n                            [disabled]=\"isDefaultBilling\"\r\n                            (click)=\"setAsDefaultBillingAddress()\"\r\n                        >\r\n                            {{ 'customer.set-as-default-billing-address' | translate }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                        <button type=\"button\" (click)=\"delete()\" vdrDropdownItem>\r\n                            <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                            {{ 'common.delete' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;max-width:360px}clr-input-container{margin-bottom:12px}.defaul-controls{display:flex}.is-default{margin:0;color:var(--color-success-500)}.address-actions{display:flex;align-items:center;gap:var(--space-unit)}.address-actions vdr-entity-info{margin-top:1px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { 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: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: AddressCardComponent, isStandalone: false, selector: "vdr-address-card", inputs: { addressForm: "addressForm", customFields: "customFields", availableCountries: "availableCountries", isDefaultBilling: "isDefaultBilling", isDefaultShipping: "isDefaultShipping", editable: "editable" }, outputs: { setAsDefaultShipping: "setAsDefaultShipping", setAsDefaultBilling: "setAsDefaultBilling", deleteAddress: "deleteAddress" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card\" *ngIf=\"addressForm.value as address\">\n    <div class=\"card-header\">\n        <div class=\"address-title\">\n            <span class=\"street-line\" *ngIf=\"address.streetLine1\">{{ address.streetLine1 }},</span>\n            {{ address.countryCode }}\n        </div>\n        <div class=\"default-controls\">\n            <vdr-chip class=\"is-default p8\" *ngIf=\"isDefaultShipping\">\n                <clr-icon shape=\"truck\"></clr-icon>\n                {{ 'customer.default-shipping-address' | translate }}\n            </vdr-chip>\n            <vdr-chip class=\"is-default p8\" *ngIf=\"isDefaultBilling\">\n                <clr-icon shape=\"credit-card\"></clr-icon>\n                {{ 'customer.default-billing-address' | translate }}\n            </vdr-chip>\n        </div>\n    </div>\n    <div class=\"card-block\">\n        <div class=\"card-text\">\n            <vdr-formatted-address [address]=\"address\"></vdr-formatted-address>\n        </div>\n    </div>\n    <div class=\"card-footer\">\n        <div class=\"address-actions\">\n            <vdr-entity-info [entity]=\"address\"></vdr-entity-info>\n            <ng-container *ngIf=\"editable\">\n                <button class=\"button-small\" (click)=\"editAddress()\">\n                    {{ 'common.edit' | translate }}\n                </button>\n                <vdr-dropdown>\n                    <button type=\"button\" class=\"button-small\" vdrDropdownTrigger>\n                        {{ 'common.more' | translate }}\n                        <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\n                    </button>\n                    <vdr-dropdown-menu>\n                        <button\n                            vdrDropdownItem\n                            [disabled]=\"isDefaultShipping\"\n                            (click)=\"setAsDefaultShippingAddress()\"\n                        >\n                            {{ 'customer.set-as-default-shipping-address' | translate }}\n                        </button>\n                        <button\n                            vdrDropdownItem\n                            [disabled]=\"isDefaultBilling\"\n                            (click)=\"setAsDefaultBillingAddress()\"\n                        >\n                            {{ 'customer.set-as-default-billing-address' | translate }}\n                        </button>\n                        <div class=\"dropdown-divider\"></div>\n                        <button type=\"button\" (click)=\"delete()\" vdrDropdownItem>\n                            <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n                            {{ 'common.delete' | translate }}\n                        </button>\n                    </vdr-dropdown-menu>\n                </vdr-dropdown>\n            </ng-container>\n        </div>\n    </div>\n</div>\n", styles: [":host{display:block;max-width:360px}clr-input-container{margin-bottom:12px}.defaul-controls{display:flex}.is-default{margin:0;color:var(--color-success-500)}.address-actions{display:flex;align-items:center;gap:var(--space-unit)}.address-actions vdr-entity-info{margin-top:1px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { 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: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AddressCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-address-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"card\" *ngIf=\"addressForm.value as address\">\r\n    <div class=\"card-header\">\r\n        <div class=\"address-title\">\r\n            <span class=\"street-line\" *ngIf=\"address.streetLine1\">{{ address.streetLine1 }},</span>\r\n            {{ address.countryCode }}\r\n        </div>\r\n        <div class=\"default-controls\">\r\n            <vdr-chip class=\"is-default p8\" *ngIf=\"isDefaultShipping\">\r\n                <clr-icon shape=\"truck\"></clr-icon>\r\n                {{ 'customer.default-shipping-address' | translate }}\r\n            </vdr-chip>\r\n            <vdr-chip class=\"is-default p8\" *ngIf=\"isDefaultBilling\">\r\n                <clr-icon shape=\"credit-card\"></clr-icon>\r\n                {{ 'customer.default-billing-address' | translate }}\r\n            </vdr-chip>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"card-text\">\r\n            <vdr-formatted-address [address]=\"address\"></vdr-formatted-address>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-footer\">\r\n        <div class=\"address-actions\">\r\n            <vdr-entity-info [entity]=\"address\"></vdr-entity-info>\r\n            <ng-container *ngIf=\"editable\">\r\n                <button class=\"button-small\" (click)=\"editAddress()\">\r\n                    {{ 'common.edit' | translate }}\r\n                </button>\r\n                <vdr-dropdown>\r\n                    <button type=\"button\" class=\"button-small\" vdrDropdownTrigger>\r\n                        {{ 'common.more' | translate }}\r\n                        <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu>\r\n                        <button\r\n                            vdrDropdownItem\r\n                            [disabled]=\"isDefaultShipping\"\r\n                            (click)=\"setAsDefaultShippingAddress()\"\r\n                        >\r\n                            {{ 'customer.set-as-default-shipping-address' | translate }}\r\n                        </button>\r\n                        <button\r\n                            vdrDropdownItem\r\n                            [disabled]=\"isDefaultBilling\"\r\n                            (click)=\"setAsDefaultBillingAddress()\"\r\n                        >\r\n                            {{ 'customer.set-as-default-billing-address' | translate }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                        <button type=\"button\" (click)=\"delete()\" vdrDropdownItem>\r\n                            <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                            {{ 'common.delete' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;max-width:360px}clr-input-container{margin-bottom:12px}.defaul-controls{display:flex}.is-default{margin:0;color:var(--color-success-500)}.address-actions{display:flex;align-items:center;gap:var(--space-unit)}.address-actions vdr-entity-info{margin-top:1px}\n"] }]
+            args: [{ selector: 'vdr-address-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"card\" *ngIf=\"addressForm.value as address\">\n    <div class=\"card-header\">\n        <div class=\"address-title\">\n            <span class=\"street-line\" *ngIf=\"address.streetLine1\">{{ address.streetLine1 }},</span>\n            {{ address.countryCode }}\n        </div>\n        <div class=\"default-controls\">\n            <vdr-chip class=\"is-default p8\" *ngIf=\"isDefaultShipping\">\n                <clr-icon shape=\"truck\"></clr-icon>\n                {{ 'customer.default-shipping-address' | translate }}\n            </vdr-chip>\n            <vdr-chip class=\"is-default p8\" *ngIf=\"isDefaultBilling\">\n                <clr-icon shape=\"credit-card\"></clr-icon>\n                {{ 'customer.default-billing-address' | translate }}\n            </vdr-chip>\n        </div>\n    </div>\n    <div class=\"card-block\">\n        <div class=\"card-text\">\n            <vdr-formatted-address [address]=\"address\"></vdr-formatted-address>\n        </div>\n    </div>\n    <div class=\"card-footer\">\n        <div class=\"address-actions\">\n            <vdr-entity-info [entity]=\"address\"></vdr-entity-info>\n            <ng-container *ngIf=\"editable\">\n                <button class=\"button-small\" (click)=\"editAddress()\">\n                    {{ 'common.edit' | translate }}\n                </button>\n                <vdr-dropdown>\n                    <button type=\"button\" class=\"button-small\" vdrDropdownTrigger>\n                        {{ 'common.more' | translate }}\n                        <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\n                    </button>\n                    <vdr-dropdown-menu>\n                        <button\n                            vdrDropdownItem\n                            [disabled]=\"isDefaultShipping\"\n                            (click)=\"setAsDefaultShippingAddress()\"\n                        >\n                            {{ 'customer.set-as-default-shipping-address' | translate }}\n                        </button>\n                        <button\n                            vdrDropdownItem\n                            [disabled]=\"isDefaultBilling\"\n                            (click)=\"setAsDefaultBillingAddress()\"\n                        >\n                            {{ 'customer.set-as-default-billing-address' | translate }}\n                        </button>\n                        <div class=\"dropdown-divider\"></div>\n                        <button type=\"button\" (click)=\"delete()\" vdrDropdownItem>\n                            <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n                            {{ 'common.delete' | translate }}\n                        </button>\n                    </vdr-dropdown-menu>\n                </vdr-dropdown>\n            </ng-container>\n        </div>\n    </div>\n</div>\n", styles: [":host{display:block;max-width:360px}clr-input-container{margin-bottom:12px}.defaul-controls{display:flex}.is-default{margin:0;color:var(--color-success-500)}.address-actions{display:flex;align-items:center;gap:var(--space-unit)}.address-actions vdr-entity-info{margin-top:1px}\n"] }]
         }], ctorParameters: () => [{ type: i1.ModalService }, { type: i0.ChangeDetectorRef }], propDecorators: { addressForm: [{
                 type: Input
             }], customFields: [{
@@ -264,11 +264,11 @@ class SelectCustomerGroupDialogComponent {
         this.resolveWith(this.selectedGroupIds);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SelectCustomerGroupDialogComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SelectCustomerGroupDialogComponent, isStandalone: false, selector: "vdr-select-customer-group-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'customer.add-customer-to-group' | translate }}\r\n</ng-template>\r\n\r\n<ng-select\r\n    [items]=\"groups$ | async\"\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"true\"\r\n    bindValue=\"id\"\r\n    [(ngModel)]=\"selectedGroupIds\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"false\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <span aria-hidden=\"true\" class=\"ng-value-icon left\" (click)=\"clear(item)\"> \u00D7 </span>\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n</ng-select>\r\n\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]=\"!selectedGroupIds.length\" class=\"btn btn-primary\">\r\n        {{ 'customer.add-customer-to-groups-with-count' | translate: {count: selectedGroupIds.length} }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "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", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SelectCustomerGroupDialogComponent, isStandalone: false, selector: "vdr-select-customer-group-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\n    {{ 'customer.add-customer-to-group' | translate }}\n</ng-template>\n\n<ng-select\n    [items]=\"groups$ | async\"\n    appendTo=\"body\"\n    [addTag]=\"false\"\n    [multiple]=\"true\"\n    bindValue=\"id\"\n    [(ngModel)]=\"selectedGroupIds\"\n    [clearable]=\"true\"\n    [searchable]=\"false\"\n>\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n        <span aria-hidden=\"true\" class=\"ng-value-icon left\" (click)=\"clear(item)\"> \u00D7 </span>\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\n    </ng-template>\n    <ng-template ng-option-tmp let-item=\"item\">\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\n    </ng-template>\n</ng-select>\n\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button type=\"submit\" (click)=\"add()\" [disabled]=\"!selectedGroupIds.length\" class=\"btn btn-primary\">\n        {{ 'customer.add-customer-to-groups-with-count' | translate: {count: selectedGroupIds.length} }}\n    </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "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", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SelectCustomerGroupDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-select-customer-group-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\r\n    {{ 'customer.add-customer-to-group' | translate }}\r\n</ng-template>\r\n\r\n<ng-select\r\n    [items]=\"groups$ | async\"\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"true\"\r\n    bindValue=\"id\"\r\n    [(ngModel)]=\"selectedGroupIds\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"false\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <span aria-hidden=\"true\" class=\"ng-value-icon left\" (click)=\"clear(item)\"> \u00D7 </span>\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n</ng-select>\r\n\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]=\"!selectedGroupIds.length\" class=\"btn btn-primary\">\r\n        {{ 'customer.add-customer-to-groups-with-count' | translate: {count: selectedGroupIds.length} }}\r\n    </button>\r\n</ng-template>\r\n" }]
+            args: [{ selector: 'vdr-select-customer-group-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\n    {{ 'customer.add-customer-to-group' | translate }}\n</ng-template>\n\n<ng-select\n    [items]=\"groups$ | async\"\n    appendTo=\"body\"\n    [addTag]=\"false\"\n    [multiple]=\"true\"\n    bindValue=\"id\"\n    [(ngModel)]=\"selectedGroupIds\"\n    [clearable]=\"true\"\n    [searchable]=\"false\"\n>\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n        <span aria-hidden=\"true\" class=\"ng-value-icon left\" (click)=\"clear(item)\"> \u00D7 </span>\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\n    </ng-template>\n    <ng-template ng-option-tmp let-item=\"item\">\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\n    </ng-template>\n</ng-select>\n\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button type=\"submit\" (click)=\"add()\" [disabled]=\"!selectedGroupIds.length\" class=\"btn btn-primary\">\n        {{ 'customer.add-customer-to-groups-with-count' | translate: {count: selectedGroupIds.length} }}\n    </button>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1.DataService }] });
 
 class CustomerHistoryEntryHostComponent {
@@ -288,36 +288,36 @@ class CustomerHistoryEntryHostComponent {
         this.componentRef?.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CustomerHistoryEntryHostComponent, deps: [{ token: i1.HistoryEntryComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CustomerHistoryEntryHostComponent, isStandalone: false, selector: "vdr-customer-history-entry-host", inputs: { entry: "entry", customer: "customer", expanded: "expanded" }, outputs: { expandClick: "expandClick" }, viewQueries: [{ propertyName: "portalRef", first: true, predicate: ["portal"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["historyEntry"], ngImport: i0, template: `
-        <vdr-timeline-entry
-            [displayType]="instance.getDisplayType(entry)"
-            [iconShape]="instance.getIconShape && instance.getIconShape(entry)"
-            [createdAt]="entry.createdAt"
-            [name]="instance.getName && instance.getName(entry)"
-            [featured]="instance.isFeatured(entry)"
-            [collapsed]="!expanded && !instance.isFeatured(entry)"
-            (expandClick)="expandClick.emit()"
-        >
-            <div #portal></div>
-        </vdr-timeline-entry>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CustomerHistoryEntryHostComponent, isStandalone: false, selector: "vdr-customer-history-entry-host", inputs: { entry: "entry", customer: "customer", expanded: "expanded" }, outputs: { expandClick: "expandClick" }, viewQueries: [{ propertyName: "portalRef", first: true, predicate: ["portal"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["historyEntry"], ngImport: i0, template: `
+        <vdr-timeline-entry
+            [displayType]="instance.getDisplayType(entry)"
+            [iconShape]="instance.getIconShape && instance.getIconShape(entry)"
+            [createdAt]="entry.createdAt"
+            [name]="instance.getName && instance.getName(entry)"
+            [featured]="instance.isFeatured(entry)"
+            [collapsed]="!expanded && !instance.isFeatured(entry)"
+            (expandClick)="expandClick.emit()"
+        >
+            <div #portal></div>
+        </vdr-timeline-entry>
     `, isInline: true, dependencies: [{ kind: "component", type: i1.TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: ["displayType", "createdAt", "name", "featured", "iconShape", "isFirst", "isLast", "collapsed"], outputs: ["expandClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CustomerHistoryEntryHostComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'vdr-customer-history-entry-host',
-                    template: `
-        <vdr-timeline-entry
-            [displayType]="instance.getDisplayType(entry)"
-            [iconShape]="instance.getIconShape && instance.getIconShape(entry)"
-            [createdAt]="entry.createdAt"
-            [name]="instance.getName && instance.getName(entry)"
-            [featured]="instance.isFeatured(entry)"
-            [collapsed]="!expanded && !instance.isFeatured(entry)"
-            (expandClick)="expandClick.emit()"
-        >
-            <div #portal></div>
-        </vdr-timeline-entry>
+                    template: `
+        <vdr-timeline-entry
+            [displayType]="instance.getDisplayType(entry)"
+            [iconShape]="instance.getIconShape && instance.getIconShape(entry)"
+            [createdAt]="entry.createdAt"
+            [name]="instance.getName && instance.getName(entry)"
+            [featured]="instance.isFeatured(entry)"
+            [collapsed]="!expanded && !instance.isFeatured(entry)"
+            (expandClick)="expandClick.emit()"
+        >
+            <div #portal></div>
+        </vdr-timeline-entry>
     `,
                     exportAs: 'historyEntry',
                     standalone: false,
@@ -398,11 +398,11 @@ class CustomerHistoryComponent {
         this.note = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CustomerHistoryComponent, deps: [{ token: i1.HistoryEntryComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CustomerHistoryComponent, isStandalone: false, selector: "vdr-customer-history", inputs: { customer: "customer", history: "history" }, outputs: { addNote: "addNote", updateNote: "updateNote", deleteNote: "deleteNote" }, ngImport: i0, template: "<div class=\"entry-list\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\" *vdrIfPermissions=\"'UpdateCustomer'\"\r\n                        [isFirst]=\"true\">\r\n        <div class=\"note-entry\">\r\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToCustomer()\">\r\n                {{ 'order.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <ng-container *ngFor=\"let entry of history\">\r\n        <vdr-customer-history-entry-host\r\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\r\n            [customer]=\"customer\"\r\n            [entry]=\"entry\"\r\n            [expanded]=\"expanded\"\r\n            (expandClick)=\"expanded = !expanded\"\r\n        ></vdr-customer-history-entry-host>\r\n        <ng-template #defaultComponents>\r\n            <vdr-timeline-entry\r\n                [displayType]=\"getDisplayType(entry)\"\r\n                [iconShape]=\"getTimelineIcon(entry)\"\r\n                [createdAt]=\"entry.createdAt\"\r\n                [name]=\"getName(entry)\"\r\n                [featured]=\"isFeatured(entry)\"\r\n            >\r\n                <ng-container [ngSwitch]=\"entry.type\">\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_REGISTERED\">\r\n                        <div class=\"title\">\r\n                            {{ 'customer.history-customer-registered' | translate }}\r\n                        </div>\r\n                        <ng-container *ngIf=\"entry.data.strategy === 'native'; else namedStrategy\">\r\n                            {{ 'customer.history-using-native-auth-strategy' | translate }}\r\n                        </ng-container>\r\n                        <ng-template #namedStrategy>\r\n                            {{\r\n                                'customer.history-using-external-auth-strategy'\r\n                                    | translate: { strategy: entry.data.strategy }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_VERIFIED\">\r\n                        <div class=\"title\">\r\n                            {{ 'customer.history-customer-verified' | translate }}\r\n                        </div>\r\n                        <ng-container *ngIf=\"entry.data.strategy === 'native'; else namedStrategy\">\r\n                            {{ 'customer.history-using-native-auth-strategy' | translate }}\r\n                        </ng-container>\r\n                        <ng-template #namedStrategy>\r\n                            {{\r\n                                'customer.history-using-external-auth-strategy'\r\n                                    | translate: { strategy: entry.data.strategy }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_DETAIL_UPDATED\">\r\n                        <div class=\"flex\">\r\n                            {{ 'customer.history-customer-detail-updated' | translate }}\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-object-tree [value]=\"entry.data.input\"></vdr-object-tree>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDED_TO_GROUP\">\r\n                        {{\r\n                            'customer.history-customer-added-to-group'\r\n                                | translate: { groupName: entry.data.groupName }\r\n                        }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_REMOVED_FROM_GROUP\">\r\n                        {{\r\n                            'customer.history-customer-removed-from-group'\r\n                                | translate: { groupName: entry.data.groupName }\r\n                        }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDRESS_CREATED\">\r\n                        {{ 'customer.history-customer-address-created' | translate }}\r\n                        <div class=\"flex\">\r\n                            <div class=\"address-string\">{{ entry.data.address }}</div>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDRESS_UPDATED\">\r\n                        {{ 'customer.history-customer-address-updated' | translate }}\r\n                        <div class=\"flex\">\r\n                            <div class=\"address-string\">{{ entry.data.address }}</div>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-object-tree [value]=\"entry.data.input\"></vdr-object-tree>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDRESS_DELETED\">\r\n                        {{ 'customer.history-customer-address-deleted' | translate }}\r\n                        <div class=\"address-string\">{{ entry.data.address }}</div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_PASSWORD_UPDATED\">\r\n                        {{ 'customer.history-customer-password-updated' | translate }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_PASSWORD_RESET_REQUESTED\">\r\n                        {{ 'customer.history-customer-password-reset-requested' | translate }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_PASSWORD_RESET_VERIFIED\">\r\n                        {{ 'customer.history-customer-password-reset-verified' | translate }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_EMAIL_UPDATE_REQUESTED\">\r\n                        <div class=\"flex\">\r\n                            {{ 'customer.history-customer-email-update-requested' | translate }}\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-labeled-data [label]=\"'customer.old-email-address' | translate\">{{\r\n                                        entry.data.oldEmailAddress\r\n                                    }}\r\n                                </vdr-labeled-data>\r\n                                <vdr-labeled-data [label]=\"'customer.new-email-address' | translate\">{{\r\n                                        entry.data.newEmailAddress\r\n                                    }}\r\n                                </vdr-labeled-data>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_EMAIL_UPDATE_VERIFIED\">\r\n                        <div class=\"flex\">\r\n                            {{ 'customer.history-customer-email-update-verified' | translate }}\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-labeled-data [label]=\"'customer.old-email-address' | translate\">{{\r\n                                        entry.data.oldEmailAddress\r\n                                    }}\r\n                                </vdr-labeled-data>\r\n                                <vdr-labeled-data [label]=\"'customer.new-email-address' | translate\">{{\r\n                                        entry.data.newEmailAddress\r\n                                    }}\r\n                                </vdr-labeled-data>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_NOTE\">\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-dropdown>\r\n                                <button class=\"button-small ml-1\" vdrDropdownTrigger>\r\n                                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n                                </button>\r\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"updateNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateCustomer' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"edit\"></clr-icon>\r\n                                        {{ 'common.edit' | translate }}\r\n                                    </button>\r\n                                    <div class=\"dropdown-divider\"></div>\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"deleteNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateCustomer' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                        {{ 'common.delete' | translate }}\r\n                                    </button>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"title\">\r\n                            {{ entry.type | translate }}\r\n                        </div>\r\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\r\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </vdr-timeline-entry>\r\n        </ng-template>\r\n    </ng-container>\r\n    <vdr-timeline-entry [isLast]=\"true\"></vdr-timeline-entry>\r\n</div>\r\n", styles: [".entry-list{margin:24px 12px 24px 24px}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}textarea.note{flex:1;height:36px;border-radius:3px;margin-inline-end:6px}.note-text{color:var(--color-text-100);white-space:pre-wrap}.address-string{font-size:smaller;color:var(--color-text-200)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { 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: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: ["displayType", "createdAt", "name", "featured", "iconShape", "isFirst", "isLast", "collapsed"], outputs: ["expandClick"] }, { kind: "component", type: i1.HistoryEntryDetailComponent, selector: "vdr-history-entry-detail" }, { kind: "component", type: CustomerHistoryEntryHostComponent, selector: "vdr-customer-history-entry-host", inputs: ["entry", "customer", "expanded"], outputs: ["expandClick"], exportAs: ["historyEntry"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CustomerHistoryComponent, isStandalone: false, selector: "vdr-customer-history", inputs: { customer: "customer", history: "history" }, outputs: { addNote: "addNote", updateNote: "updateNote", deleteNote: "deleteNote" }, ngImport: i0, template: "<div class=\"entry-list\">\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\" *vdrIfPermissions=\"'UpdateCustomer'\"\n                        [isFirst]=\"true\">\n        <div class=\"note-entry\">\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToCustomer()\">\n                {{ 'order.add-note' | translate }}\n            </button>\n        </div>\n    </vdr-timeline-entry>\n    <ng-container *ngFor=\"let entry of history\">\n        <vdr-customer-history-entry-host\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\n            [customer]=\"customer\"\n            [entry]=\"entry\"\n            [expanded]=\"expanded\"\n            (expandClick)=\"expanded = !expanded\"\n        ></vdr-customer-history-entry-host>\n        <ng-template #defaultComponents>\n            <vdr-timeline-entry\n                [displayType]=\"getDisplayType(entry)\"\n                [iconShape]=\"getTimelineIcon(entry)\"\n                [createdAt]=\"entry.createdAt\"\n                [name]=\"getName(entry)\"\n                [featured]=\"isFeatured(entry)\"\n            >\n                <ng-container [ngSwitch]=\"entry.type\">\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_REGISTERED\">\n                        <div class=\"title\">\n                            {{ 'customer.history-customer-registered' | translate }}\n                        </div>\n                        <ng-container *ngIf=\"entry.data.strategy === 'native'; else namedStrategy\">\n                            {{ 'customer.history-using-native-auth-strategy' | translate }}\n                        </ng-container>\n                        <ng-template #namedStrategy>\n                            {{\n                                'customer.history-using-external-auth-strategy'\n                                    | translate: { strategy: entry.data.strategy }\n                            }}\n                        </ng-template>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_VERIFIED\">\n                        <div class=\"title\">\n                            {{ 'customer.history-customer-verified' | translate }}\n                        </div>\n                        <ng-container *ngIf=\"entry.data.strategy === 'native'; else namedStrategy\">\n                            {{ 'customer.history-using-native-auth-strategy' | translate }}\n                        </ng-container>\n                        <ng-template #namedStrategy>\n                            {{\n                                'customer.history-using-external-auth-strategy'\n                                    | translate: { strategy: entry.data.strategy }\n                            }}\n                        </ng-template>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_DETAIL_UPDATED\">\n                        <div class=\"flex\">\n                            {{ 'customer.history-customer-detail-updated' | translate }}\n                            <vdr-history-entry-detail>\n                                <vdr-object-tree [value]=\"entry.data.input\"></vdr-object-tree>\n                            </vdr-history-entry-detail>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDED_TO_GROUP\">\n                        {{\n                            'customer.history-customer-added-to-group'\n                                | translate: { groupName: entry.data.groupName }\n                        }}\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_REMOVED_FROM_GROUP\">\n                        {{\n                            'customer.history-customer-removed-from-group'\n                                | translate: { groupName: entry.data.groupName }\n                        }}\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDRESS_CREATED\">\n                        {{ 'customer.history-customer-address-created' | translate }}\n                        <div class=\"flex\">\n                            <div class=\"address-string\">{{ entry.data.address }}</div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDRESS_UPDATED\">\n                        {{ 'customer.history-customer-address-updated' | translate }}\n                        <div class=\"flex\">\n                            <div class=\"address-string\">{{ entry.data.address }}</div>\n                            <vdr-history-entry-detail>\n                                <vdr-object-tree [value]=\"entry.data.input\"></vdr-object-tree>\n                            </vdr-history-entry-detail>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDRESS_DELETED\">\n                        {{ 'customer.history-customer-address-deleted' | translate }}\n                        <div class=\"address-string\">{{ entry.data.address }}</div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_PASSWORD_UPDATED\">\n                        {{ 'customer.history-customer-password-updated' | translate }}\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_PASSWORD_RESET_REQUESTED\">\n                        {{ 'customer.history-customer-password-reset-requested' | translate }}\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_PASSWORD_RESET_VERIFIED\">\n                        {{ 'customer.history-customer-password-reset-verified' | translate }}\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_EMAIL_UPDATE_REQUESTED\">\n                        <div class=\"flex\">\n                            {{ 'customer.history-customer-email-update-requested' | translate }}\n                            <vdr-history-entry-detail>\n                                <vdr-labeled-data [label]=\"'customer.old-email-address' | translate\">{{\n                                        entry.data.oldEmailAddress\n                                    }}\n                                </vdr-labeled-data>\n                                <vdr-labeled-data [label]=\"'customer.new-email-address' | translate\">{{\n                                        entry.data.newEmailAddress\n                                    }}\n                                </vdr-labeled-data>\n                            </vdr-history-entry-detail>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_EMAIL_UPDATE_VERIFIED\">\n                        <div class=\"flex\">\n                            {{ 'customer.history-customer-email-update-verified' | translate }}\n                            <vdr-history-entry-detail>\n                                <vdr-labeled-data [label]=\"'customer.old-email-address' | translate\">{{\n                                        entry.data.oldEmailAddress\n                                    }}\n                                </vdr-labeled-data>\n                                <vdr-labeled-data [label]=\"'customer.new-email-address' | translate\">{{\n                                        entry.data.newEmailAddress\n                                    }}\n                                </vdr-labeled-data>\n                            </vdr-history-entry-detail>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_NOTE\">\n                        <div class=\"flex\">\n                            <div class=\"note-text\">\n                                {{ entry.data.note }}\n                            </div>\n                            <div class=\"flex-spacer\"></div>\n                            <vdr-dropdown>\n                                <button class=\"button-small ml-1\" vdrDropdownTrigger>\n                                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\n                                </button>\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n                                    <button\n                                        vdrDropdownItem\n                                        (click)=\"updateNote.emit(entry)\"\n                                        [disabled]=\"!('UpdateCustomer' | hasPermission)\"\n                                    >\n                                        <clr-icon shape=\"edit\"></clr-icon>\n                                        {{ 'common.edit' | translate }}\n                                    </button>\n                                    <div class=\"dropdown-divider\"></div>\n                                    <button\n                                        vdrDropdownItem\n                                        (click)=\"deleteNote.emit(entry)\"\n                                        [disabled]=\"!('UpdateCustomer' | hasPermission)\"\n                                    >\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n                                        {{ 'common.delete' | translate }}\n                                    </button>\n                                </vdr-dropdown-menu>\n                            </vdr-dropdown>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <div class=\"title\">\n                            {{ entry.type | translate }}\n                        </div>\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\n                        </vdr-history-entry-detail>\n                    </ng-container>\n                </ng-container>\n            </vdr-timeline-entry>\n        </ng-template>\n    </ng-container>\n    <vdr-timeline-entry [isLast]=\"true\"></vdr-timeline-entry>\n</div>\n", styles: [".entry-list{margin:24px 12px 24px 24px}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}textarea.note{flex:1;height:36px;border-radius:3px;margin-inline-end:6px}.note-text{color:var(--color-text-100);white-space:pre-wrap}.address-string{font-size:smaller;color:var(--color-text-200)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { 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: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: ["displayType", "createdAt", "name", "featured", "iconShape", "isFirst", "isLast", "collapsed"], outputs: ["expandClick"] }, { kind: "component", type: i1.HistoryEntryDetailComponent, selector: "vdr-history-entry-detail" }, { kind: "component", type: CustomerHistoryEntryHostComponent, selector: "vdr-customer-history-entry-host", inputs: ["entry", "customer", "expanded"], outputs: ["expandClick"], exportAs: ["historyEntry"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CustomerHistoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-customer-history', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"entry-list\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\" *vdrIfPermissions=\"'UpdateCustomer'\"\r\n                        [isFirst]=\"true\">\r\n        <div class=\"note-entry\">\r\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToCustomer()\">\r\n                {{ 'order.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <ng-container *ngFor=\"let entry of history\">\r\n        <vdr-customer-history-entry-host\r\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\r\n            [customer]=\"customer\"\r\n            [entry]=\"entry\"\r\n            [expanded]=\"expanded\"\r\n            (expandClick)=\"expanded = !expanded\"\r\n        ></vdr-customer-history-entry-host>\r\n        <ng-template #defaultComponents>\r\n            <vdr-timeline-entry\r\n                [displayType]=\"getDisplayType(entry)\"\r\n                [iconShape]=\"getTimelineIcon(entry)\"\r\n                [createdAt]=\"entry.createdAt\"\r\n                [name]=\"getName(entry)\"\r\n                [featured]=\"isFeatured(entry)\"\r\n            >\r\n                <ng-container [ngSwitch]=\"entry.type\">\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_REGISTERED\">\r\n                        <div class=\"title\">\r\n                            {{ 'customer.history-customer-registered' | translate }}\r\n                        </div>\r\n                        <ng-container *ngIf=\"entry.data.strategy === 'native'; else namedStrategy\">\r\n                            {{ 'customer.history-using-native-auth-strategy' | translate }}\r\n                        </ng-container>\r\n                        <ng-template #namedStrategy>\r\n                            {{\r\n                                'customer.history-using-external-auth-strategy'\r\n                                    | translate: { strategy: entry.data.strategy }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_VERIFIED\">\r\n                        <div class=\"title\">\r\n                            {{ 'customer.history-customer-verified' | translate }}\r\n                        </div>\r\n                        <ng-container *ngIf=\"entry.data.strategy === 'native'; else namedStrategy\">\r\n                            {{ 'customer.history-using-native-auth-strategy' | translate }}\r\n                        </ng-container>\r\n                        <ng-template #namedStrategy>\r\n                            {{\r\n                                'customer.history-using-external-auth-strategy'\r\n                                    | translate: { strategy: entry.data.strategy }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_DETAIL_UPDATED\">\r\n                        <div class=\"flex\">\r\n                            {{ 'customer.history-customer-detail-updated' | translate }}\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-object-tree [value]=\"entry.data.input\"></vdr-object-tree>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDED_TO_GROUP\">\r\n                        {{\r\n                            'customer.history-customer-added-to-group'\r\n                                | translate: { groupName: entry.data.groupName }\r\n                        }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_REMOVED_FROM_GROUP\">\r\n                        {{\r\n                            'customer.history-customer-removed-from-group'\r\n                                | translate: { groupName: entry.data.groupName }\r\n                        }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDRESS_CREATED\">\r\n                        {{ 'customer.history-customer-address-created' | translate }}\r\n                        <div class=\"flex\">\r\n                            <div class=\"address-string\">{{ entry.data.address }}</div>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDRESS_UPDATED\">\r\n                        {{ 'customer.history-customer-address-updated' | translate }}\r\n                        <div class=\"flex\">\r\n                            <div class=\"address-string\">{{ entry.data.address }}</div>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-object-tree [value]=\"entry.data.input\"></vdr-object-tree>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDRESS_DELETED\">\r\n                        {{ 'customer.history-customer-address-deleted' | translate }}\r\n                        <div class=\"address-string\">{{ entry.data.address }}</div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_PASSWORD_UPDATED\">\r\n                        {{ 'customer.history-customer-password-updated' | translate }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_PASSWORD_RESET_REQUESTED\">\r\n                        {{ 'customer.history-customer-password-reset-requested' | translate }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_PASSWORD_RESET_VERIFIED\">\r\n                        {{ 'customer.history-customer-password-reset-verified' | translate }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_EMAIL_UPDATE_REQUESTED\">\r\n                        <div class=\"flex\">\r\n                            {{ 'customer.history-customer-email-update-requested' | translate }}\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-labeled-data [label]=\"'customer.old-email-address' | translate\">{{\r\n                                        entry.data.oldEmailAddress\r\n                                    }}\r\n                                </vdr-labeled-data>\r\n                                <vdr-labeled-data [label]=\"'customer.new-email-address' | translate\">{{\r\n                                        entry.data.newEmailAddress\r\n                                    }}\r\n                                </vdr-labeled-data>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_EMAIL_UPDATE_VERIFIED\">\r\n                        <div class=\"flex\">\r\n                            {{ 'customer.history-customer-email-update-verified' | translate }}\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-labeled-data [label]=\"'customer.old-email-address' | translate\">{{\r\n                                        entry.data.oldEmailAddress\r\n                                    }}\r\n                                </vdr-labeled-data>\r\n                                <vdr-labeled-data [label]=\"'customer.new-email-address' | translate\">{{\r\n                                        entry.data.newEmailAddress\r\n                                    }}\r\n                                </vdr-labeled-data>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_NOTE\">\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-dropdown>\r\n                                <button class=\"button-small ml-1\" vdrDropdownTrigger>\r\n                                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n                                </button>\r\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"updateNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateCustomer' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"edit\"></clr-icon>\r\n                                        {{ 'common.edit' | translate }}\r\n                                    </button>\r\n                                    <div class=\"dropdown-divider\"></div>\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"deleteNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateCustomer' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                        {{ 'common.delete' | translate }}\r\n                                    </button>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"title\">\r\n                            {{ entry.type | translate }}\r\n                        </div>\r\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\r\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </vdr-timeline-entry>\r\n        </ng-template>\r\n    </ng-container>\r\n    <vdr-timeline-entry [isLast]=\"true\"></vdr-timeline-entry>\r\n</div>\r\n", styles: [".entry-list{margin:24px 12px 24px 24px}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}textarea.note{flex:1;height:36px;border-radius:3px;margin-inline-end:6px}.note-text{color:var(--color-text-100);white-space:pre-wrap}.address-string{font-size:smaller;color:var(--color-text-200)}\n"] }]
+            args: [{ selector: 'vdr-customer-history', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"entry-list\">\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\" *vdrIfPermissions=\"'UpdateCustomer'\"\n                        [isFirst]=\"true\">\n        <div class=\"note-entry\">\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToCustomer()\">\n                {{ 'order.add-note' | translate }}\n            </button>\n        </div>\n    </vdr-timeline-entry>\n    <ng-container *ngFor=\"let entry of history\">\n        <vdr-customer-history-entry-host\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\n            [customer]=\"customer\"\n            [entry]=\"entry\"\n            [expanded]=\"expanded\"\n            (expandClick)=\"expanded = !expanded\"\n        ></vdr-customer-history-entry-host>\n        <ng-template #defaultComponents>\n            <vdr-timeline-entry\n                [displayType]=\"getDisplayType(entry)\"\n                [iconShape]=\"getTimelineIcon(entry)\"\n                [createdAt]=\"entry.createdAt\"\n                [name]=\"getName(entry)\"\n                [featured]=\"isFeatured(entry)\"\n            >\n                <ng-container [ngSwitch]=\"entry.type\">\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_REGISTERED\">\n                        <div class=\"title\">\n                            {{ 'customer.history-customer-registered' | translate }}\n                        </div>\n                        <ng-container *ngIf=\"entry.data.strategy === 'native'; else namedStrategy\">\n                            {{ 'customer.history-using-native-auth-strategy' | translate }}\n                        </ng-container>\n                        <ng-template #namedStrategy>\n                            {{\n                                'customer.history-using-external-auth-strategy'\n                                    | translate: { strategy: entry.data.strategy }\n                            }}\n                        </ng-template>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_VERIFIED\">\n                        <div class=\"title\">\n                            {{ 'customer.history-customer-verified' | translate }}\n                        </div>\n                        <ng-container *ngIf=\"entry.data.strategy === 'native'; else namedStrategy\">\n                            {{ 'customer.history-using-native-auth-strategy' | translate }}\n                        </ng-container>\n                        <ng-template #namedStrategy>\n                            {{\n                                'customer.history-using-external-auth-strategy'\n                                    | translate: { strategy: entry.data.strategy }\n                            }}\n                        </ng-template>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_DETAIL_UPDATED\">\n                        <div class=\"flex\">\n                            {{ 'customer.history-customer-detail-updated' | translate }}\n                            <vdr-history-entry-detail>\n                                <vdr-object-tree [value]=\"entry.data.input\"></vdr-object-tree>\n                            </vdr-history-entry-detail>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDED_TO_GROUP\">\n                        {{\n                            'customer.history-customer-added-to-group'\n                                | translate: { groupName: entry.data.groupName }\n                        }}\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_REMOVED_FROM_GROUP\">\n                        {{\n                            'customer.history-customer-removed-from-group'\n                                | translate: { groupName: entry.data.groupName }\n                        }}\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDRESS_CREATED\">\n                        {{ 'customer.history-customer-address-created' | translate }}\n                        <div class=\"flex\">\n                            <div class=\"address-string\">{{ entry.data.address }}</div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDRESS_UPDATED\">\n                        {{ 'customer.history-customer-address-updated' | translate }}\n                        <div class=\"flex\">\n                            <div class=\"address-string\">{{ entry.data.address }}</div>\n                            <vdr-history-entry-detail>\n                                <vdr-object-tree [value]=\"entry.data.input\"></vdr-object-tree>\n                            </vdr-history-entry-detail>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDRESS_DELETED\">\n                        {{ 'customer.history-customer-address-deleted' | translate }}\n                        <div class=\"address-string\">{{ entry.data.address }}</div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_PASSWORD_UPDATED\">\n                        {{ 'customer.history-customer-password-updated' | translate }}\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_PASSWORD_RESET_REQUESTED\">\n                        {{ 'customer.history-customer-password-reset-requested' | translate }}\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_PASSWORD_RESET_VERIFIED\">\n                        {{ 'customer.history-customer-password-reset-verified' | translate }}\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_EMAIL_UPDATE_REQUESTED\">\n                        <div class=\"flex\">\n                            {{ 'customer.history-customer-email-update-requested' | translate }}\n                            <vdr-history-entry-detail>\n                                <vdr-labeled-data [label]=\"'customer.old-email-address' | translate\">{{\n                                        entry.data.oldEmailAddress\n                                    }}\n                                </vdr-labeled-data>\n                                <vdr-labeled-data [label]=\"'customer.new-email-address' | translate\">{{\n                                        entry.data.newEmailAddress\n                                    }}\n                                </vdr-labeled-data>\n                            </vdr-history-entry-detail>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_EMAIL_UPDATE_VERIFIED\">\n                        <div class=\"flex\">\n                            {{ 'customer.history-customer-email-update-verified' | translate }}\n                            <vdr-history-entry-detail>\n                                <vdr-labeled-data [label]=\"'customer.old-email-address' | translate\">{{\n                                        entry.data.oldEmailAddress\n                                    }}\n                                </vdr-labeled-data>\n                                <vdr-labeled-data [label]=\"'customer.new-email-address' | translate\">{{\n                                        entry.data.newEmailAddress\n                                    }}\n                                </vdr-labeled-data>\n                            </vdr-history-entry-detail>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_NOTE\">\n                        <div class=\"flex\">\n                            <div class=\"note-text\">\n                                {{ entry.data.note }}\n                            </div>\n                            <div class=\"flex-spacer\"></div>\n                            <vdr-dropdown>\n                                <button class=\"button-small ml-1\" vdrDropdownTrigger>\n                                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\n                                </button>\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n                                    <button\n                                        vdrDropdownItem\n                                        (click)=\"updateNote.emit(entry)\"\n                                        [disabled]=\"!('UpdateCustomer' | hasPermission)\"\n                                    >\n                                        <clr-icon shape=\"edit\"></clr-icon>\n                                        {{ 'common.edit' | translate }}\n                                    </button>\n                                    <div class=\"dropdown-divider\"></div>\n                                    <button\n                                        vdrDropdownItem\n                                        (click)=\"deleteNote.emit(entry)\"\n                                        [disabled]=\"!('UpdateCustomer' | hasPermission)\"\n                                    >\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n                                        {{ 'common.delete' | translate }}\n                                    </button>\n                                </vdr-dropdown-menu>\n                            </vdr-dropdown>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <div class=\"title\">\n                            {{ entry.type | translate }}\n                        </div>\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\n                        </vdr-history-entry-detail>\n                    </ng-container>\n                </ng-container>\n            </vdr-timeline-entry>\n        </ng-template>\n    </ng-container>\n    <vdr-timeline-entry [isLast]=\"true\"></vdr-timeline-entry>\n</div>\n", styles: [".entry-list{margin:24px 12px 24px 24px}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}textarea.note{flex:1;height:36px;border-radius:3px;margin-inline-end:6px}.note-text{color:var(--color-text-100);white-space:pre-wrap}.address-string{font-size:smaller;color:var(--color-text-200)}\n"] }]
         }], ctorParameters: () => [{ type: i1.HistoryEntryComponentService }], propDecorators: { customer: [{
                 type: Input
             }], history: [{
@@ -415,32 +415,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Output
             }] } });
 
-const CUSTOMER_DETAIL_QUERY = gql `
-    query CustomerDetailQuery($id: ID!, $orderListOptions: OrderListOptions) {
-        customer(id: $id) {
-            ...Customer
-            groups {
-                id
-                name
-            }
-            orders(options: $orderListOptions) {
-                items {
-                    id
-                    code
-                    type
-                    state
-                    total
-                    totalWithTax
-                    currencyCode
-                    createdAt
-                    updatedAt
-                    orderPlacedAt
-                }
-                totalItems
-            }
-        }
-    }
-    ${CUSTOMER_FRAGMENT}
+const CUSTOMER_DETAIL_QUERY = gql `
+    query CustomerDetailQuery($id: ID!, $orderListOptions: OrderListOptions) {
+        customer(id: $id) {
+            ...Customer
+            groups {
+                id
+                name
+            }
+            orders(options: $orderListOptions) {
+                items {
+                    id
+                    code
+                    type
+                    state
+                    total
+                    totalWithTax
+                    currencyCode
+                    createdAt
+                    updatedAt
+                    orderPlacedAt
+                }
+                totalItems
+            }
+        }
+    }
+    ${CUSTOMER_FRAGMENT}
 `;
 class CustomerDetailComponent extends TypedBaseDetailComponent {
     constructor(changeDetector, formBuilder, dataService, modalService, notificationService) {
@@ -830,25 +830,25 @@ class CustomerDetailComponent extends TypedBaseDetailComponent {
         }).single$;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CustomerDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.FormBuilder }, { token: i1.DataService }, { token: i1.ModalService }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CustomerDetailComponent, isStandalone: false, selector: "vdr-customer-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=\"customer-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"!(addressDefaultsUpdated || (detailForm.valid && detailForm.dirty))\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"'UpdateCustomer'\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"!(addressDefaultsUpdated || (detailForm.valid && detailForm.dirty))\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n            <vdr-action-bar-dropdown-menu locationId=\"customer-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-page-detail-layout>\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card *ngIf=\"entity$ | async as customer\">\r\n            <vdr-customer-status-label [customer]=\"customer\"></vdr-customer-status-label>\r\n            <vdr-labeled-data\r\n                class=\"last-login\"\r\n                *ngIf=\"customer.user?.lastLogin as lastLogin\"\r\n                [label]=\"'customer.last-login' | translate\"\r\n            >\r\n                <time [dateTime]=\"lastLogin\">{{ lastLogin | timeAgo }}</time>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card\r\n            [title]=\"'customer.customer-groups' | translate\"\r\n            *ngIf=\"(entity$ | async)?.groups as groups\"\r\n        >\r\n            <div *ngIf=\"groups.length; else noGroups\">\r\n                <vdr-chip\r\n                    *ngFor=\"let group of groups\"\r\n                    [colorFrom]=\"group.id\"\r\n                    icon=\"times\"\r\n                    (iconClick)=\"removeFromGroup(group)\"\r\n                    >{{ group.name }}</vdr-chip\r\n                >\r\n            </div>\r\n            <ng-template #noGroups>\r\n                <span class=\"color-weight-400\">\r\n                    {{ 'customer.not-a-member-of-any-groups' | translate }}\r\n                </span>\r\n            </ng-template>\r\n            <div>\r\n                <button\r\n                    class=\"button-small mt-1\"\r\n                    (click)=\"addToGroup()\"\r\n                    *vdrIfPermissions=\"'UpdateCustomerGroup'\"\r\n                >\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ 'customer.add-customer-to-group' | translate }}\r\n                </button>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <vdr-page-block>\r\n        <form class=\"form\" [formGroup]=\"detailForm.get('customer')\">\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.title' | translate\"\r\n                        for=\"title\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n                    </vdr-form-field>\r\n                    <div><!-- spacer --></div>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.first-name' | translate\"\r\n                        for=\"firstName\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.last-name' | translate\"\r\n                        for=\"lastName\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.email-address' | translate\"\r\n                        for=\"emailAddress\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.phone-number' | translate\"\r\n                        for=\"phoneNumber\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.password' | translate\"\r\n                        for=\"password\"\r\n                        *ngIf=\"isNew$ | async\"\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=\"Customer\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customer.customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\r\n        </form>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"customer-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n        <ng-container *ngIf=\"!(isNew$ | async)\">\r\n            <vdr-card [title]=\"'customer.addresses' | translate\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-address-card\r\n                        *ngFor=\"let addressForm of getAddressFormControls()\"\r\n                        [class.to-delete]=\"addressesToDeleteIds.has(addressForm.value.id)\"\r\n                        [availableCountries]=\"availableCountries$ | async\"\r\n                        [isDefaultBilling]=\"defaultBillingAddressId === addressForm.value.id\"\r\n                        [isDefaultShipping]=\"defaultShippingAddressId === addressForm.value.id\"\r\n                        [addressForm]=\"addressForm\"\r\n                        [customFields]=\"addressCustomFields\"\r\n                        [editable]=\"\r\n                            (['UpdateCustomer'] | hasPermission) &&\r\n                            !addressesToDeleteIds.has(addressForm.value.id)\r\n                        \"\r\n                        (setAsDefaultBilling)=\"setDefaultBillingAddressId($event)\"\r\n                        (setAsDefaultShipping)=\"setDefaultShippingAddressId($event)\"\r\n                        (deleteAddress)=\"toggleDeleteAddress($event)\"\r\n                    ></vdr-address-card>\r\n                </div>\r\n                <button\r\n                    class=\"btn btn-secondary mt-2\"\r\n                    (click)=\"addAddress()\"\r\n                    *vdrIfPermissions=\"'UpdateCustomer'\"\r\n                >\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ 'customer.create-new-address' | translate }}\r\n                </button>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'customer.orders' | translate\" [paddingX]=\"false\">\r\n                <vdr-data-table-2\r\n                    id=\"customer-order-list\"\r\n                    [items]=\"orders$ | async\"\r\n                    [itemsPerPage]=\"ordersPerPage\"\r\n                    [totalItems]=\"ordersCount$ | async\"\r\n                    [currentPage]=\"currentOrdersPage\"\r\n                    [emptyStateLabel]=\"'customer.no-orders-placed' | translate\"\r\n                    (itemsPerPageChange)=\"setOrderItemsPerPage($event)\"\r\n                    (pageChange)=\"setOrderCurrentPage($event)\"\r\n                >\r\n                    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.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                    >\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.createdAt | localeDate : 'short' }}\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\">\r\n                        <ng-template let-order=\"item\">\r\n                            <a class=\"button-ghost\" [routerLink]=\"['/orders', order.id]\"\r\n                                ><span>{{ order.code }}</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\r\n                        [heading]=\"'order.order-type' | translate\"\r\n                        id=\"order-type\"\r\n                        [hiddenByDefault]=\"true\"\r\n                    >\r\n                        <ng-template let-order=\"item\">\r\n                            <vdr-chip>{{ order.type }}</vdr-chip>\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\">\r\n                        <ng-template let-order=\"item\">\r\n                            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'order.total' | translate\" id=\"total\">\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\">\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.updatedAt | timeAgo }}\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'order.placed-at' | translate\" id=\"placed-at\">\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.orderPlacedAt | localeDate : 'short' }}\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                    />\r\n                </vdr-data-table-2>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'customer.customer-history' | translate\">\r\n                <vdr-customer-history\r\n                    [customer]=\"entity$ | async\"\r\n                    [history]=\"history$ | async\"\r\n                    (addNote)=\"addNoteToCustomer($event)\"\r\n                    (updateNote)=\"updateNote($event)\"\r\n                    (deleteNote)=\"deleteNote($event)\"\r\n                ></vdr-customer-history>\r\n            </vdr-card>\r\n        </ng-container>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".last-login{margin-inline-start:6px;color:var(--color-grey-500)}.to-delete{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.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.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.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { 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.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], 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.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { 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: CustomerStatusLabelComponent, selector: "vdr-customer-status-label", inputs: ["customer"] }, { kind: "component", type: AddressCardComponent, selector: "vdr-address-card", inputs: ["addressForm", "customFields", "availableCountries", "isDefaultBilling", "isDefaultShipping", "editable"], outputs: ["setAsDefaultShipping", "setAsDefaultBilling", "deleteAddress"] }, { kind: "component", type: CustomerHistoryComponent, selector: "vdr-customer-history", inputs: ["customer", "history"], outputs: ["addNote", "updateNote", "deleteNote"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CustomerDetailComponent, isStandalone: false, selector: "vdr-customer-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n    <vdr-action-bar>\n        <vdr-ab-left> </vdr-ab-left>\n\n        <vdr-ab-right>\n            <vdr-action-bar-items locationId=\"customer-detail\"></vdr-action-bar-items>\n            <button\n                class=\"btn btn-primary\"\n                *ngIf=\"isNew$ | async; else updateButton\"\n                (click)=\"create()\"\n                [disabled]=\"!(addressDefaultsUpdated || (detailForm.valid && detailForm.dirty))\"\n            >\n                {{ 'common.create' | translate }}\n            </button>\n            <ng-template #updateButton>\n                <button\n                    *vdrIfPermissions=\"'UpdateCustomer'\"\n                    class=\"btn btn-primary\"\n                    (click)=\"save()\"\n                    [disabled]=\"!(addressDefaultsUpdated || (detailForm.valid && detailForm.dirty))\"\n                >\n                    {{ 'common.update' | translate }}\n                </button>\n            </ng-template>\n            <vdr-action-bar-dropdown-menu locationId=\"customer-detail\" />\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n<vdr-page-detail-layout>\n    <vdr-page-detail-sidebar>\n        <vdr-card *ngIf=\"entity$ | async as customer\">\n            <vdr-customer-status-label [customer]=\"customer\"></vdr-customer-status-label>\n            <vdr-labeled-data\n                class=\"last-login\"\n                *ngIf=\"customer.user?.lastLogin as lastLogin\"\n                [label]=\"'customer.last-login' | translate\"\n            >\n                <time [dateTime]=\"lastLogin\">{{ lastLogin | timeAgo }}</time>\n            </vdr-labeled-data>\n        </vdr-card>\n        <vdr-card\n            [title]=\"'customer.customer-groups' | translate\"\n            *ngIf=\"(entity$ | async)?.groups as groups\"\n        >\n            <div *ngIf=\"groups.length; else noGroups\">\n                <vdr-chip\n                    *ngFor=\"let group of groups\"\n                    [colorFrom]=\"group.id\"\n                    icon=\"times\"\n                    (iconClick)=\"removeFromGroup(group)\"\n                    >{{ group.name }}</vdr-chip\n                >\n            </div>\n            <ng-template #noGroups>\n                <span class=\"color-weight-400\">\n                    {{ 'customer.not-a-member-of-any-groups' | translate }}\n                </span>\n            </ng-template>\n            <div>\n                <button\n                    class=\"button-small mt-1\"\n                    (click)=\"addToGroup()\"\n                    *vdrIfPermissions=\"'UpdateCustomerGroup'\"\n                >\n                    <clr-icon shape=\"plus\"></clr-icon>\n                    {{ 'customer.add-customer-to-group' | translate }}\n                </button>\n            </div>\n        </vdr-card>\n        <vdr-card>\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\n        </vdr-card>\n    </vdr-page-detail-sidebar>\n    <vdr-page-block>\n        <form class=\"form\" [formGroup]=\"detailForm.get('customer')\">\n            <vdr-card>\n                <div class=\"form-grid\">\n                    <vdr-form-field\n                        [label]=\"'customer.title' | translate\"\n                        for=\"title\"\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\n                    >\n                        <input id=\"title\" type=\"text\" formControlName=\"title\" />\n                    </vdr-form-field>\n                    <div><!-- spacer --></div>\n                    <vdr-form-field\n                        [label]=\"'customer.first-name' | translate\"\n                        for=\"firstName\"\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\n                    >\n                        <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\n                    </vdr-form-field>\n                    <vdr-form-field\n                        [label]=\"'customer.last-name' | translate\"\n                        for=\"lastName\"\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\n                    >\n                        <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\n                    </vdr-form-field>\n                    <vdr-form-field\n                        [label]=\"'customer.email-address' | translate\"\n                        for=\"emailAddress\"\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\n                    >\n                        <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\n                    </vdr-form-field>\n                    <vdr-form-field\n                        [label]=\"'customer.phone-number' | translate\"\n                        for=\"phoneNumber\"\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\n                    >\n                        <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\n                    </vdr-form-field>\n                    <vdr-form-field\n                        [label]=\"'customer.password' | translate\"\n                        for=\"password\"\n                        *ngIf=\"isNew$ | async\"\n                    >\n                        <input id=\"password\" type=\"password\" formControlName=\"password\" />\n                    </vdr-form-field>\n                </div>\n            </vdr-card>\n            <vdr-card\n                formGroupName=\"customFields\"\n                *ngIf=\"customFields.length\"\n                [title]=\"'common.custom-fields' | translate\"\n            >\n                <vdr-tabbed-custom-fields\n                    entityName=\"Customer\"\n                    [customFields]=\"customFields\"\n                    [customFieldsFormGroup]=\"detailForm.get('customer.customFields')\"\n                ></vdr-tabbed-custom-fields>\n            </vdr-card>\n        </form>\n        <vdr-custom-detail-component-host\n            locationId=\"customer-detail\"\n            [entity$]=\"entity$\"\n            [detailForm]=\"detailForm\"\n        ></vdr-custom-detail-component-host>\n        <ng-container *ngIf=\"!(isNew$ | async)\">\n            <vdr-card [title]=\"'customer.addresses' | translate\">\n                <div class=\"form-grid\">\n                    <vdr-address-card\n                        *ngFor=\"let addressForm of getAddressFormControls()\"\n                        [class.to-delete]=\"addressesToDeleteIds.has(addressForm.value.id)\"\n                        [availableCountries]=\"availableCountries$ | async\"\n                        [isDefaultBilling]=\"defaultBillingAddressId === addressForm.value.id\"\n                        [isDefaultShipping]=\"defaultShippingAddressId === addressForm.value.id\"\n                        [addressForm]=\"addressForm\"\n                        [customFields]=\"addressCustomFields\"\n                        [editable]=\"\n                            (['UpdateCustomer'] | hasPermission) &&\n                            !addressesToDeleteIds.has(addressForm.value.id)\n                        \"\n                        (setAsDefaultBilling)=\"setDefaultBillingAddressId($event)\"\n                        (setAsDefaultShipping)=\"setDefaultShippingAddressId($event)\"\n                        (deleteAddress)=\"toggleDeleteAddress($event)\"\n                    ></vdr-address-card>\n                </div>\n                <button\n                    class=\"btn btn-secondary mt-2\"\n                    (click)=\"addAddress()\"\n                    *vdrIfPermissions=\"'UpdateCustomer'\"\n                >\n                    <clr-icon shape=\"plus\"></clr-icon>\n                    {{ 'customer.create-new-address' | translate }}\n                </button>\n            </vdr-card>\n            <vdr-card [title]=\"'customer.orders' | translate\" [paddingX]=\"false\">\n                <vdr-data-table-2\n                    id=\"customer-order-list\"\n                    [items]=\"orders$ | async\"\n                    [itemsPerPage]=\"ordersPerPage\"\n                    [totalItems]=\"ordersCount$ | async\"\n                    [currentPage]=\"currentOrdersPage\"\n                    [emptyStateLabel]=\"'customer.no-orders-placed' | translate\"\n                    (itemsPerPageChange)=\"setOrderItemsPerPage($event)\"\n                    (pageChange)=\"setOrderCurrentPage($event)\"\n                >\n                    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n                        <ng-template let-order=\"item\">\n                            {{ order.id }}\n                        </ng-template>\n                    </vdr-dt2-column>\n                    <vdr-dt2-column\n                        [heading]=\"'common.created-at' | translate\"\n                        id=\"created-at\"\n                        [hiddenByDefault]=\"true\"\n                    >\n                        <ng-template let-order=\"item\">\n                            {{ order.createdAt | localeDate : 'short' }}\n                        </ng-template>\n                    </vdr-dt2-column>\n                    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\">\n                        <ng-template let-order=\"item\">\n                            <a class=\"button-ghost\" [routerLink]=\"['/orders', order.id]\"\n                                ><span>{{ order.code }}</span>\n                                <clr-icon shape=\"arrow right\"></clr-icon>\n                            </a>\n                        </ng-template>\n                    </vdr-dt2-column>\n                    <vdr-dt2-column\n                        [heading]=\"'order.order-type' | translate\"\n                        id=\"order-type\"\n                        [hiddenByDefault]=\"true\"\n                    >\n                        <ng-template let-order=\"item\">\n                            <vdr-chip>{{ order.type }}</vdr-chip>\n                        </ng-template>\n                    </vdr-dt2-column>\n                    <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\">\n                        <ng-template let-order=\"item\">\n                            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\n                        </ng-template>\n                    </vdr-dt2-column>\n                    <vdr-dt2-column [heading]=\"'order.total' | translate\" id=\"total\">\n                        <ng-template let-order=\"item\">\n                            {{ order.totalWithTax | localeCurrency : order.currencyCode }}\n                        </ng-template>\n                    </vdr-dt2-column>\n                    <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\">\n                        <ng-template let-order=\"item\">\n                            {{ order.updatedAt | timeAgo }}\n                        </ng-template>\n                    </vdr-dt2-column>\n                    <vdr-dt2-column [heading]=\"'order.placed-at' | translate\" id=\"placed-at\">\n                        <ng-template let-order=\"item\">\n                            {{ order.orderPlacedAt | localeDate : 'short' }}\n                        </ng-template>\n                    </vdr-dt2-column>\n                    <vdr-dt2-custom-field-column\n                        *ngFor=\"let customField of customFields\"\n                        [customField]=\"customField\"\n                    />\n                </vdr-data-table-2>\n            </vdr-card>\n            <vdr-card [title]=\"'customer.customer-history' | translate\">\n                <vdr-customer-history\n                    [customer]=\"entity$ | async\"\n                    [history]=\"history$ | async\"\n                    (addNote)=\"addNoteToCustomer($event)\"\n                    (updateNote)=\"updateNote($event)\"\n                    (deleteNote)=\"deleteNote($event)\"\n                ></vdr-customer-history>\n            </vdr-card>\n        </ng-container>\n    </vdr-page-block>\n</vdr-page-detail-layout>\n", styles: [".last-login{margin-inline-start:6px;color:var(--color-grey-500)}.to-delete{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.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.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.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { 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.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], 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.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { 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: CustomerStatusLabelComponent, selector: "vdr-customer-status-label", inputs: ["customer"] }, { kind: "component", type: AddressCardComponent, selector: "vdr-address-card", inputs: ["addressForm", "customFields", "availableCountries", "isDefaultBilling", "isDefaultShipping", "editable"], outputs: ["setAsDefaultShipping", "setAsDefaultBilling", "deleteAddress"] }, { kind: "component", type: CustomerHistoryComponent, selector: "vdr-customer-history", inputs: ["customer", "history"], outputs: ["addNote", "updateNote", "deleteNote"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CustomerDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-customer-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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=\"customer-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"!(addressDefaultsUpdated || (detailForm.valid && detailForm.dirty))\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"'UpdateCustomer'\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"!(addressDefaultsUpdated || (detailForm.valid && detailForm.dirty))\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n            <vdr-action-bar-dropdown-menu locationId=\"customer-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-page-detail-layout>\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card *ngIf=\"entity$ | async as customer\">\r\n            <vdr-customer-status-label [customer]=\"customer\"></vdr-customer-status-label>\r\n            <vdr-labeled-data\r\n                class=\"last-login\"\r\n                *ngIf=\"customer.user?.lastLogin as lastLogin\"\r\n                [label]=\"'customer.last-login' | translate\"\r\n            >\r\n                <time [dateTime]=\"lastLogin\">{{ lastLogin | timeAgo }}</time>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card\r\n            [title]=\"'customer.customer-groups' | translate\"\r\n            *ngIf=\"(entity$ | async)?.groups as groups\"\r\n        >\r\n            <div *ngIf=\"groups.length; else noGroups\">\r\n                <vdr-chip\r\n                    *ngFor=\"let group of groups\"\r\n                    [colorFrom]=\"group.id\"\r\n                    icon=\"times\"\r\n                    (iconClick)=\"removeFromGroup(group)\"\r\n                    >{{ group.name }}</vdr-chip\r\n                >\r\n            </div>\r\n            <ng-template #noGroups>\r\n                <span class=\"color-weight-400\">\r\n                    {{ 'customer.not-a-member-of-any-groups' | translate }}\r\n                </span>\r\n            </ng-template>\r\n            <div>\r\n                <button\r\n                    class=\"button-small mt-1\"\r\n                    (click)=\"addToGroup()\"\r\n                    *vdrIfPermissions=\"'UpdateCustomerGroup'\"\r\n                >\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ 'customer.add-customer-to-group' | translate }}\r\n                </button>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <vdr-page-block>\r\n        <form class=\"form\" [formGroup]=\"detailForm.get('customer')\">\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.title' | translate\"\r\n                        for=\"title\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n                    </vdr-form-field>\r\n                    <div><!-- spacer --></div>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.first-name' | translate\"\r\n                        for=\"firstName\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.last-name' | translate\"\r\n                        for=\"lastName\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.email-address' | translate\"\r\n                        for=\"emailAddress\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.phone-number' | translate\"\r\n                        for=\"phoneNumber\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.password' | translate\"\r\n                        for=\"password\"\r\n                        *ngIf=\"isNew$ | async\"\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=\"Customer\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customer.customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\r\n        </form>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"customer-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n        <ng-container *ngIf=\"!(isNew$ | async)\">\r\n            <vdr-card [title]=\"'customer.addresses' | translate\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-address-card\r\n                        *ngFor=\"let addressForm of getAddressFormControls()\"\r\n                        [class.to-delete]=\"addressesToDeleteIds.has(addressForm.value.id)\"\r\n                        [availableCountries]=\"availableCountries$ | async\"\r\n                        [isDefaultBilling]=\"defaultBillingAddressId === addressForm.value.id\"\r\n                        [isDefaultShipping]=\"defaultShippingAddressId === addressForm.value.id\"\r\n                        [addressForm]=\"addressForm\"\r\n                        [customFields]=\"addressCustomFields\"\r\n                        [editable]=\"\r\n                            (['UpdateCustomer'] | hasPermission) &&\r\n                            !addressesToDeleteIds.has(addressForm.value.id)\r\n                        \"\r\n                        (setAsDefaultBilling)=\"setDefaultBillingAddressId($event)\"\r\n                        (setAsDefaultShipping)=\"setDefaultShippingAddressId($event)\"\r\n                        (deleteAddress)=\"toggleDeleteAddress($event)\"\r\n                    ></vdr-address-card>\r\n                </div>\r\n                <button\r\n                    class=\"btn btn-secondary mt-2\"\r\n                    (click)=\"addAddress()\"\r\n                    *vdrIfPermissions=\"'UpdateCustomer'\"\r\n                >\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ 'customer.create-new-address' | translate }}\r\n                </button>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'customer.orders' | translate\" [paddingX]=\"false\">\r\n                <vdr-data-table-2\r\n                    id=\"customer-order-list\"\r\n                    [items]=\"orders$ | async\"\r\n                    [itemsPerPage]=\"ordersPerPage\"\r\n                    [totalItems]=\"ordersCount$ | async\"\r\n                    [currentPage]=\"currentOrdersPage\"\r\n                    [emptyStateLabel]=\"'customer.no-orders-placed' | translate\"\r\n                    (itemsPerPageChange)=\"setOrderItemsPerPage($event)\"\r\n                    (pageChange)=\"setOrderCurrentPage($event)\"\r\n                >\r\n                    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.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                    >\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.createdAt | localeDate : 'short' }}\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\">\r\n                        <ng-template let-order=\"item\">\r\n                            <a class=\"button-ghost\" [routerLink]=\"['/orders', order.id]\"\r\n                                ><span>{{ order.code }}</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\r\n                        [heading]=\"'order.order-type' | translate\"\r\n                        id=\"order-type\"\r\n                        [hiddenByDefault]=\"true\"\r\n                    >\r\n                        <ng-template let-order=\"item\">\r\n                            <vdr-chip>{{ order.type }}</vdr-chip>\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\">\r\n                        <ng-template let-order=\"item\">\r\n                            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'order.total' | translate\" id=\"total\">\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\">\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.updatedAt | timeAgo }}\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'order.placed-at' | translate\" id=\"placed-at\">\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.orderPlacedAt | localeDate : 'short' }}\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                    />\r\n                </vdr-data-table-2>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'customer.customer-history' | translate\">\r\n                <vdr-customer-history\r\n                    [customer]=\"entity$ | async\"\r\n                    [history]=\"history$ | async\"\r\n                    (addNote)=\"addNoteToCustomer($event)\"\r\n                    (updateNote)=\"updateNote($event)\"\r\n                    (deleteNote)=\"deleteNote($event)\"\r\n                ></vdr-customer-history>\r\n            </vdr-card>\r\n        </ng-container>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".last-login{margin-inline-start:6px;color:var(--color-grey-500)}.to-delete{opacity:.5}\n"] }]
+            args: [{ selector: 'vdr-customer-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\n    <vdr-action-bar>\n        <vdr-ab-left> </vdr-ab-left>\n\n        <vdr-ab-right>\n            <vdr-action-bar-items locationId=\"customer-detail\"></vdr-action-bar-items>\n            <button\n                class=\"btn btn-primary\"\n                *ngIf=\"isNew$ | async; else updateButton\"\n                (click)=\"create()\"\n                [disabled]=\"!(addressDefaultsUpdated || (detailForm.valid && detailForm.dirty))\"\n            >\n                {{ 'common.create' | translate }}\n            </button>\n            <ng-template #updateButton>\n                <button\n                    *vdrIfPermissions=\"'UpdateCustomer'\"\n                    class=\"btn btn-primary\"\n                    (click)=\"save()\"\n                    [disabled]=\"!(addressDefaultsUpdated || (detailForm.valid && detailForm.dirty))\"\n                >\n                    {{ 'common.update' | translate }}\n                </button>\n            </ng-template>\n            <vdr-action-bar-dropdown-menu locationId=\"customer-detail\" />\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n<vdr-page-detail-layout>\n    <vdr-page-detail-sidebar>\n        <vdr-card *ngIf=\"entity$ | async as customer\">\n            <vdr-customer-status-label [customer]=\"customer\"></vdr-customer-status-label>\n            <vdr-labeled-data\n                class=\"last-login\"\n                *ngIf=\"customer.user?.lastLogin as lastLogin\"\n                [label]=\"'customer.last-login' | translate\"\n            >\n                <time [dateTime]=\"lastLogin\">{{ lastLogin | timeAgo }}</time>\n            </vdr-labeled-data>\n        </vdr-card>\n        <vdr-card\n            [title]=\"'customer.customer-groups' | translate\"\n            *ngIf=\"(entity$ | async)?.groups as groups\"\n        >\n            <div *ngIf=\"groups.length; else noGroups\">\n                <vdr-chip\n                    *ngFor=\"let group of groups\"\n                    [colorFrom]=\"group.id\"\n                    icon=\"times\"\n                    (iconClick)=\"removeFromGroup(group)\"\n                    >{{ group.name }}</vdr-chip\n                >\n            </div>\n            <ng-template #noGroups>\n                <span class=\"color-weight-400\">\n                    {{ 'customer.not-a-member-of-any-groups' | translate }}\n                </span>\n            </ng-template>\n            <div>\n                <button\n                    class=\"button-small mt-1\"\n                    (click)=\"addToGroup()\"\n                    *vdrIfPermissions=\"'UpdateCustomerGroup'\"\n                >\n                    <clr-icon shape=\"plus\"></clr-icon>\n                    {{ 'customer.add-customer-to-group' | translate }}\n                </button>\n            </div>\n        </vdr-card>\n        <vdr-card>\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\n        </vdr-card>\n    </vdr-page-detail-sidebar>\n    <vdr-page-block>\n        <form class=\"form\" [formGroup]=\"detailForm.get('customer')\">\n            <vdr-card>\n                <div class=\"form-grid\">\n                    <vdr-form-field\n                        [label]=\"'customer.title' | translate\"\n                        for=\"title\"\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\n                    >\n                        <input id=\"title\" type=\"text\" formControlName=\"title\" />\n                    </vdr-form-field>\n                    <div><!-- spacer --></div>\n                    <vdr-form-field\n                        [label]=\"'customer.first-name' | translate\"\n                        for=\"firstName\"\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\n                    >\n                        <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\n                    </vdr-form-field>\n                    <vdr-form-field\n                        [label]=\"'customer.last-name' | translate\"\n                        for=\"lastName\"\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\n                    >\n                        <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\n                    </vdr-form-field>\n                    <vdr-form-field\n                        [label]=\"'customer.email-address' | translate\"\n                        for=\"emailAddress\"\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\n                    >\n                        <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\n                    </vdr-form-field>\n                    <vdr-form-field\n                        [label]=\"'customer.phone-number' | translate\"\n                        for=\"phoneNumber\"\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\n                    >\n                        <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\n                    </vdr-form-field>\n                    <vdr-form-field\n                        [label]=\"'customer.password' | translate\"\n                        for=\"password\"\n                        *ngIf=\"isNew$ | async\"\n                    >\n                        <input id=\"password\" type=\"password\" formControlName=\"password\" />\n                    </vdr-form-field>\n                </div>\n            </vdr-card>\n            <vdr-card\n                formGroupName=\"customFields\"\n                *ngIf=\"customFields.length\"\n                [title]=\"'common.custom-fields' | translate\"\n            >\n                <vdr-tabbed-custom-fields\n                    entityName=\"Customer\"\n                    [customFields]=\"customFields\"\n                    [customFieldsFormGroup]=\"detailForm.get('customer.customFields')\"\n                ></vdr-tabbed-custom-fields>\n            </vdr-card>\n        </form>\n        <vdr-custom-detail-component-host\n            locationId=\"customer-detail\"\n            [entity$]=\"entity$\"\n            [detailForm]=\"detailForm\"\n        ></vdr-custom-detail-component-host>\n        <ng-container *ngIf=\"!(isNew$ | async)\">\n            <vdr-card [title]=\"'customer.addresses' | translate\">\n                <div class=\"form-grid\">\n                    <vdr-address-card\n                        *ngFor=\"let addressForm of getAddressFormControls()\"\n                        [class.to-delete]=\"addressesToDeleteIds.has(addressForm.value.id)\"\n                        [availableCountries]=\"availableCountries$ | async\"\n                        [isDefaultBilling]=\"defaultBillingAddressId === addressForm.value.id\"\n                        [isDefaultShipping]=\"defaultShippingAddressId === addressForm.value.id\"\n                        [addressForm]=\"addressForm\"\n                        [customFields]=\"addressCustomFields\"\n                        [editable]=\"\n                            (['UpdateCustomer'] | hasPermission) &&\n                            !addressesToDeleteIds.has(addressForm.value.id)\n                        \"\n                        (setAsDefaultBilling)=\"setDefaultBillingAddressId($event)\"\n                        (setAsDefaultShipping)=\"setDefaultShippingAddressId($event)\"\n                        (deleteAddress)=\"toggleDeleteAddress($event)\"\n                    ></vdr-address-card>\n                </div>\n                <button\n                    class=\"btn btn-secondary mt-2\"\n                    (click)=\"addAddress()\"\n                    *vdrIfPermissions=\"'UpdateCustomer'\"\n                >\n                    <clr-icon shape=\"plus\"></clr-icon>\n                    {{ 'customer.create-new-address' | translate }}\n                </button>\n            </vdr-card>\n            <vdr-card [title]=\"'customer.orders' | translate\" [paddingX]=\"false\">\n                <vdr-data-table-2\n                    id=\"customer-order-list\"\n                    [items]=\"orders$ | async\"\n                    [itemsPerPage]=\"ordersPerPage\"\n                    [totalItems]=\"ordersCount$ | async\"\n                    [currentPage]=\"currentOrdersPage\"\n                    [emptyStateLabel]=\"'customer.no-orders-placed' | translate\"\n                    (itemsPerPageChange)=\"setOrderItemsPerPage($event)\"\n                    (pageChange)=\"setOrderCurrentPage($event)\"\n                >\n                    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n                        <ng-template let-order=\"item\">\n                            {{ order.id }}\n                        </ng-template>\n                    </vdr-dt2-column>\n                    <vdr-dt2-column\n                        [heading]=\"'common.created-at' | translate\"\n                        id=\"created-at\"\n                        [hiddenByDefault]=\"true\"\n                    >\n                        <ng-template let-order=\"item\">\n                            {{ order.createdAt | localeDate : 'short' }}\n                        </ng-template>\n                    </vdr-dt2-column>\n                    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\">\n                        <ng-template let-order=\"item\">\n                            <a class=\"button-ghost\" [routerLink]=\"['/orders', order.id]\"\n                                ><span>{{ order.code }}</span>\n                                <clr-icon shape=\"arrow right\"></clr-icon>\n                            </a>\n                        </ng-template>\n                    </vdr-dt2-column>\n                    <vdr-dt2-column\n                        [heading]=\"'order.order-type' | translate\"\n                        id=\"order-type\"\n                        [hiddenByDefault]=\"true\"\n                    >\n                        <ng-template let-order=\"item\">\n                            <vdr-chip>{{ order.type }}</vdr-chip>\n                        </ng-template>\n                    </vdr-dt2-column>\n                    <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\">\n                        <ng-template let-order=\"item\">\n                            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\n                        </ng-template>\n                    </vdr-dt2-column>\n                    <vdr-dt2-column [heading]=\"'order.total' | translate\" id=\"total\">\n                        <ng-template let-order=\"item\">\n                            {{ order.totalWithTax | localeCurrency : order.currencyCode }}\n                        </ng-template>\n                    </vdr-dt2-column>\n                    <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\">\n                        <ng-template let-order=\"item\">\n                            {{ order.updatedAt | timeAgo }}\n                        </ng-template>\n                    </vdr-dt2-column>\n                    <vdr-dt2-column [heading]=\"'order.placed-at' | translate\" id=\"placed-at\">\n                        <ng-template let-order=\"item\">\n                            {{ order.orderPlacedAt | localeDate : 'short' }}\n                        </ng-template>\n                    </vdr-dt2-column>\n                    <vdr-dt2-custom-field-column\n                        *ngFor=\"let customField of customFields\"\n                        [customField]=\"customField\"\n                    />\n                </vdr-data-table-2>\n            </vdr-card>\n            <vdr-card [title]=\"'customer.customer-history' | translate\">\n                <vdr-customer-history\n                    [customer]=\"entity$ | async\"\n                    [history]=\"history$ | async\"\n                    (addNote)=\"addNoteToCustomer($event)\"\n                    (updateNote)=\"updateNote($event)\"\n                    (deleteNote)=\"deleteNote($event)\"\n                ></vdr-customer-history>\n            </vdr-card>\n        </ng-container>\n    </vdr-page-block>\n</vdr-page-detail-layout>\n", styles: [".last-login{margin-inline-start:6px;color:var(--color-grey-500)}.to-delete{opacity:.5}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }, { type: i1.DataService }, { type: i1.ModalService }, { type: i1.NotificationService }] });
 
-const CUSTOMER_GROUP_DETAIL_QUERY = gql `
-    query GetCustomerGroupDetail($id: ID!) {
-        customerGroup(id: $id) {
-            ...CustomerGroupDetail
-        }
-    }
-    fragment CustomerGroupDetail on CustomerGroup {
-        id
-        createdAt
-        updatedAt
-        name
-    }
+const CUSTOMER_GROUP_DETAIL_QUERY = gql `
+    query GetCustomerGroupDetail($id: ID!) {
+        customerGroup(id: $id) {
+            ...CustomerGroupDetail
+        }
+    }
+    fragment CustomerGroupDetail on CustomerGroup {
+        id
+        createdAt
+        updatedAt
+        name
+    }
 `;
 class CustomerGroupDetailComponent extends TypedBaseDetailComponent {
     constructor(formBuilder, dataService, modalService, notificationService) {
@@ -911,11 +911,11 @@ class CustomerGroupDetailComponent extends TypedBaseDetailComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CustomerGroupDetailComponent, deps: [{ token: i1$1.FormBuilder }, { token: i1.DataService }, { token: i1.ModalService }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CustomerGroupDetailComponent, isStandalone: false, selector: "vdr-customer-group-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=\"customer-group-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"!(detailForm.valid && detailForm.dirty)\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"'UpdateCustomer'\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"!(detailForm.valid && detailForm.dirty)\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n            <vdr-action-bar-dropdown-menu locationId=\"customer-group-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 id=\"name\" type=\"text\" formControlName=\"name\" />\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=\"CustomerGroup\"\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=\"customer-group-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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$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: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CustomerGroupDetailComponent, isStandalone: false, selector: "vdr-customer-group-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n    <vdr-action-bar>\n        <vdr-ab-left> </vdr-ab-left>\n\n        <vdr-ab-right>\n            <vdr-action-bar-items locationId=\"customer-group-detail\"></vdr-action-bar-items>\n            <button\n                class=\"btn btn-primary\"\n                *ngIf=\"isNew$ | async; else updateButton\"\n                (click)=\"create()\"\n                [disabled]=\"!(detailForm.valid && detailForm.dirty)\"\n            >\n                {{ 'common.create' | translate }}\n            </button>\n            <ng-template #updateButton>\n                <button\n                    *vdrIfPermissions=\"'UpdateCustomer'\"\n                    class=\"btn btn-primary\"\n                    (click)=\"save()\"\n                    [disabled]=\"!(detailForm.valid && detailForm.dirty)\"\n                >\n                    {{ 'common.update' | translate }}\n                </button>\n            </ng-template>\n            <vdr-action-bar-dropdown-menu locationId=\"customer-group-detail\" />\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n<form class=\"form\" [formGroup]=\"detailForm\">\n    <vdr-page-detail-layout>\n        <vdr-page-detail-sidebar>\n            <vdr-card *ngIf=\"entity$ | async as entity\">\n                <vdr-page-entity-info [entity]=\"entity\" />\n            </vdr-card>\n        </vdr-page-detail-sidebar>\n        <vdr-page-block>\n            <vdr-card>\n                <div class=\"form-grid\">\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\n                        <input id=\"name\" type=\"text\" formControlName=\"name\" />\n                    </vdr-form-field>\n                </div>\n            </vdr-card>\n            <vdr-card\n                formGroupName=\"customFields\"\n                *ngIf=\"customFields.length\"\n                [title]=\"'common.custom-fields' | translate\"\n            >\n                <vdr-tabbed-custom-fields\n                    entityName=\"CustomerGroup\"\n                    [customFields]=\"customFields\"\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\n                ></vdr-tabbed-custom-fields>\n            </vdr-card>\n            <vdr-custom-detail-component-host\n                locationId=\"customer-group-detail\"\n                [entity$]=\"entity$\"\n                [detailForm]=\"detailForm\"\n            ></vdr-custom-detail-component-host>\n        </vdr-page-block>\n    </vdr-page-detail-layout>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$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: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CustomerGroupDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-customer-group-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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=\"customer-group-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"!(detailForm.valid && detailForm.dirty)\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"'UpdateCustomer'\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"!(detailForm.valid && detailForm.dirty)\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n            <vdr-action-bar-dropdown-menu locationId=\"customer-group-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 id=\"name\" type=\"text\" formControlName=\"name\" />\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=\"CustomerGroup\"\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=\"customer-group-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" }]
+            args: [{ selector: 'vdr-customer-group-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\n    <vdr-action-bar>\n        <vdr-ab-left> </vdr-ab-left>\n\n        <vdr-ab-right>\n            <vdr-action-bar-items locationId=\"customer-group-detail\"></vdr-action-bar-items>\n            <button\n                class=\"btn btn-primary\"\n                *ngIf=\"isNew$ | async; else updateButton\"\n                (click)=\"create()\"\n                [disabled]=\"!(detailForm.valid && detailForm.dirty)\"\n            >\n                {{ 'common.create' | translate }}\n            </button>\n            <ng-template #updateButton>\n                <button\n                    *vdrIfPermissions=\"'UpdateCustomer'\"\n                    class=\"btn btn-primary\"\n                    (click)=\"save()\"\n                    [disabled]=\"!(detailForm.valid && detailForm.dirty)\"\n                >\n                    {{ 'common.update' | translate }}\n                </button>\n            </ng-template>\n            <vdr-action-bar-dropdown-menu locationId=\"customer-group-detail\" />\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n<form class=\"form\" [formGroup]=\"detailForm\">\n    <vdr-page-detail-layout>\n        <vdr-page-detail-sidebar>\n            <vdr-card *ngIf=\"entity$ | async as entity\">\n                <vdr-page-entity-info [entity]=\"entity\" />\n            </vdr-card>\n        </vdr-page-detail-sidebar>\n        <vdr-page-block>\n            <vdr-card>\n                <div class=\"form-grid\">\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\n                        <input id=\"name\" type=\"text\" formControlName=\"name\" />\n                    </vdr-form-field>\n                </div>\n            </vdr-card>\n            <vdr-card\n                formGroupName=\"customFields\"\n                *ngIf=\"customFields.length\"\n                [title]=\"'common.custom-fields' | translate\"\n            >\n                <vdr-tabbed-custom-fields\n                    entityName=\"CustomerGroup\"\n                    [customFields]=\"customFields\"\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\n                ></vdr-tabbed-custom-fields>\n            </vdr-card>\n            <vdr-custom-detail-component-host\n                locationId=\"customer-group-detail\"\n                [entity$]=\"entity$\"\n                [detailForm]=\"detailForm\"\n            ></vdr-custom-detail-component-host>\n        </vdr-page-block>\n    </vdr-page-detail-layout>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i1.DataService }, { type: i1.ModalService }, { type: i1.NotificationService }] });
 
 class CustomerGroupDetailDialogComponent {
@@ -948,11 +948,11 @@ class CustomerGroupDetailDialogComponent {
         this.resolveWith(this.form.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CustomerGroupDetailDialogComponent, deps: [{ token: i1.ServerConfigService }, { token: i1$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CustomerGroupDetailDialogComponent, isStandalone: false, selector: "vdr-customer-group-detail-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <span *ngIf=\"group.id\">{{ 'customer.update-customer-group' | translate }}</span>\r\n    <span *ngIf=\"!group.id\">{{ 'customer.create-customer-group' | translate }}</span>\r\n</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input\r\n            id=\"name\"\r\n            type=\"text\"\r\n            formControlName=\"name\"\r\n            [readonly]=\"!(['CreateCustomerGroup', 'UpdateCustomerGroup'] | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"CustomerGroup\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"form.get('customFields')\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"save()\" [disabled]=\"!form.valid\" class=\"btn btn-primary\">\r\n        <span *ngIf=\"group.id\">{{ 'customer.update-customer-group' | translate }}</span>\r\n        <span *ngIf=\"!group.id\">{{ 'customer.create-customer-group' | translate }}</span>\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CustomerGroupDetailDialogComponent, isStandalone: false, selector: "vdr-customer-group-detail-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\n    <span *ngIf=\"group.id\">{{ 'customer.update-customer-group' | translate }}</span>\n    <span *ngIf=\"!group.id\">{{ 'customer.create-customer-group' | translate }}</span>\n</ng-template>\n<form [formGroup]=\"form\">\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\n        <input\n            id=\"name\"\n            type=\"text\"\n            formControlName=\"name\"\n            [readonly]=\"!(['CreateCustomerGroup', 'UpdateCustomerGroup'] | hasPermission)\"\n        />\n    </vdr-form-field>\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\n        <label>{{ 'common.custom-fields' | translate }}</label>\n        <vdr-tabbed-custom-fields\n            entityName=\"CustomerGroup\"\n            [customFields]=\"customFields\"\n            [customFieldsFormGroup]=\"form.get('customFields')\"\n        ></vdr-tabbed-custom-fields>\n    </section>\n</form>\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button type=\"submit\" (click)=\"save()\" [disabled]=\"!form.valid\" class=\"btn btn-primary\">\n        <span *ngIf=\"group.id\">{{ 'customer.update-customer-group' | translate }}</span>\n        <span *ngIf=\"!group.id\">{{ 'customer.create-customer-group' | translate }}</span>\n    </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CustomerGroupDetailDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-customer-group-detail-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\r\n    <span *ngIf=\"group.id\">{{ 'customer.update-customer-group' | translate }}</span>\r\n    <span *ngIf=\"!group.id\">{{ 'customer.create-customer-group' | translate }}</span>\r\n</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input\r\n            id=\"name\"\r\n            type=\"text\"\r\n            formControlName=\"name\"\r\n            [readonly]=\"!(['CreateCustomerGroup', 'UpdateCustomerGroup'] | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"CustomerGroup\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"form.get('customFields')\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"save()\" [disabled]=\"!form.valid\" class=\"btn btn-primary\">\r\n        <span *ngIf=\"group.id\">{{ 'customer.update-customer-group' | translate }}</span>\r\n        <span *ngIf=\"!group.id\">{{ 'customer.create-customer-group' | translate }}</span>\r\n    </button>\r\n</ng-template>\r\n" }]
+            args: [{ selector: 'vdr-customer-group-detail-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>\n    <span *ngIf=\"group.id\">{{ 'customer.update-customer-group' | translate }}</span>\n    <span *ngIf=\"!group.id\">{{ 'customer.create-customer-group' | translate }}</span>\n</ng-template>\n<form [formGroup]=\"form\">\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\n        <input\n            id=\"name\"\n            type=\"text\"\n            formControlName=\"name\"\n            [readonly]=\"!(['CreateCustomerGroup', 'UpdateCustomerGroup'] | hasPermission)\"\n        />\n    </vdr-form-field>\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\n        <label>{{ 'common.custom-fields' | translate }}</label>\n        <vdr-tabbed-custom-fields\n            entityName=\"CustomerGroup\"\n            [customFields]=\"customFields\"\n            [customFieldsFormGroup]=\"form.get('customFields')\"\n        ></vdr-tabbed-custom-fields>\n    </section>\n</form>\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button type=\"submit\" (click)=\"save()\" [disabled]=\"!form.valid\" class=\"btn btn-primary\">\n        <span *ngIf=\"group.id\">{{ 'customer.update-customer-group' | translate }}</span>\n        <span *ngIf=\"!group.id\">{{ 'customer.create-customer-group' | translate }}</span>\n    </button>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1.ServerConfigService }, { type: i1$1.UntypedFormBuilder }] });
 
 const deleteCustomerGroupsBulkAction = createBulkDeleteAction({
@@ -962,16 +962,16 @@ const deleteCustomerGroupsBulkAction = createBulkDeleteAction({
     bulkDelete: (dataService, ids) => dataService.customer.deleteCustomerGroups(ids).pipe(map(res => res.deleteCustomerGroups)),
 });
 
-const GET_CUSTOMER_GROUP_LIST = gql `
-    query GetCustomerGroupList($options: CustomerGroupListOptions) {
-        customerGroups(options: $options) {
-            items {
-                ...CustomerGroup
-            }
-            totalItems
-        }
-    }
-    ${CUSTOMER_GROUP_FRAGMENT}
+const GET_CUSTOMER_GROUP_LIST = gql `
+    query GetCustomerGroupList($options: CustomerGroupListOptions) {
+        customerGroups(options: $options) {
+            items {
+                ...CustomerGroup
+            }
+            totalItems
+        }
+    }
+    ${CUSTOMER_GROUP_FRAGMENT}
 `;
 class CustomerGroupListComponent extends TypedBaseListComponent {
     constructor(dataService, notificationService, modalService, route, router) {
@@ -1091,11 +1091,11 @@ class CustomerGroupListComponent extends TypedBaseListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CustomerGroupListComponent, deps: [{ token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: i2.ActivatedRoute }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CustomerGroupListComponent, isStandalone: false, selector: "vdr-customer-group-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=\"customer-group-list\"></vdr-action-bar-items>\r\n            <a class=\"btn btn-primary\" *vdrIfPermissions=\"'CreateCustomerGroup'\" [routerLink]=\"['./', 'create']\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'customer.create-new-customer-group' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"customer-group-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-split-view [rightPanelOpen]=\"activeGroup$ | async\" (closeClicked)=\"closeMembers()\">\r\n    <ng-template vdrSplitViewLeft>\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            [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=\"customer-group-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]=\"'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-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-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.view-contents' | translate\" id=\"view-contents\"\r\n                [optional]=\"false\"\r\n            >\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>{{ 'customer.view-group-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-data-table-2>\r\n    </ng-template>\r\n    <ng-template vdrSplitViewRight [splitViewTitle]=\"(activeGroup$ | async)?.name\">\r\n        <ng-container *ngIf=\"activeGroup$ | async as activeGroup\">\r\n            <button class=\"button-ghost ml-4\" (click)=\"addToGroup(activeGroup)\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                <span>{{\r\n                    'customer.add-customers-to-group' | translate : { groupName: activeGroup.name }\r\n                }}</span>\r\n            </button>\r\n            <vdr-customer-group-member-list\r\n                locationId=\"customer-group-members-list\"\r\n                [members]=\"members$ | async\"\r\n                [route]=\"route\"\r\n                [totalItems]=\"membersTotal$ | async\"\r\n                [activeGroup]=\"activeGroup$ | async\"\r\n                (fetchParamsChange)=\"fetchGroupMembers$.next($event)\"\r\n            />\r\n        </ng-container>\r\n    </ng-template>\r\n</vdr-split-view>\r\n", styles: ["vdr-empty-placeholder{flex:1}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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", "trackByPath"], 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: CustomerGroupMemberListComponent, selector: "vdr-customer-group-member-list", inputs: ["locationId", "members", "totalItems", "route", "selectedMemberIds", "activeGroup"], outputs: ["selectionChange", "fetchParamsChange"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CustomerGroupListComponent, isStandalone: false, selector: "vdr-customer-group-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n    <vdr-action-bar>\n        <vdr-ab-left> </vdr-ab-left>\n        <vdr-ab-right>\n            <vdr-action-bar-items locationId=\"customer-group-list\"></vdr-action-bar-items>\n            <a class=\"btn btn-primary\" *vdrIfPermissions=\"'CreateCustomerGroup'\" [routerLink]=\"['./', 'create']\">\n                <clr-icon shape=\"plus\"></clr-icon>\n                {{ 'customer.create-new-customer-group' | translate }}\n            </a>\n            <vdr-action-bar-dropdown-menu locationId=\"customer-group-list\" />\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n<vdr-split-view [rightPanelOpen]=\"activeGroup$ | async\" (closeClicked)=\"closeMembers()\">\n    <ng-template vdrSplitViewLeft>\n        <vdr-data-table-2\n            class=\"mt-2\"\n            [id]=\"dataTableListId\"\n            [items]=\"items$ | async\"\n            [itemsPerPage]=\"itemsPerPage$ | async\"\n            [totalItems]=\"totalItems$ | async\"\n            [currentPage]=\"currentPage$ | async\"\n            [filters]=\"filters\"\n            [activeIndex]=\"activeIndex$ | async\"\n            (pageChange)=\"setPageNumber($event)\"\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\n            (visibleColumnsChange)=\"setVisibleColumns($event)\"\n        >\n            <vdr-bulk-action-menu\n                locationId=\"customer-group-list\"\n                [hostComponent]=\"this\"\n                [selectionManager]=\"selectionManager\"\n            ></vdr-bulk-action-menu>\n            <vdr-dt2-search\n                [searchTermControl]=\"searchTermControl\"\n                [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\n            ></vdr-dt2-search>\n            <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n                <ng-template let-customerGroup=\"item\">\n                    {{ customerGroup.id }}\n                </ng-template>\n            </vdr-dt2-column>\n            <vdr-dt2-column\n                [heading]=\"'common.created-at' | translate\" id=\"created-at\"\n                [hiddenByDefault]=\"true\"\n                [sort]=\"sorts.get('createdAt')\"\n            >\n                <ng-template let-customerGroup=\"item\">\n                    {{ customerGroup.createdAt | localeDate : 'short' }}\n                </ng-template>\n            </vdr-dt2-column>\n            <vdr-dt2-column\n                [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\n                [hiddenByDefault]=\"true\"\n                [sort]=\"sorts.get('updatedAt')\"\n            >\n                <ng-template let-customerGroup=\"item\">\n                    {{ customerGroup.updatedAt | localeDate : 'short' }}\n                </ng-template>\n            </vdr-dt2-column>\n            <vdr-dt2-column\n                [heading]=\"'common.name' | translate\" id=\"name\"\n                [optional]=\"false\"\n                [sort]=\"sorts.get('name')\"\n            >\n                <ng-template let-customerGroup=\"item\">\n                    <a class=\"button-ghost\" [routerLink]=\"['./', customerGroup.id]\"\n                        ><span>{{ customerGroup.name }}</span>\n                        <clr-icon shape=\"arrow right\"></clr-icon>\n                    </a>\n                </ng-template>\n            </vdr-dt2-column>\n            <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\n            <vdr-dt2-column\n                [heading]=\"'common.view-contents' | translate\" id=\"view-contents\"\n                [optional]=\"false\"\n            >\n                <ng-template let-customerGroup=\"item\">\n                    <a\n                        class=\"button-small bg-weight-150\"\n                        [routerLink]=\"['./', { contents: customerGroup.id }]\"\n                        queryParamsHandling=\"preserve\"\n                    >\n                        <span>{{ 'customer.view-group-members' | translate }}</span>\n                        <clr-icon shape=\"file-group\"></clr-icon>\n                    </a>\n                </ng-template>\n            </vdr-dt2-column>\n        </vdr-data-table-2>\n    </ng-template>\n    <ng-template vdrSplitViewRight [splitViewTitle]=\"(activeGroup$ | async)?.name\">\n        <ng-container *ngIf=\"activeGroup$ | async as activeGroup\">\n            <button class=\"button-ghost ml-4\" (click)=\"addToGroup(activeGroup)\">\n                <clr-icon shape=\"plus\"></clr-icon>\n                <span>{{\n                    'customer.add-customers-to-group' | translate : { groupName: activeGroup.name }\n                }}</span>\n            </button>\n            <vdr-customer-group-member-list\n                locationId=\"customer-group-members-list\"\n                [members]=\"members$ | async\"\n                [route]=\"route\"\n                [totalItems]=\"membersTotal$ | async\"\n                [activeGroup]=\"activeGroup$ | async\"\n                (fetchParamsChange)=\"fetchGroupMembers$.next($event)\"\n            />\n        </ng-container>\n    </ng-template>\n</vdr-split-view>\n", styles: ["vdr-empty-placeholder{flex:1}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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", "trackByPath"], 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: CustomerGroupMemberListComponent, selector: "vdr-customer-group-member-list", inputs: ["locationId", "members", "totalItems", "route", "selectedMemberIds", "activeGroup"], outputs: ["selectionChange", "fetchParamsChange"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CustomerGroupListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-customer-group-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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=\"customer-group-list\"></vdr-action-bar-items>\r\n            <a class=\"btn btn-primary\" *vdrIfPermissions=\"'CreateCustomerGroup'\" [routerLink]=\"['./', 'create']\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'customer.create-new-customer-group' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"customer-group-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-split-view [rightPanelOpen]=\"activeGroup$ | async\" (closeClicked)=\"closeMembers()\">\r\n    <ng-template vdrSplitViewLeft>\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            [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=\"customer-group-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]=\"'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-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-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.view-contents' | translate\" id=\"view-contents\"\r\n                [optional]=\"false\"\r\n            >\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>{{ 'customer.view-group-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-data-table-2>\r\n    </ng-template>\r\n    <ng-template vdrSplitViewRight [splitViewTitle]=\"(activeGroup$ | async)?.name\">\r\n        <ng-container *ngIf=\"activeGroup$ | async as activeGroup\">\r\n            <button class=\"button-ghost ml-4\" (click)=\"addToGroup(activeGroup)\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                <span>{{\r\n                    'customer.add-customers-to-group' | translate : { groupName: activeGroup.name }\r\n                }}</span>\r\n            </button>\r\n            <vdr-customer-group-member-list\r\n                locationId=\"customer-group-members-list\"\r\n                [members]=\"members$ | async\"\r\n                [route]=\"route\"\r\n                [totalItems]=\"membersTotal$ | async\"\r\n                [activeGroup]=\"activeGroup$ | async\"\r\n                (fetchParamsChange)=\"fetchGroupMembers$.next($event)\"\r\n            />\r\n        </ng-container>\r\n    </ng-template>\r\n</vdr-split-view>\r\n", styles: ["vdr-empty-placeholder{flex:1}\n"] }]
+            args: [{ selector: 'vdr-customer-group-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\n    <vdr-action-bar>\n        <vdr-ab-left> </vdr-ab-left>\n        <vdr-ab-right>\n            <vdr-action-bar-items locationId=\"customer-group-list\"></vdr-action-bar-items>\n            <a class=\"btn btn-primary\" *vdrIfPermissions=\"'CreateCustomerGroup'\" [routerLink]=\"['./', 'create']\">\n                <clr-icon shape=\"plus\"></clr-icon>\n                {{ 'customer.create-new-customer-group' | translate }}\n            </a>\n            <vdr-action-bar-dropdown-menu locationId=\"customer-group-list\" />\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n<vdr-split-view [rightPanelOpen]=\"activeGroup$ | async\" (closeClicked)=\"closeMembers()\">\n    <ng-template vdrSplitViewLeft>\n        <vdr-data-table-2\n            class=\"mt-2\"\n            [id]=\"dataTableListId\"\n            [items]=\"items$ | async\"\n            [itemsPerPage]=\"itemsPerPage$ | async\"\n            [totalItems]=\"totalItems$ | async\"\n            [currentPage]=\"currentPage$ | async\"\n            [filters]=\"filters\"\n            [activeIndex]=\"activeIndex$ | async\"\n            (pageChange)=\"setPageNumber($event)\"\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\n            (visibleColumnsChange)=\"setVisibleColumns($event)\"\n        >\n            <vdr-bulk-action-menu\n                locationId=\"customer-group-list\"\n                [hostComponent]=\"this\"\n                [selectionManager]=\"selectionManager\"\n            ></vdr-bulk-action-menu>\n            <vdr-dt2-search\n                [searchTermControl]=\"searchTermControl\"\n                [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\n            ></vdr-dt2-search>\n            <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n                <ng-template let-customerGroup=\"item\">\n                    {{ customerGroup.id }}\n                </ng-template>\n            </vdr-dt2-column>\n            <vdr-dt2-column\n                [heading]=\"'common.created-at' | translate\" id=\"created-at\"\n                [hiddenByDefault]=\"true\"\n                [sort]=\"sorts.get('createdAt')\"\n            >\n                <ng-template let-customerGroup=\"item\">\n                    {{ customerGroup.createdAt | localeDate : 'short' }}\n                </ng-template>\n            </vdr-dt2-column>\n            <vdr-dt2-column\n                [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\n                [hiddenByDefault]=\"true\"\n                [sort]=\"sorts.get('updatedAt')\"\n            >\n                <ng-template let-customerGroup=\"item\">\n                    {{ customerGroup.updatedAt | localeDate : 'short' }}\n                </ng-template>\n            </vdr-dt2-column>\n            <vdr-dt2-column\n                [heading]=\"'common.name' | translate\" id=\"name\"\n                [optional]=\"false\"\n                [sort]=\"sorts.get('name')\"\n            >\n                <ng-template let-customerGroup=\"item\">\n                    <a class=\"button-ghost\" [routerLink]=\"['./', customerGroup.id]\"\n                        ><span>{{ customerGroup.name }}</span>\n                        <clr-icon shape=\"arrow right\"></clr-icon>\n                    </a>\n                </ng-template>\n            </vdr-dt2-column>\n            <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\n            <vdr-dt2-column\n                [heading]=\"'common.view-contents' | translate\" id=\"view-contents\"\n                [optional]=\"false\"\n            >\n                <ng-template let-customerGroup=\"item\">\n                    <a\n                        class=\"button-small bg-weight-150\"\n                        [routerLink]=\"['./', { contents: customerGroup.id }]\"\n                        queryParamsHandling=\"preserve\"\n                    >\n                        <span>{{ 'customer.view-group-members' | translate }}</span>\n                        <clr-icon shape=\"file-group\"></clr-icon>\n                    </a>\n                </ng-template>\n            </vdr-dt2-column>\n        </vdr-data-table-2>\n    </ng-template>\n    <ng-template vdrSplitViewRight [splitViewTitle]=\"(activeGroup$ | async)?.name\">\n        <ng-container *ngIf=\"activeGroup$ | async as activeGroup\">\n            <button class=\"button-ghost ml-4\" (click)=\"addToGroup(activeGroup)\">\n                <clr-icon shape=\"plus\"></clr-icon>\n                <span>{{\n                    'customer.add-customers-to-group' | translate : { groupName: activeGroup.name }\n                }}</span>\n            </button>\n            <vdr-customer-group-member-list\n                locationId=\"customer-group-members-list\"\n                [members]=\"members$ | async\"\n                [route]=\"route\"\n                [totalItems]=\"membersTotal$ | async\"\n                [activeGroup]=\"activeGroup$ | async\"\n                (fetchParamsChange)=\"fetchGroupMembers$.next($event)\"\n            />\n        </ng-container>\n    </ng-template>\n</vdr-split-view>\n", styles: ["vdr-empty-placeholder{flex:1}\n"] }]
         }], ctorParameters: () => [{ type: i1.DataService }, { type: i1.NotificationService }, { type: i1.ModalService }, { type: i2.ActivatedRoute }, { type: i2.Router }] });
 
 const removeCustomerGroupMembersBulkAction = {
@@ -1130,29 +1130,29 @@ const deleteCustomersBulkAction = createBulkDeleteAction({
     bulkDelete: (dataService, ids) => dataService.customer.deleteCustomers(ids).pipe(map(res => res.deleteCustomers)),
 });
 
-const CUSTOMER_LIST_QUERY = gql `
-    query CustomerListQuery($options: CustomerListOptions) {
-        customers(options: $options) {
-            items {
-                ...CustomerListItem
-            }
-            totalItems
-        }
-    }
-
-    fragment CustomerListItem on Customer {
-        id
-        createdAt
-        updatedAt
-        title
-        firstName
-        lastName
-        emailAddress
-        user {
-            id
-            verified
-        }
-    }
+const CUSTOMER_LIST_QUERY = gql `
+    query CustomerListQuery($options: CustomerListOptions) {
+        customers(options: $options) {
+            items {
+                ...CustomerListItem
+            }
+            totalItems
+        }
+    }
+
+    fragment CustomerListItem on Customer {
+        id
+        createdAt
+        updatedAt
+        title
+        firstName
+        lastName
+        emailAddress
+        user {
+            id
+            verified
+        }
+    }
 `;
 class CustomerListComponent extends TypedBaseListComponent {
     constructor() {
@@ -1221,11 +1221,11 @@ class CustomerListComponent extends TypedBaseListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CustomerListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CustomerListComponent, isStandalone: false, selector: "vdr-customer-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=\"customer-list\"></vdr-action-bar-items>\r\n            <a class=\"btn btn-primary\" [routerLink]=\"['./create']\" *vdrIfPermissions=\"'CreateCustomer'\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'customer.create-new-customer' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"customer-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\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=\"customer-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]=\"'customer.search-customers-by-email-last-name-postal-code' | translate\"\r\n    ></vdr-dt2-search>\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.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-customer=\"item\">\r\n            {{ customer.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-customer=\"item\">\r\n            {{ customer.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('lastName')\">\r\n        <ng-template let-customer=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', customer.id]\"\r\n                ><span> {{ customer.title }} {{ customer.firstName }} {{ customer.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]=\"'common.status' | translate\" id=\"status\">\r\n        <ng-template let-customer=\"item\">\r\n            <vdr-customer-status-label [customer]=\"customer\" />\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.email-address' | translate\" id=\"email-address\" [sort]=\"sorts.get('emailAddress')\">\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.emailAddress }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\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: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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", "trackByPath"], 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: "component", type: CustomerStatusLabelComponent, selector: "vdr-customer-status-label", inputs: ["customer"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CustomerListComponent, isStandalone: false, selector: "vdr-customer-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n    <vdr-action-bar>\n        <vdr-ab-left> </vdr-ab-left>\n        <vdr-ab-right>\n            <vdr-action-bar-items locationId=\"customer-list\"></vdr-action-bar-items>\n            <a class=\"btn btn-primary\" [routerLink]=\"['./create']\" *vdrIfPermissions=\"'CreateCustomer'\">\n                <clr-icon shape=\"plus\"></clr-icon>\n                {{ 'customer.create-new-customer' | translate }}\n            </a>\n            <vdr-action-bar-dropdown-menu locationId=\"customer-list\" />\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n\n<vdr-data-table-2\n    class=\"mt-2\"\n    [id]=\"dataTableListId\"\n    [items]=\"items$ | async\"\n    [itemsPerPage]=\"itemsPerPage$ | async\"\n    [totalItems]=\"totalItems$ | async\"\n    [currentPage]=\"currentPage$ | async\"\n    [filters]=\"filters\"\n    (pageChange)=\"setPageNumber($event)\"\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\n>\n    <vdr-bulk-action-menu\n        locationId=\"customer-list\"\n        [hostComponent]=\"this\"\n        [selectionManager]=\"selectionManager\"\n    ></vdr-bulk-action-menu>\n    <vdr-dt2-search\n        [searchTermControl]=\"searchTermControl\"\n        [searchTermPlaceholder]=\"'customer.search-customers-by-email-last-name-postal-code' | translate\"\n    ></vdr-dt2-search>\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n        <ng-template let-customer=\"item\">\n            {{ customer.id }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\n        [hiddenByDefault]=\"true\"\n        [sort]=\"sorts.get('createdAt')\"\n    >\n        <ng-template let-customer=\"item\">\n            {{ customer.createdAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\n        [hiddenByDefault]=\"true\"\n        [sort]=\"sorts.get('updatedAt')\"\n    >\n        <ng-template let-customer=\"item\">\n            {{ customer.updatedAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'customer.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('lastName')\">\n        <ng-template let-customer=\"item\">\n            <a class=\"button-ghost\" [routerLink]=\"['./', customer.id]\"\n                ><span> {{ customer.title }} {{ customer.firstName }} {{ customer.lastName }} </span>\n                <clr-icon shape=\"arrow right\"></clr-icon>\n            </a>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.status' | translate\" id=\"status\">\n        <ng-template let-customer=\"item\">\n            <vdr-customer-status-label [customer]=\"customer\" />\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'customer.email-address' | translate\" id=\"email-address\" [sort]=\"sorts.get('emailAddress')\">\n        <ng-template let-customer=\"item\">\n            {{ customer.emailAddress }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\n</vdr-data-table-2>\n", styles: [".search-input{margin-top:6px;min-width:300px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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", "trackByPath"], 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: "component", type: CustomerStatusLabelComponent, selector: "vdr-customer-status-label", inputs: ["customer"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CustomerListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-customer-list', standalone: false, 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=\"customer-list\"></vdr-action-bar-items>\r\n            <a class=\"btn btn-primary\" [routerLink]=\"['./create']\" *vdrIfPermissions=\"'CreateCustomer'\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'customer.create-new-customer' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"customer-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\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=\"customer-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]=\"'customer.search-customers-by-email-last-name-postal-code' | translate\"\r\n    ></vdr-dt2-search>\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.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-customer=\"item\">\r\n            {{ customer.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-customer=\"item\">\r\n            {{ customer.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('lastName')\">\r\n        <ng-template let-customer=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', customer.id]\"\r\n                ><span> {{ customer.title }} {{ customer.firstName }} {{ customer.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]=\"'common.status' | translate\" id=\"status\">\r\n        <ng-template let-customer=\"item\">\r\n            <vdr-customer-status-label [customer]=\"customer\" />\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.email-address' | translate\" id=\"email-address\" [sort]=\"sorts.get('emailAddress')\">\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.emailAddress }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [".search-input{margin-top:6px;min-width:300px}\n"] }]
+            args: [{ selector: 'vdr-customer-list', standalone: false, template: "<vdr-page-block>\n    <vdr-action-bar>\n        <vdr-ab-left> </vdr-ab-left>\n        <vdr-ab-right>\n            <vdr-action-bar-items locationId=\"customer-list\"></vdr-action-bar-items>\n            <a class=\"btn btn-primary\" [routerLink]=\"['./create']\" *vdrIfPermissions=\"'CreateCustomer'\">\n                <clr-icon shape=\"plus\"></clr-icon>\n                {{ 'customer.create-new-customer' | translate }}\n            </a>\n            <vdr-action-bar-dropdown-menu locationId=\"customer-list\" />\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n\n<vdr-data-table-2\n    class=\"mt-2\"\n    [id]=\"dataTableListId\"\n    [items]=\"items$ | async\"\n    [itemsPerPage]=\"itemsPerPage$ | async\"\n    [totalItems]=\"totalItems$ | async\"\n    [currentPage]=\"currentPage$ | async\"\n    [filters]=\"filters\"\n    (pageChange)=\"setPageNumber($event)\"\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\n>\n    <vdr-bulk-action-menu\n        locationId=\"customer-list\"\n        [hostComponent]=\"this\"\n        [selectionManager]=\"selectionManager\"\n    ></vdr-bulk-action-menu>\n    <vdr-dt2-search\n        [searchTermControl]=\"searchTermControl\"\n        [searchTermPlaceholder]=\"'customer.search-customers-by-email-last-name-postal-code' | translate\"\n    ></vdr-dt2-search>\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n        <ng-template let-customer=\"item\">\n            {{ customer.id }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\n        [hiddenByDefault]=\"true\"\n        [sort]=\"sorts.get('createdAt')\"\n    >\n        <ng-template let-customer=\"item\">\n            {{ customer.createdAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\n        [hiddenByDefault]=\"true\"\n        [sort]=\"sorts.get('updatedAt')\"\n    >\n        <ng-template let-customer=\"item\">\n            {{ customer.updatedAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'customer.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('lastName')\">\n        <ng-template let-customer=\"item\">\n            <a class=\"button-ghost\" [routerLink]=\"['./', customer.id]\"\n                ><span> {{ customer.title }} {{ customer.firstName }} {{ customer.lastName }} </span>\n                <clr-icon shape=\"arrow right\"></clr-icon>\n            </a>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.status' | translate\" id=\"status\">\n        <ng-template let-customer=\"item\">\n            <vdr-customer-status-label [customer]=\"customer\" />\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'customer.email-address' | translate\" id=\"email-address\" [sort]=\"sorts.get('emailAddress')\">\n        <ng-template let-customer=\"item\">\n            {{ customer.emailAddress }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\n</vdr-data-table-2>\n", styles: [".search-input{margin-top:6px;min-width:300px}\n"] }]
         }], ctorParameters: () => [] });
 
 const createRoutes = (pageService) => [