@vendure/admin-ui 1.4.7 → 2.0.0-next.0

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

@@ -0,0 +1,1135 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, Injectable, NgModule } from '@angular/core';
+import { BehaviorSubject, Subject, combineLatest, forkJoin, from, EMPTY, of } from 'rxjs';
+import { map, startWith, distinctUntilChanged, debounceTime, tap, takeUntil, switchMap, filter, take, shareReplay, merge, mergeMap, concatMap, mapTo } from 'rxjs/operators';
+import * as i1 from '@vendure/admin-ui/core';
+import { HistoryEntryType, BaseDetailComponent, SortOrder, EditNoteDialogComponent, DeletionResult, BaseListComponent, LogicalOperator, BaseEntityResolver, createResolveData, CanDeactivateDetailGuard, detailBreadcrumb, SharedModule } from '@vendure/admin-ui/core';
+import * as i3 from '@angular/forms';
+import { FormControl, Validators, FormArray } from '@angular/forms';
+import * as i2 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i4 from '@ngx-translate/core';
+import * as i3$1 from '@angular/common';
+import * as i4$1 from '@clr/angular';
+import { marker } from '@biesbjerg/ngx-translate-extract-marker';
+import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
+import * as i2$1 from '@ng-select/ng-select';
+import { SortOrder as SortOrder$1 } from '@vendure/common/lib/generated-shop-types';
+
+class CustomerGroupMemberListComponent {
+    constructor(router, dataService) {
+        this.router = router;
+        this.dataService = dataService;
+        this.selectedMemberIds = [];
+        this.selectionChange = new EventEmitter();
+        this.fetchParamsChange = new EventEmitter();
+        this.filterTermControl = new FormControl('');
+        this.refresh$ = new BehaviorSubject(true);
+        this.destroy$ = new Subject();
+        this.isMemberSelected = (member) => {
+            return -1 < this.selectedMemberIds.indexOf(member.id);
+        };
+    }
+    ngOnInit() {
+        this.membersCurrentPage$ = this.route.paramMap.pipe(map(qpm => qpm.get('membersPage')), map(page => (!page ? 1 : +page)), startWith(1), distinctUntilChanged());
+        this.membersItemsPerPage$ = this.route.paramMap.pipe(map(qpm => qpm.get('membersPerPage')), map(perPage => (!perPage ? 10 : +perPage)), startWith(10), distinctUntilChanged());
+        const filterTerm$ = this.filterTermControl.valueChanges.pipe(debounceTime(250), tap(() => this.setContentsPageNumber(1)), startWith(''));
+        combineLatest(this.membersCurrentPage$, this.membersItemsPerPage$, filterTerm$, this.refresh$)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(([currentPage, itemsPerPage, filterTerm]) => {
+            const take = itemsPerPage;
+            const skip = (currentPage - 1) * itemsPerPage;
+            this.fetchParamsChange.emit({
+                filterTerm,
+                skip,
+                take,
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    setContentsPageNumber(page) {
+        this.setParam('membersPage', page);
+    }
+    setContentsItemsPerPage(perPage) {
+        this.setParam('membersPerPage', perPage);
+    }
+    refresh() {
+        this.refresh$.next(true);
+    }
+    setParam(key, value) {
+        this.router.navigate(['./', { ...this.route.snapshot.params, [key]: value }], {
+            relativeTo: this.route,
+            queryParamsHandling: 'merge',
+        });
+    }
+    areAllSelected() {
+        if (this.members) {
+            return this.selectedMemberIds.length === this.members.length;
+        }
+        else {
+            return false;
+        }
+    }
+    toggleSelectAll() {
+        if (this.areAllSelected()) {
+            this.selectionChange.emit([]);
+        }
+        else {
+            this.selectionChange.emit(this.members.map(v => v.id));
+        }
+    }
+    toggleSelectMember(member) {
+        if (this.selectedMemberIds.includes(member.id)) {
+            this.selectionChange.emit(this.selectedMemberIds.filter(id => id !== member.id));
+        }
+        else {
+            this.selectionChange.emit([...this.selectedMemberIds, member.id]);
+        }
+    }
+}
+CustomerGroupMemberListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerGroupMemberListComponent, deps: [{ token: i2.Router }, { token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component });
+CustomerGroupMemberListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CustomerGroupMemberListComponent, selector: "vdr-customer-group-member-list", inputs: { members: "members", totalItems: "totalItems", route: "route", selectedMemberIds: "selectedMemberIds" }, outputs: { selectionChange: "selectionChange", fetchParamsChange: "fetchParamsChange" }, ngImport: i0, template: "<input\r\n    type=\"text\"\r\n    name=\"searchTerm\"\r\n    [formControl]=\"filterTermControl\"\r\n    [placeholder]=\"'customer.search-customers-by-email' | translate\"\r\n    class=\"search-input\"\r\n/>\r\n\r\n<vdr-data-table\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    [allSelected]=\"areAllSelected()\"\r\n    [isRowSelectedFn]=\"('UpdateCustomerGroup' | hasPermission) && isMemberSelected\"\r\n    (rowSelectChange)=\"toggleSelectMember($event)\"\r\n    (allSelectChange)=\"toggleSelectAll()\"\r\n>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'customer.name' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'customer.email-address' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-customer=\"item\">\r\n        <td class=\"left align-middle\">\r\n            {{ customer.title }} {{ customer.firstName }} {{ customer.lastName }}\r\n        </td>\r\n        <td class=\"left align-middle\">{{ customer.emailAddress }}</td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['/customer', 'customers', customer.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: [""], components: [{ type: i1.DataTableComponent, selector: "vdr-data-table", inputs: ["items", "itemsPerPage", "currentPage", "totalItems", "allSelected", "isRowSelectedFn", "emptyStateLabel"], outputs: ["allSelectChange", "rowSelectChange", "pageChange", "itemsPerPageChange"] }, { type: i1.DataTableColumnComponent, selector: "vdr-dt-column", inputs: ["expand"] }, { type: i1.TableRowActionComponent, selector: "vdr-table-row-action", inputs: ["linkTo", "label", "iconShape", "disabled"] }], directives: [{ type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i4.TranslatePipe, "async": i3$1.AsyncPipe, "hasPermission": i1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerGroupMemberListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-customer-group-member-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\r\n    type=\"text\"\r\n    name=\"searchTerm\"\r\n    [formControl]=\"filterTermControl\"\r\n    [placeholder]=\"'customer.search-customers-by-email' | translate\"\r\n    class=\"search-input\"\r\n/>\r\n\r\n<vdr-data-table\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    [allSelected]=\"areAllSelected()\"\r\n    [isRowSelectedFn]=\"('UpdateCustomerGroup' | hasPermission) && isMemberSelected\"\r\n    (rowSelectChange)=\"toggleSelectMember($event)\"\r\n    (allSelectChange)=\"toggleSelectAll()\"\r\n>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'customer.name' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'customer.email-address' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-customer=\"item\">\r\n        <td class=\"left align-middle\">\r\n            {{ customer.title }} {{ customer.firstName }} {{ customer.lastName }}\r\n        </td>\r\n        <td class=\"left align-middle\">{{ customer.emailAddress }}</td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['/customer', 'customers', customer.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i2.Router }, { type: i1.DataService }]; }, propDecorators: { members: [{
+                type: Input
+            }], totalItems: [{
+                type: Input
+            }], route: [{
+                type: Input
+            }], selectedMemberIds: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], fetchParamsChange: [{
+                type: Output
+            }] } });
+
+class AddCustomerToGroupDialogComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.selectedCustomerIds = [];
+        this.fetchGroupMembers$ = new BehaviorSubject({
+            skip: 0,
+            take: 10,
+            filterTerm: '',
+        });
+    }
+    ngOnInit() {
+        const customerResult$ = this.fetchGroupMembers$.pipe(switchMap(({ skip, take, filterTerm }) => {
+            return this.dataService.customer
+                .getCustomerList(take, skip, filterTerm)
+                .mapStream(res => res.customers);
+        }));
+        this.customers$ = customerResult$.pipe(map(res => res.items));
+        this.customersTotal$ = customerResult$.pipe(map(res => res.totalItems));
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    add() {
+        this.resolveWith(this.selectedCustomerIds);
+    }
+}
+AddCustomerToGroupDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AddCustomerToGroupDialogComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component });
+AddCustomerToGroupDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AddCustomerToGroupDialogComponent, 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    [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</vdr-customer-group-member-list>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"add()\" [disabled]=\"!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: [""], components: [{ type: CustomerGroupMemberListComponent, selector: "vdr-customer-group-member-list", inputs: ["members", "totalItems", "route", "selectedMemberIds"], outputs: ["selectionChange", "fetchParamsChange"] }], directives: [{ type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i4.TranslatePipe, "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AddCustomerToGroupDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-add-customer-to-group-dialog', changeDetection: ChangeDetectionStrategy.OnPush, 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    [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</vdr-customer-group-member-list>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"add()\" [disabled]=\"!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: [""] }]
+        }], ctorParameters: function () { return [{ type: i1.DataService }]; } });
+
+class AddressDetailDialogComponent {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        this.availableCountries = [];
+    }
+    ngOnInit() {
+        this.addressForm.valueChanges.subscribe(() => this.changeDetector.markForCheck());
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    save() {
+        this.resolveWith(this.addressForm);
+    }
+}
+AddressDetailDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AddressDetailDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AddressDetailDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AddressDetailDialogComponent, 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"], components: [{ type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }], directives: [{ type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AddressDetailDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-address-detail-dialog', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
+
+class AddressCardComponent {
+    constructor(modalService, changeDetector) {
+        this.modalService = modalService;
+        this.changeDetector = changeDetector;
+        this.availableCountries = [];
+        this.editable = true;
+        this.setAsDefaultShipping = new EventEmitter();
+        this.setAsDefaultBilling = new EventEmitter();
+        this.deleteAddress = new EventEmitter();
+        this.dataDependenciesPopulated = new BehaviorSubject(false);
+    }
+    ngOnInit() {
+        const streetLine1 = this.addressForm.get('streetLine1');
+        // Make the address dialog display automatically if there is no address line
+        // as is the case when adding a new address.
+        if (!streetLine1.value) {
+            this.dataDependenciesPopulated
+                .pipe(filter(value => value), take(1))
+                .subscribe(() => {
+                this.editAddress();
+            });
+        }
+    }
+    ngOnChanges(changes) {
+        if (this.customFields != null && this.availableCountries != null) {
+            this.dataDependenciesPopulated.next(true);
+        }
+    }
+    getCountryName(countryCode) {
+        if (!this.availableCountries) {
+            return '';
+        }
+        const match = this.availableCountries.find(c => c.code === countryCode);
+        return match ? match.name : '';
+    }
+    setAsDefaultBillingAddress() {
+        this.setAsDefaultBilling.emit(this.addressForm.value.id);
+        this.addressForm.markAsDirty();
+    }
+    setAsDefaultShippingAddress() {
+        this.setAsDefaultShipping.emit(this.addressForm.value.id);
+        this.addressForm.markAsDirty();
+    }
+    delete() {
+        this.deleteAddress.emit(this.addressForm.value.id);
+        this.addressForm.markAsDirty();
+    }
+    editAddress() {
+        this.modalService
+            .fromComponent(AddressDetailDialogComponent, {
+            locals: {
+                addressForm: this.addressForm,
+                customFields: this.customFields,
+                availableCountries: this.availableCountries,
+            },
+            size: 'md',
+            closable: true,
+        })
+            .subscribe(() => {
+            this.changeDetector.markForCheck();
+        });
+    }
+}
+AddressCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AddressCardComponent, deps: [{ token: i1.ModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AddressCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AddressCardComponent, 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        <vdr-entity-info [entity]=\"address\"></vdr-entity-info>\r\n        <ng-container *ngIf=\"editable\">\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"editAddress()\">\r\n                {{ 'common.edit' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-sm btn-link\" vdrDropdownTrigger>\r\n                    {{ 'common.more' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu>\r\n                    <button\r\n                        vdrDropdownItem\r\n                        class=\"button\"\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                        class=\"button\"\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\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"delete()\"\r\n                        vdrDropdownItem\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        </ng-container>\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)}\n"], components: [{ type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { type: i1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "translate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AddressCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-address-card', changeDetection: ChangeDetectionStrategy.OnPush, 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        <vdr-entity-info [entity]=\"address\"></vdr-entity-info>\r\n        <ng-container *ngIf=\"editable\">\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"editAddress()\">\r\n                {{ 'common.edit' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-sm btn-link\" vdrDropdownTrigger>\r\n                    {{ 'common.more' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu>\r\n                    <button\r\n                        vdrDropdownItem\r\n                        class=\"button\"\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                        class=\"button\"\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\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"delete()\"\r\n                        vdrDropdownItem\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        </ng-container>\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)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.ModalService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { addressForm: [{
+                type: Input
+            }], customFields: [{
+                type: Input
+            }], availableCountries: [{
+                type: Input
+            }], isDefaultBilling: [{
+                type: Input
+            }], isDefaultShipping: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], setAsDefaultShipping: [{
+                type: Output
+            }], setAsDefaultBilling: [{
+                type: Output
+            }], deleteAddress: [{
+                type: Output
+            }] } });
+
+class SelectCustomerGroupDialogComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.selectedGroupIds = [];
+    }
+    ngOnInit() {
+        this.groups$ = this.dataService.customer
+            .getCustomerGroupList()
+            .mapStream(res => res.customerGroups.items);
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    add() {
+        this.resolveWith(this.selectedGroupIds);
+    }
+}
+SelectCustomerGroupDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectCustomerGroupDialogComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component });
+SelectCustomerGroupDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SelectCustomerGroupDialogComponent, 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: [""], components: [{ type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i2$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i4.TranslatePipe, "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectCustomerGroupDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-select-customer-group-dialog', changeDetection: ChangeDetectionStrategy.OnPush, 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: [""] }]
+        }], ctorParameters: function () { return [{ type: i1.DataService }]; } });
+
+class CustomerStatusLabelComponent {
+}
+CustomerStatusLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerStatusLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CustomerStatusLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CustomerStatusLabelComponent, 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"], components: [{ type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerStatusLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-customer-status-label', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], propDecorators: { customer: [{
+                type: Input
+            }] } });
+
+class CustomerHistoryComponent {
+    constructor() {
+        this.addNote = new EventEmitter();
+        this.updateNote = new EventEmitter();
+        this.deleteNote = new EventEmitter();
+        this.note = '';
+        this.type = HistoryEntryType;
+    }
+    getDisplayType(entry) {
+        switch (entry.type) {
+            case HistoryEntryType.CUSTOMER_VERIFIED:
+            case HistoryEntryType.CUSTOMER_EMAIL_UPDATE_VERIFIED:
+            case HistoryEntryType.CUSTOMER_PASSWORD_RESET_VERIFIED:
+                return 'success';
+            case HistoryEntryType.CUSTOMER_REGISTERED:
+                return 'muted';
+            case HistoryEntryType.CUSTOMER_REMOVED_FROM_GROUP:
+                return 'error';
+            default:
+                return 'default';
+        }
+    }
+    getTimelineIcon(entry) {
+        switch (entry.type) {
+            case HistoryEntryType.CUSTOMER_REGISTERED:
+                return 'user';
+            case HistoryEntryType.CUSTOMER_VERIFIED:
+                return ['assign-user', 'is-solid'];
+            case HistoryEntryType.CUSTOMER_NOTE:
+                return 'note';
+            case HistoryEntryType.CUSTOMER_ADDED_TO_GROUP:
+            case HistoryEntryType.CUSTOMER_REMOVED_FROM_GROUP:
+                return 'users';
+        }
+    }
+    isFeatured(entry) {
+        switch (entry.type) {
+            case HistoryEntryType.CUSTOMER_REGISTERED:
+            case HistoryEntryType.CUSTOMER_VERIFIED:
+                return true;
+            default:
+                return false;
+        }
+    }
+    getName(entry) {
+        const { administrator } = entry;
+        if (administrator) {
+            return `${administrator.firstName} ${administrator.lastName}`;
+        }
+        else {
+            return `${this.customer.firstName} ${this.customer.lastName}`;
+        }
+    }
+    addNoteToCustomer() {
+        this.addNote.emit({ note: this.note });
+        this.note = '';
+    }
+}
+CustomerHistoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CustomerHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CustomerHistoryComponent, selector: "vdr-customer-history", inputs: { customer: "customer", history: "history" }, outputs: { addNote: "addNote", updateNote: "updateNote", deleteNote: "deleteNote" }, ngImport: i0, template: "<h4>{{ 'customer.customer-history' | translate }}</h4>\r\n<div class=\"entry-list\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" *vdrIfPermissions=\"'UpdateCustomer'\">\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    <vdr-timeline-entry\r\n        *ngFor=\"let entry of history\"\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                        }}</vdr-labeled-data>\r\n                        <vdr-labeled-data [label]=\"'customer.new-email-address' | translate\">{{\r\n                            entry.data.newEmailAddress\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                        }}</vdr-labeled-data>\r\n                        <vdr-labeled-data [label]=\"'customer.new-email-address' | translate\">{{\r\n                            entry.data.newEmailAddress\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=\"icon-button\" vdrDropdownTrigger>\r\n                            <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                        </button>\r\n                        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                            <button\r\n                                class=\"button\"\r\n                                vdrDropdownItem\r\n                                (click)=\"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                                class=\"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>\r\n    </vdr-timeline-entry>\r\n    <vdr-timeline-entry [isLast]=\"true\"></vdr-timeline-entry>\r\n</div>\r\n", styles: [".entry-list{margin-top:24px;margin-left:24px;margin-right:12px}.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-right:6px}.note-text{color:var(--color-text-100);white-space:pre-wrap}.address-string{font-size:smaller;color:var(--color-text-200)}\n"], components: [{ type: i1.TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: ["displayType", "createdAt", "name", "featured", "iconShape", "isLast", "collapsed"], outputs: ["expandClick"] }, { type: i1.HistoryEntryDetailComponent, selector: "vdr-history-entry-detail" }, { type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i4$1.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "translate": i4.TranslatePipe, "hasPermission": i1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerHistoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-customer-history', changeDetection: ChangeDetectionStrategy.OnPush, template: "<h4>{{ 'customer.customer-history' | translate }}</h4>\r\n<div class=\"entry-list\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" *vdrIfPermissions=\"'UpdateCustomer'\">\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    <vdr-timeline-entry\r\n        *ngFor=\"let entry of history\"\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                        }}</vdr-labeled-data>\r\n                        <vdr-labeled-data [label]=\"'customer.new-email-address' | translate\">{{\r\n                            entry.data.newEmailAddress\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                        }}</vdr-labeled-data>\r\n                        <vdr-labeled-data [label]=\"'customer.new-email-address' | translate\">{{\r\n                            entry.data.newEmailAddress\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=\"icon-button\" vdrDropdownTrigger>\r\n                            <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                        </button>\r\n                        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                            <button\r\n                                class=\"button\"\r\n                                vdrDropdownItem\r\n                                (click)=\"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                                class=\"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>\r\n    </vdr-timeline-entry>\r\n    <vdr-timeline-entry [isLast]=\"true\"></vdr-timeline-entry>\r\n</div>\r\n", styles: [".entry-list{margin-top:24px;margin-left:24px;margin-right:12px}.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-right:6px}.note-text{color:var(--color-text-100);white-space:pre-wrap}.address-string{font-size:smaller;color:var(--color-text-200)}\n"] }]
+        }], propDecorators: { customer: [{
+                type: Input
+            }], history: [{
+                type: Input
+            }], addNote: [{
+                type: Output
+            }], updateNote: [{
+                type: Output
+            }], deleteNote: [{
+                type: Output
+            }] } });
+
+class CustomerDetailComponent extends BaseDetailComponent {
+    constructor(route, router, serverConfigService, changeDetector, formBuilder, dataService, modalService, notificationService) {
+        super(route, router, serverConfigService, dataService);
+        this.changeDetector = changeDetector;
+        this.formBuilder = formBuilder;
+        this.dataService = dataService;
+        this.modalService = modalService;
+        this.notificationService = notificationService;
+        this.fetchHistory = new Subject();
+        this.addressesToDeleteIds = new Set();
+        this.addressDefaultsUpdated = false;
+        this.ordersPerPage = 10;
+        this.currentOrdersPage = 1;
+        this.orderListUpdates$ = new Subject();
+        this.customFields = this.getCustomFieldConfig('Customer');
+        this.addressCustomFields = this.getCustomFieldConfig('Address');
+        this.detailForm = this.formBuilder.group({
+            customer: this.formBuilder.group({
+                title: '',
+                firstName: ['', Validators.required],
+                lastName: ['', Validators.required],
+                phoneNumber: '',
+                emailAddress: ['', [Validators.required, Validators.email]],
+                password: '',
+                customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {})),
+            }),
+            addresses: new FormArray([]),
+        });
+    }
+    ngOnInit() {
+        this.init();
+        this.availableCountries$ = this.dataService.settings
+            .getAvailableCountries()
+            .mapSingle(result => result.countries.items)
+            .pipe(shareReplay(1));
+        const customerWithUpdates$ = this.entity$.pipe(merge(this.orderListUpdates$));
+        this.orders$ = customerWithUpdates$.pipe(map(customer => customer.orders.items));
+        this.ordersCount$ = this.entity$.pipe(map(customer => customer.orders.totalItems));
+        this.history$ = this.fetchHistory.pipe(startWith(null), switchMap(() => {
+            return this.dataService.customer
+                .getCustomerHistory(this.id, {
+                sort: {
+                    createdAt: SortOrder.DESC,
+                },
+            })
+                .mapStream(data => data.customer?.history.items);
+        }));
+    }
+    ngOnDestroy() {
+        this.destroy();
+        this.orderListUpdates$.complete();
+    }
+    getAddressFormControls() {
+        const formArray = this.detailForm.get(['addresses']);
+        return formArray.controls;
+    }
+    setDefaultBillingAddressId(id) {
+        this.defaultBillingAddressId = id;
+        this.addressDefaultsUpdated = true;
+    }
+    setDefaultShippingAddressId(id) {
+        this.defaultShippingAddressId = id;
+        this.addressDefaultsUpdated = true;
+    }
+    toggleDeleteAddress(id) {
+        if (this.addressesToDeleteIds.has(id)) {
+            this.addressesToDeleteIds.delete(id);
+        }
+        else {
+            this.addressesToDeleteIds.add(id);
+        }
+    }
+    addAddress() {
+        const addressFormArray = this.detailForm.get('addresses');
+        const newAddress = this.formBuilder.group({
+            fullName: '',
+            company: '',
+            streetLine1: ['', Validators.required],
+            streetLine2: '',
+            city: '',
+            province: '',
+            postalCode: '',
+            countryCode: ['', Validators.required],
+            phoneNumber: '',
+            defaultShippingAddress: false,
+            defaultBillingAddress: false,
+        });
+        if (this.addressCustomFields.length) {
+            const customFieldsGroup = this.formBuilder.group({});
+            for (const fieldDef of this.addressCustomFields) {
+                customFieldsGroup.addControl(fieldDef.name, new FormControl(''));
+            }
+            newAddress.addControl('customFields', customFieldsGroup);
+        }
+        addressFormArray.push(newAddress);
+    }
+    setOrderItemsPerPage(itemsPerPage) {
+        this.ordersPerPage = +itemsPerPage;
+        this.fetchOrdersList();
+    }
+    setOrderCurrentPage(page) {
+        this.currentOrdersPage = +page;
+        this.fetchOrdersList();
+    }
+    create() {
+        const customerForm = this.detailForm.get('customer');
+        if (!customerForm) {
+            return;
+        }
+        const formValue = customerForm.value;
+        const customFields = customerForm.get('customFields')?.value;
+        const customer = {
+            title: formValue.title,
+            emailAddress: formValue.emailAddress,
+            firstName: formValue.firstName,
+            lastName: formValue.lastName,
+            phoneNumber: formValue.phoneNumber,
+            customFields,
+        };
+        this.dataService.customer
+            .createCustomer(customer, formValue.password)
+            .subscribe(({ createCustomer }) => {
+            switch (createCustomer.__typename) {
+                case 'Customer':
+                    this.notificationService.success(marker('common.notify-create-success'), {
+                        entity: 'Customer',
+                    });
+                    if (createCustomer.emailAddress && !formValue.password) {
+                        this.notificationService.notify({
+                            message: marker('customer.email-verification-sent'),
+                            translationVars: { emailAddress: formValue.emailAddress },
+                            type: 'info',
+                            duration: 10000,
+                        });
+                    }
+                    this.detailForm.markAsPristine();
+                    this.addressDefaultsUpdated = false;
+                    this.changeDetector.markForCheck();
+                    this.router.navigate(['../', createCustomer.id], { relativeTo: this.route });
+                    break;
+                case 'EmailAddressConflictError':
+                    this.notificationService.error(createCustomer.message);
+            }
+        });
+    }
+    save() {
+        this.entity$
+            .pipe(take(1), mergeMap(({ id }) => {
+            const saveOperations = [];
+            const customerForm = this.detailForm.get('customer');
+            if (customerForm && customerForm.dirty) {
+                const formValue = customerForm.value;
+                const customFields = customerForm.get('customFields')?.value;
+                const customer = {
+                    id,
+                    title: formValue.title,
+                    emailAddress: formValue.emailAddress,
+                    firstName: formValue.firstName,
+                    lastName: formValue.lastName,
+                    phoneNumber: formValue.phoneNumber,
+                    customFields,
+                };
+                saveOperations.push(this.dataService.customer
+                    .updateCustomer(customer)
+                    .pipe(map(res => res.updateCustomer)));
+            }
+            const addressFormArray = this.detailForm.get('addresses');
+            if ((addressFormArray && addressFormArray.dirty) || this.addressDefaultsUpdated) {
+                for (const addressControl of addressFormArray.controls) {
+                    if (addressControl.dirty || this.addressDefaultsUpdated) {
+                        const address = addressControl.value;
+                        const input = {
+                            fullName: address.fullName,
+                            company: address.company,
+                            streetLine1: address.streetLine1,
+                            streetLine2: address.streetLine2,
+                            city: address.city,
+                            province: address.province,
+                            postalCode: address.postalCode,
+                            countryCode: address.countryCode,
+                            phoneNumber: address.phoneNumber,
+                            defaultShippingAddress: this.defaultShippingAddressId === address.id,
+                            defaultBillingAddress: this.defaultBillingAddressId === address.id,
+                            customFields: address.customFields,
+                        };
+                        if (!address.id) {
+                            saveOperations.push(this.dataService.customer
+                                .createCustomerAddress(id, input)
+                                .pipe(map(res => res.createCustomerAddress)));
+                        }
+                        else {
+                            if (this.addressesToDeleteIds.has(address.id)) {
+                                saveOperations.push(this.dataService.customer
+                                    .deleteCustomerAddress(address.id)
+                                    .pipe(map(res => res.deleteCustomerAddress)));
+                            }
+                            else {
+                                saveOperations.push(this.dataService.customer
+                                    .updateCustomerAddress({
+                                    ...input,
+                                    id: address.id,
+                                })
+                                    .pipe(map(res => res.updateCustomerAddress)));
+                            }
+                        }
+                    }
+                }
+            }
+            return forkJoin(saveOperations);
+        }))
+            .subscribe(data => {
+            let notified = false;
+            for (const result of data) {
+                switch (result.__typename) {
+                    case 'Customer':
+                    case 'Address':
+                    case 'Success':
+                        if (!notified) {
+                            this.notificationService.success(marker('common.notify-update-success'), {
+                                entity: 'Customer',
+                            });
+                            notified = true;
+                            this.detailForm.markAsPristine();
+                            this.addressDefaultsUpdated = false;
+                            this.changeDetector.markForCheck();
+                            this.fetchHistory.next();
+                            this.dataService.customer.getCustomer(this.id).single$.subscribe();
+                        }
+                        break;
+                    case 'EmailAddressConflictError':
+                        this.notificationService.error(result.message);
+                        break;
+                }
+            }
+        }, err => {
+            this.notificationService.error(marker('common.notify-update-error'), {
+                entity: 'Customer',
+            });
+        });
+    }
+    addToGroup() {
+        this.modalService
+            .fromComponent(SelectCustomerGroupDialogComponent, {
+            size: 'md',
+        })
+            .pipe(switchMap(groupIds => (groupIds ? from(groupIds) : EMPTY)), concatMap(groupId => this.dataService.customer.addCustomersToGroup(groupId, [this.id])))
+            .subscribe({
+            next: res => {
+                this.notificationService.success(marker(`customer.add-customers-to-group-success`), {
+                    customerCount: 1,
+                    groupName: res.addCustomersToGroup.name,
+                });
+            },
+            complete: () => {
+                this.dataService.customer.getCustomer(this.id, { take: 0 }).single$.subscribe();
+                this.fetchHistory.next();
+            },
+        });
+    }
+    removeFromGroup(group) {
+        this.modalService
+            .dialog({
+            title: marker('customer.confirm-remove-customer-from-group'),
+            buttons: [
+                { type: 'secondary', label: marker('common.cancel') },
+                { type: 'danger', label: marker('common.delete'), returnValue: true },
+            ],
+        })
+            .pipe(switchMap(response => response
+            ? this.dataService.customer.removeCustomersFromGroup(group.id, [this.id])
+            : EMPTY), switchMap(() => this.dataService.customer.getCustomer(this.id, { take: 0 }).single$))
+            .subscribe(result => {
+            this.notificationService.success(marker(`customer.remove-customers-from-group-success`), {
+                customerCount: 1,
+                groupName: group.name,
+            });
+            this.fetchHistory.next();
+        });
+    }
+    addNoteToCustomer({ note }) {
+        this.dataService.customer.addNoteToCustomer(this.id, note).subscribe(() => {
+            this.fetchHistory.next();
+            this.notificationService.success(marker('common.notify-create-success'), {
+                entity: 'Note',
+            });
+        });
+    }
+    updateNote(entry) {
+        this.modalService
+            .fromComponent(EditNoteDialogComponent, {
+            closable: true,
+            locals: {
+                displayPrivacyControls: false,
+                note: entry.data.note,
+            },
+        })
+            .pipe(switchMap(result => {
+            if (result) {
+                return this.dataService.customer.updateCustomerNote({
+                    noteId: entry.id,
+                    note: result.note,
+                });
+            }
+            else {
+                return EMPTY;
+            }
+        }))
+            .subscribe(result => {
+            this.fetchHistory.next();
+            this.notificationService.success(marker('common.notify-update-success'), {
+                entity: 'Note',
+            });
+        });
+    }
+    deleteNote(entry) {
+        return this.modalService
+            .dialog({
+            title: marker('common.confirm-delete-note'),
+            body: entry.data.note,
+            buttons: [
+                { type: 'secondary', label: marker('common.cancel') },
+                { type: 'danger', label: marker('common.delete'), returnValue: true },
+            ],
+        })
+            .pipe(switchMap(res => (res ? this.dataService.customer.deleteCustomerNote(entry.id) : EMPTY)))
+            .subscribe(() => {
+            this.fetchHistory.next();
+            this.notificationService.success(marker('common.notify-delete-success'), {
+                entity: 'Note',
+            });
+        });
+    }
+    setFormValues(entity) {
+        const customerGroup = this.detailForm.get('customer');
+        if (customerGroup) {
+            customerGroup.patchValue({
+                title: entity.title,
+                firstName: entity.firstName,
+                lastName: entity.lastName,
+                phoneNumber: entity.phoneNumber,
+                emailAddress: entity.emailAddress,
+            });
+        }
+        if (entity.addresses) {
+            const addressesArray = new FormArray([]);
+            for (const address of entity.addresses) {
+                const { customFields, ...rest } = address;
+                const addressGroup = this.formBuilder.group({
+                    ...rest,
+                    countryCode: address.country.code,
+                });
+                addressesArray.push(addressGroup);
+                if (address.defaultShippingAddress) {
+                    this.defaultShippingAddressId = address.id;
+                }
+                if (address.defaultBillingAddress) {
+                    this.defaultBillingAddressId = address.id;
+                }
+                if (this.addressCustomFields.length) {
+                    const customFieldsGroup = this.formBuilder.group({});
+                    for (const fieldDef of this.addressCustomFields) {
+                        const key = fieldDef.name;
+                        const value = address.customFields?.[key];
+                        const control = new FormControl(value);
+                        customFieldsGroup.addControl(key, control);
+                    }
+                    addressGroup.addControl('customFields', customFieldsGroup);
+                }
+            }
+            this.detailForm.setControl('addresses', addressesArray);
+        }
+        if (this.customFields.length) {
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['customer', 'customFields']), entity);
+        }
+        this.changeDetector.markForCheck();
+    }
+    /**
+     * Refetch the customer with the current order list settings.
+     */
+    fetchOrdersList() {
+        this.dataService.customer
+            .getCustomer(this.id, {
+            take: this.ordersPerPage,
+            skip: (this.currentOrdersPage - 1) * this.ordersPerPage,
+        })
+            .single$.pipe(map(data => data.customer), filter(notNullOrUndefined))
+            .subscribe(result => this.orderListUpdates$.next(result));
+    }
+}
+CustomerDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerDetailComponent, deps: [{ token: i2.ActivatedRoute }, { token: i2.Router }, { token: i1.ServerConfigService }, { token: i0.ChangeDetectorRef }, { token: i3.FormBuilder }, { token: i1.DataService }, { token: i1.ModalService }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component });
+CustomerDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CustomerDetailComponent, selector: "vdr-customer-detail", usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-align-items-center\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <vdr-customer-status-label [customer]=\"entity$ | async\"></vdr-customer-status-label>\r\n            <div\r\n                class=\"last-login\"\r\n                *ngIf=\"(entity$ | async)?.user?.lastLogin as lastLogin\"\r\n                [title]=\"lastLogin | localeDate: 'medium'\"\r\n            >\r\n                {{ 'customer.last-login' | translate }}: {{ lastLogin | timeAgo }}\r\n            </div>\r\n        </div>\r\n    </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-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm.get('customer')\">\r\n    <vdr-form-field [label]=\"'customer.title' | translate\" for=\"title\" [readOnlyToggle]=\"!(isNew$ | async)\">\r\n        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n    </vdr-form-field>\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 [label]=\"'customer.password' | translate\" for=\"password\" *ngIf=\"isNew$ | async\">\r\n        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n    </vdr-form-field>\r\n\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Customer\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"detailForm.get(['customer', 'customFields'])\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\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</form>\r\n\r\n<div class=\"groups\" *ngIf=\"(entity$ | async)?.groups as groups\">\r\n    <label class=\"clr-control-label\">{{ 'customer.customer-groups' | translate }}</label>\r\n    <ng-container *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    </ng-container>\r\n    <ng-template #noGroups>\r\n        {{ 'customer.not-a-member-of-any-groups' | translate }}\r\n    </ng-template>\r\n    <div>\r\n        <button\r\n            class=\"btn btn-sm btn-secondary\"\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</div>\r\n\r\n<div class=\"clr-row\" *ngIf=\"!(isNew$ | async)\">\r\n    <div class=\"clr-col-md-4\">\r\n        <h3>{{ 'customer.addresses' | translate }}</h3>\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]=\"(['UpdateCustomer'] | hasPermission) && !addressesToDeleteIds.has(addressForm.value.id)\"\r\n            (setAsDefaultBilling)=\"setDefaultBillingAddressId($event)\"\r\n            (setAsDefaultShipping)=\"setDefaultShippingAddressId($event)\"\r\n            (deleteAddress)=\"toggleDeleteAddress($event)\"\r\n        ></vdr-address-card>\r\n        <button class=\"btn btn-secondary\" (click)=\"addAddress()\" *vdrIfPermissions=\"'UpdateCustomer'\">\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'customer.create-new-address' | translate }}\r\n        </button>\r\n    </div>\r\n    <div class=\"clr-col-md-8\">\r\n        <h3>{{ 'customer.orders' | translate }}</h3>\r\n        <vdr-data-table\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-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n            <vdr-dt-column>{{ 'order.state' | translate }}</vdr-dt-column>\r\n            <vdr-dt-column>{{ 'order.total' | translate }}</vdr-dt-column>\r\n            <vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>\r\n            <vdr-dt-column></vdr-dt-column>\r\n            <ng-template let-order=\"item\">\r\n                <td class=\"left\">{{ order.code }}</td>\r\n                <td class=\"left\">{{ order.state }}</td>\r\n                <td class=\"left\">{{ order.totalWithTax | localeCurrency: order.currencyCode }}</td>\r\n                <td class=\"left\">{{ order.updatedAt | localeDate: 'medium' }}</td>\r\n                <td class=\"right\">\r\n                    <vdr-table-row-action\r\n                        iconShape=\"shopping-cart\"\r\n                        [label]=\"'common.open' | translate\"\r\n                        [linkTo]=\"['/orders/', order.id]\"\r\n                    ></vdr-table-row-action>\r\n                </td>\r\n            </ng-template>\r\n        </vdr-data-table>\r\n    </div>\r\n</div>\r\n<div class=\"clr-row\" *ngIf=\"!(isNew$ | async)\">\r\n    <div class=\"clr-col-md-6\">\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    </div>\r\n</div>\r\n", styles: [".last-login{margin-left:6px;color:var(--color-grey-500)}.to-delete{opacity:.5}\n"], components: [{ type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: CustomerStatusLabelComponent, selector: "vdr-customer-status-label", inputs: ["customer"] }, { type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: AddressCardComponent, selector: "vdr-address-card", inputs: ["addressForm", "customFields", "availableCountries", "isDefaultBilling", "isDefaultShipping", "editable"], outputs: ["setAsDefaultShipping", "setAsDefaultBilling", "deleteAddress"] }, { type: i1.DataTableComponent, selector: "vdr-data-table", inputs: ["items", "itemsPerPage", "currentPage", "totalItems", "allSelected", "isRowSelectedFn", "emptyStateLabel"], outputs: ["allSelectChange", "rowSelectChange", "pageChange", "itemsPerPageChange"] }, { type: i1.DataTableColumnComponent, selector: "vdr-dt-column", inputs: ["expand"] }, { type: i1.TableRowActionComponent, selector: "vdr-table-row-action", inputs: ["linkTo", "label", "iconShape", "disabled"] }, { type: CustomerHistoryComponent, selector: "vdr-customer-history", inputs: ["customer", "history"], outputs: ["addNote", "updateNote", "deleteNote"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i4$1.ClrLabel, selector: "label", inputs: ["for"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "async": i3$1.AsyncPipe, "localeDate": i1.LocaleDatePipe, "translate": i4.TranslatePipe, "timeAgo": i1.TimeAgoPipe, "hasPermission": i1.HasPermissionPipe, "localeCurrency": i1.LocaleCurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-customer-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-align-items-center\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <vdr-customer-status-label [customer]=\"entity$ | async\"></vdr-customer-status-label>\r\n            <div\r\n                class=\"last-login\"\r\n                *ngIf=\"(entity$ | async)?.user?.lastLogin as lastLogin\"\r\n                [title]=\"lastLogin | localeDate: 'medium'\"\r\n            >\r\n                {{ 'customer.last-login' | translate }}: {{ lastLogin | timeAgo }}\r\n            </div>\r\n        </div>\r\n    </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-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm.get('customer')\">\r\n    <vdr-form-field [label]=\"'customer.title' | translate\" for=\"title\" [readOnlyToggle]=\"!(isNew$ | async)\">\r\n        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n    </vdr-form-field>\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 [label]=\"'customer.password' | translate\" for=\"password\" *ngIf=\"isNew$ | async\">\r\n        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n    </vdr-form-field>\r\n\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Customer\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"detailForm.get(['customer', 'customFields'])\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\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</form>\r\n\r\n<div class=\"groups\" *ngIf=\"(entity$ | async)?.groups as groups\">\r\n    <label class=\"clr-control-label\">{{ 'customer.customer-groups' | translate }}</label>\r\n    <ng-container *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    </ng-container>\r\n    <ng-template #noGroups>\r\n        {{ 'customer.not-a-member-of-any-groups' | translate }}\r\n    </ng-template>\r\n    <div>\r\n        <button\r\n            class=\"btn btn-sm btn-secondary\"\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</div>\r\n\r\n<div class=\"clr-row\" *ngIf=\"!(isNew$ | async)\">\r\n    <div class=\"clr-col-md-4\">\r\n        <h3>{{ 'customer.addresses' | translate }}</h3>\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]=\"(['UpdateCustomer'] | hasPermission) && !addressesToDeleteIds.has(addressForm.value.id)\"\r\n            (setAsDefaultBilling)=\"setDefaultBillingAddressId($event)\"\r\n            (setAsDefaultShipping)=\"setDefaultShippingAddressId($event)\"\r\n            (deleteAddress)=\"toggleDeleteAddress($event)\"\r\n        ></vdr-address-card>\r\n        <button class=\"btn btn-secondary\" (click)=\"addAddress()\" *vdrIfPermissions=\"'UpdateCustomer'\">\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'customer.create-new-address' | translate }}\r\n        </button>\r\n    </div>\r\n    <div class=\"clr-col-md-8\">\r\n        <h3>{{ 'customer.orders' | translate }}</h3>\r\n        <vdr-data-table\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-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n            <vdr-dt-column>{{ 'order.state' | translate }}</vdr-dt-column>\r\n            <vdr-dt-column>{{ 'order.total' | translate }}</vdr-dt-column>\r\n            <vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>\r\n            <vdr-dt-column></vdr-dt-column>\r\n            <ng-template let-order=\"item\">\r\n                <td class=\"left\">{{ order.code }}</td>\r\n                <td class=\"left\">{{ order.state }}</td>\r\n                <td class=\"left\">{{ order.totalWithTax | localeCurrency: order.currencyCode }}</td>\r\n                <td class=\"left\">{{ order.updatedAt | localeDate: 'medium' }}</td>\r\n                <td class=\"right\">\r\n                    <vdr-table-row-action\r\n                        iconShape=\"shopping-cart\"\r\n                        [label]=\"'common.open' | translate\"\r\n                        [linkTo]=\"['/orders/', order.id]\"\r\n                    ></vdr-table-row-action>\r\n                </td>\r\n            </ng-template>\r\n        </vdr-data-table>\r\n    </div>\r\n</div>\r\n<div class=\"clr-row\" *ngIf=\"!(isNew$ | async)\">\r\n    <div class=\"clr-col-md-6\">\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    </div>\r\n</div>\r\n", styles: [".last-login{margin-left:6px;color:var(--color-grey-500)}.to-delete{opacity:.5}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2.ActivatedRoute }, { type: i2.Router }, { type: i1.ServerConfigService }, { type: i0.ChangeDetectorRef }, { type: i3.FormBuilder }, { type: i1.DataService }, { type: i1.ModalService }, { type: i1.NotificationService }]; } });
+
+class CustomerGroupDetailDialogComponent {
+    constructor(serverConfigService, formBuilder) {
+        this.serverConfigService = serverConfigService;
+        this.formBuilder = formBuilder;
+        this.customFields = this.serverConfigService.getCustomFieldsFor('CustomerGroup');
+    }
+    ngOnInit() {
+        this.form = this.formBuilder.group({
+            name: [this.group.name, Validators.required],
+            customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {})),
+        });
+        if (this.customFields.length) {
+            const customFieldsGroup = this.form.get('customFields');
+            for (const fieldDef of this.customFields) {
+                const key = fieldDef.name;
+                const value = this.group.customFields?.[key];
+                const control = customFieldsGroup.get(key);
+                if (control) {
+                    control.patchValue(value);
+                }
+            }
+        }
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    save() {
+        this.resolveWith(this.form.value);
+    }
+}
+CustomerGroupDetailDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerGroupDetailDialogComponent, deps: [{ token: i1.ServerConfigService }, { token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+CustomerGroupDetailDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CustomerGroupDetailDialogComponent, 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: [""], components: [{ type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }], directives: [{ type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i4$1.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i4.TranslatePipe, "hasPermission": i1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerGroupDetailDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-customer-group-detail-dialog', changeDetection: ChangeDetectionStrategy.OnPush, 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: [""] }]
+        }], ctorParameters: function () { return [{ type: i1.ServerConfigService }, { type: i3.FormBuilder }]; } });
+
+class CustomerGroupListComponent {
+    constructor(dataService, notificationService, modalService, route, router) {
+        this.dataService = dataService;
+        this.notificationService = notificationService;
+        this.modalService = modalService;
+        this.route = route;
+        this.router = router;
+        this.selectedCustomerIds = [];
+        this.fetchGroupMembers$ = new BehaviorSubject({
+            skip: 0,
+            take: 0,
+            filterTerm: '',
+        });
+        this.refreshActiveGroupMembers$ = new BehaviorSubject(undefined);
+    }
+    ngOnInit() {
+        this.groups$ = this.dataService.customer
+            .getCustomerGroupList()
+            .mapStream(data => data.customerGroups.items);
+        const activeGroupId$ = this.route.paramMap.pipe(map(pm => pm.get('contents')), distinctUntilChanged(), tap(() => (this.selectedCustomerIds = [])));
+        this.listIsEmpty$ = this.groups$.pipe(map(groups => groups.length === 0));
+        this.activeGroup$ = combineLatest(this.groups$, activeGroupId$).pipe(map(([groups, activeGroupId]) => {
+            if (activeGroupId) {
+                return groups.find(g => g.id === activeGroupId);
+            }
+        }));
+        const membersResult$ = combineLatest(this.activeGroup$, this.fetchGroupMembers$, this.refreshActiveGroupMembers$).pipe(switchMap(([activeGroup, { skip, take, filterTerm }]) => {
+            if (activeGroup) {
+                return this.dataService.customer
+                    .getCustomerGroupWithCustomers(activeGroup.id, {
+                    skip,
+                    take,
+                    filter: {
+                        emailAddress: {
+                            contains: filterTerm,
+                        },
+                    },
+                })
+                    .mapStream(res => res.customerGroup?.customers);
+            }
+            else {
+                return of(undefined);
+            }
+        }));
+        this.members$ = membersResult$.pipe(map(res => res?.items ?? []));
+        this.membersTotal$ = membersResult$.pipe(map(res => res?.totalItems ?? 0));
+    }
+    create() {
+        this.modalService
+            .fromComponent(CustomerGroupDetailDialogComponent, { locals: { group: { name: '' } } })
+            .pipe(switchMap(result => result
+            ? this.dataService.customer.createCustomerGroup({ ...result, customerIds: [] })
+            : EMPTY), 
+        // refresh list
+        switchMap(() => this.dataService.customer.getCustomerGroupList().single$))
+            .subscribe(() => {
+            this.notificationService.success(marker('common.notify-create-success'), {
+                entity: 'CustomerGroup',
+            });
+        }, err => {
+            this.notificationService.error(marker('common.notify-create-error'), {
+                entity: 'CustomerGroup',
+            });
+        });
+    }
+    delete(groupId) {
+        this.modalService
+            .dialog({
+            title: marker('customer.confirm-delete-customer-group'),
+            buttons: [
+                { type: 'secondary', label: marker('common.cancel') },
+                { type: 'danger', label: marker('common.delete'), returnValue: true },
+            ],
+        })
+            .pipe(switchMap(response => response ? this.dataService.customer.deleteCustomerGroup(groupId) : EMPTY), switchMap(result => {
+            if (result.deleteCustomerGroup.result === DeletionResult.DELETED) {
+                // refresh list
+                return this.dataService.customer
+                    .getCustomerGroupList()
+                    .mapSingle(() => ({ errorMessage: false }));
+            }
+            else {
+                return of({ errorMessage: result.deleteCustomerGroup.message });
+            }
+        }))
+            .subscribe(result => {
+            if (typeof result.errorMessage === 'string') {
+                this.notificationService.error(result.errorMessage);
+            }
+            else {
+                this.notificationService.success(marker('common.notify-delete-success'), {
+                    entity: 'CustomerGroup',
+                });
+            }
+        }, err => {
+            this.notificationService.error(marker('common.notify-delete-error'), {
+                entity: 'CustomerGroup',
+            });
+        });
+    }
+    update(group) {
+        this.modalService
+            .fromComponent(CustomerGroupDetailDialogComponent, { locals: { group } })
+            .pipe(switchMap(result => result
+            ? this.dataService.customer.updateCustomerGroup({ id: group.id, ...result })
+            : EMPTY))
+            .subscribe(() => {
+            this.notificationService.success(marker('common.notify-update-success'), {
+                entity: 'CustomerGroup',
+            });
+        }, err => {
+            this.notificationService.error(marker('common.notify-update-error'), {
+                entity: 'CustomerGroup',
+            });
+        });
+    }
+    closeMembers() {
+        const params = { ...this.route.snapshot.params };
+        delete params.contents;
+        this.router.navigate(['./', params], { relativeTo: this.route, queryParamsHandling: 'preserve' });
+    }
+    addToGroup(group) {
+        this.modalService
+            .fromComponent(AddCustomerToGroupDialogComponent, {
+            locals: {
+                group,
+                route: this.route,
+            },
+            size: 'md',
+            verticalAlign: 'top',
+        })
+            .pipe(switchMap(customerIds => customerIds
+            ? this.dataService.customer
+                .addCustomersToGroup(group.id, customerIds)
+                .pipe(mapTo(customerIds))
+            : EMPTY))
+            .subscribe({
+            next: result => {
+                this.notificationService.success(marker(`customer.add-customers-to-group-success`), {
+                    customerCount: result.length,
+                    groupName: group.name,
+                });
+                this.refreshActiveGroupMembers$.next();
+                this.selectedCustomerIds = [];
+            },
+        });
+    }
+    removeFromGroup(group, customerIds) {
+        this.dataService.customer.removeCustomersFromGroup(group.id, customerIds).subscribe({
+            complete: () => {
+                this.notificationService.success(marker(`customer.remove-customers-from-group-success`), {
+                    customerCount: customerIds.length,
+                    groupName: group.name,
+                });
+                this.refreshActiveGroupMembers$.next();
+                this.selectedCustomerIds = [];
+            },
+        });
+    }
+}
+CustomerGroupListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerGroupListComponent, deps: [{ token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: i2.ActivatedRoute }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
+CustomerGroupListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CustomerGroupListComponent, selector: "vdr-customer-group-list", ngImport: i0, template: "<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        <button class=\"btn btn-primary\" *vdrIfPermissions=\"'CreateCustomerGroup'\" (click)=\"create()\">\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'customer.create-new-customer-group' | translate }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n<div class=\"group-wrapper\">\r\n    <div class=\"group-list\">\r\n        <table\r\n            class=\"table mt0\"\r\n            [class.expanded]=\"activeGroup$ | async\"\r\n            *ngIf=\"!(listIsEmpty$ | async); else emptyPlaceholder\"\r\n        >\r\n            <tbody>\r\n                <tr\r\n                    *ngFor=\"let group of groups$ | async\"\r\n                    [class.active]=\"group.id === (activeGroup$ | async)?.id\"\r\n                >\r\n                    <td class=\"left align-middle\"><vdr-entity-info [entity]=\"group\"></vdr-entity-info></td>\r\n                    <td class=\"left align-middle\">\r\n                        <vdr-chip [colorFrom]=\"group.id\">{{ group.name }}</vdr-chip>\r\n                    </td>\r\n                    <td class=\"text-right align-middle\">\r\n                        <a\r\n                            class=\"btn btn-link btn-sm\"\r\n                            [routerLink]=\"['./', { contents: group.id }]\"\r\n                            queryParamsHandling=\"preserve\"\r\n                        >\r\n                            <clr-icon shape=\"view-list\"></clr-icon>\r\n                            {{ 'customer.view-group-members' | translate }}\r\n                        </a>\r\n                    </td>\r\n                    <td class=\"align-middle\">\r\n                        <button class=\"btn btn-link btn-sm\" (click)=\"update(group)\">\r\n                            <clr-icon shape=\"edit\"></clr-icon>\r\n                            {{ 'common.edit' | translate }}\r\n                        </button>\r\n                    </td>\r\n                    <td class=\"align-middle\">\r\n                        <vdr-dropdown>\r\n                            <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                                {{ 'common.actions' | translate }}\r\n                                <clr-icon shape=\"caret down\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                <button\r\n                                    class=\"button\"\r\n                                    vdrDropdownItem\r\n                                    (click)=\"delete(group.id)\"\r\n                                    [disabled]=\"!('DeleteCustomerGroup' | hasPermission)\"\r\n                                >\r\n                                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                    {{ 'common.delete' | translate }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    <ng-template #emptyPlaceholder>\r\n        <vdr-empty-placeholder></vdr-empty-placeholder>\r\n    </ng-template>\r\n    <div class=\"group-members\" [class.expanded]=\"activeGroup$ | async\">\r\n        <ng-container *ngIf=\"activeGroup$ | async as activeGroup\">\r\n            <div class=\"flex\">\r\n                <div class=\"header-title-row\">{{ activeGroup.name }} ({{ membersTotal$ | async }})</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <button type=\"button\" class=\"close-button\" (click)=\"closeMembers()\">\r\n                    <clr-icon shape=\"close\"></clr-icon>\r\n                </button>\r\n            </div>\r\n            <div class=\"controls\">\r\n                <vdr-dropdown>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"btn btn-secondary btn-sm\"\r\n                        vdrDropdownTrigger\r\n                        [disabled]=\"selectedCustomerIds.length === 0\"\r\n                    >\r\n                        {{ 'common.with-selected' | translate }}\r\n                        <clr-icon shape=\"caret down\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"delete-button\"\r\n                            (click)=\"removeFromGroup(activeGroup, selectedCustomerIds)\"\r\n                            vdrDropdownItem\r\n                            [disabled]=\"!('UpdateCustomerGroup' | hasPermission)\"\r\n                        >\r\n                            <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                            {{ 'customer.remove-from-group' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n                <button class=\"btn btn-secondary btn-sm\" (click)=\"addToGroup(activeGroup)\">\r\n                    {{ 'customer.add-customers-to-group' | translate: { groupName: activeGroup.name } }}\r\n                </button>\r\n            </div>\r\n            <vdr-customer-group-member-list\r\n                [members]=\"members$ | async\"\r\n                [route]=\"route\"\r\n                [totalItems]=\"membersTotal$ | async\"\r\n                [selectedMemberIds]=\"selectedCustomerIds\"\r\n                (selectionChange)=\"selectedCustomerIds = $event\"\r\n                (fetchParamsChange)=\"fetchGroupMembers$.next($event)\"\r\n            ></vdr-customer-group-member-list>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: [".group-wrapper{display:flex;height:calc(100% - 50px)}.group-wrapper .group-list{flex:1;overflow:auto;margin-top:0}.group-wrapper .group-list tr.active{background-color:var(--color-component-bg-200)}.group-wrapper .group-list.expanded{width:calc(100% - 40vw)}.group-members{height:100%;width:0;opacity:0;visibility:hidden;overflow:auto;transition:width .3s,opacity .2s .3s,visibility 0s .3s}.group-members.expanded{width:40vw;visibility:visible;opacity:1;padding-left:12px}.group-members .close-button{margin:0;background:none;border:none;cursor:pointer}.group-members ::ng-deep table.table{margin-top:0}.group-members ::ng-deep table.table th{top:0}.group-members .controls{display:flex;justify-content:space-between}vdr-empty-placeholder{flex:1}\n"], components: [{ type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }, { type: i1.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { type: CustomerGroupMemberListComponent, selector: "vdr-customer-group-member-list", inputs: ["members", "totalItems", "route", "selectedMemberIds"], outputs: ["selectionChange", "fetchParamsChange"] }], directives: [{ type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4$1.ClrIconCustomTag, selector: "clr-icon" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "translate": i4.TranslatePipe, "async": i3$1.AsyncPipe, "hasPermission": i1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerGroupListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-customer-group-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<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        <button class=\"btn btn-primary\" *vdrIfPermissions=\"'CreateCustomerGroup'\" (click)=\"create()\">\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'customer.create-new-customer-group' | translate }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n<div class=\"group-wrapper\">\r\n    <div class=\"group-list\">\r\n        <table\r\n            class=\"table mt0\"\r\n            [class.expanded]=\"activeGroup$ | async\"\r\n            *ngIf=\"!(listIsEmpty$ | async); else emptyPlaceholder\"\r\n        >\r\n            <tbody>\r\n                <tr\r\n                    *ngFor=\"let group of groups$ | async\"\r\n                    [class.active]=\"group.id === (activeGroup$ | async)?.id\"\r\n                >\r\n                    <td class=\"left align-middle\"><vdr-entity-info [entity]=\"group\"></vdr-entity-info></td>\r\n                    <td class=\"left align-middle\">\r\n                        <vdr-chip [colorFrom]=\"group.id\">{{ group.name }}</vdr-chip>\r\n                    </td>\r\n                    <td class=\"text-right align-middle\">\r\n                        <a\r\n                            class=\"btn btn-link btn-sm\"\r\n                            [routerLink]=\"['./', { contents: group.id }]\"\r\n                            queryParamsHandling=\"preserve\"\r\n                        >\r\n                            <clr-icon shape=\"view-list\"></clr-icon>\r\n                            {{ 'customer.view-group-members' | translate }}\r\n                        </a>\r\n                    </td>\r\n                    <td class=\"align-middle\">\r\n                        <button class=\"btn btn-link btn-sm\" (click)=\"update(group)\">\r\n                            <clr-icon shape=\"edit\"></clr-icon>\r\n                            {{ 'common.edit' | translate }}\r\n                        </button>\r\n                    </td>\r\n                    <td class=\"align-middle\">\r\n                        <vdr-dropdown>\r\n                            <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                                {{ 'common.actions' | translate }}\r\n                                <clr-icon shape=\"caret down\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                <button\r\n                                    class=\"button\"\r\n                                    vdrDropdownItem\r\n                                    (click)=\"delete(group.id)\"\r\n                                    [disabled]=\"!('DeleteCustomerGroup' | hasPermission)\"\r\n                                >\r\n                                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                    {{ 'common.delete' | translate }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    <ng-template #emptyPlaceholder>\r\n        <vdr-empty-placeholder></vdr-empty-placeholder>\r\n    </ng-template>\r\n    <div class=\"group-members\" [class.expanded]=\"activeGroup$ | async\">\r\n        <ng-container *ngIf=\"activeGroup$ | async as activeGroup\">\r\n            <div class=\"flex\">\r\n                <div class=\"header-title-row\">{{ activeGroup.name }} ({{ membersTotal$ | async }})</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <button type=\"button\" class=\"close-button\" (click)=\"closeMembers()\">\r\n                    <clr-icon shape=\"close\"></clr-icon>\r\n                </button>\r\n            </div>\r\n            <div class=\"controls\">\r\n                <vdr-dropdown>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"btn btn-secondary btn-sm\"\r\n                        vdrDropdownTrigger\r\n                        [disabled]=\"selectedCustomerIds.length === 0\"\r\n                    >\r\n                        {{ 'common.with-selected' | translate }}\r\n                        <clr-icon shape=\"caret down\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"delete-button\"\r\n                            (click)=\"removeFromGroup(activeGroup, selectedCustomerIds)\"\r\n                            vdrDropdownItem\r\n                            [disabled]=\"!('UpdateCustomerGroup' | hasPermission)\"\r\n                        >\r\n                            <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                            {{ 'customer.remove-from-group' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n                <button class=\"btn btn-secondary btn-sm\" (click)=\"addToGroup(activeGroup)\">\r\n                    {{ 'customer.add-customers-to-group' | translate: { groupName: activeGroup.name } }}\r\n                </button>\r\n            </div>\r\n            <vdr-customer-group-member-list\r\n                [members]=\"members$ | async\"\r\n                [route]=\"route\"\r\n                [totalItems]=\"membersTotal$ | async\"\r\n                [selectedMemberIds]=\"selectedCustomerIds\"\r\n                (selectionChange)=\"selectedCustomerIds = $event\"\r\n                (fetchParamsChange)=\"fetchGroupMembers$.next($event)\"\r\n            ></vdr-customer-group-member-list>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: [".group-wrapper{display:flex;height:calc(100% - 50px)}.group-wrapper .group-list{flex:1;overflow:auto;margin-top:0}.group-wrapper .group-list tr.active{background-color:var(--color-component-bg-200)}.group-wrapper .group-list.expanded{width:calc(100% - 40vw)}.group-members{height:100%;width:0;opacity:0;visibility:hidden;overflow:auto;transition:width .3s,opacity .2s .3s,visibility 0s .3s}.group-members.expanded{width:40vw;visibility:visible;opacity:1;padding-left:12px}.group-members .close-button{margin:0;background:none;border:none;cursor:pointer}.group-members ::ng-deep table.table{margin-top:0}.group-members ::ng-deep table.table th{top:0}.group-members .controls{display:flex;justify-content:space-between}vdr-empty-placeholder{flex:1}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i1.NotificationService }, { type: i1.ModalService }, { type: i2.ActivatedRoute }, { type: i2.Router }]; } });
+
+class CustomerListComponent extends BaseListComponent {
+    constructor(dataService, router, route, modalService, notificationService) {
+        super(router, route);
+        this.dataService = dataService;
+        this.modalService = modalService;
+        this.notificationService = notificationService;
+        this.searchTerm = new FormControl('');
+        super.setQueryFn((...args) => this.dataService.customer.getCustomerList(...args).refetchOnChannelChange(), data => data.customers, (skip, take) => ({
+            options: {
+                skip,
+                take,
+                filter: {
+                    emailAddress: {
+                        contains: this.searchTerm.value,
+                    },
+                    lastName: {
+                        contains: this.searchTerm.value,
+                    },
+                    postalCode: {
+                        contains: this.searchTerm.value,
+                    },
+                },
+                filterOperator: LogicalOperator.OR,
+                sort: {
+                    createdAt: SortOrder$1.DESC,
+                },
+            },
+        }));
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.searchTerm.valueChanges
+            .pipe(filter(value => 2 < value.length || value.length === 0), debounceTime(250), takeUntil(this.destroy$))
+            .subscribe(() => this.refresh());
+    }
+    deleteCustomer(customer) {
+        return this.modalService
+            .dialog({
+            title: marker('catalog.confirm-delete-customer'),
+            body: `${customer.firstName} ${customer.lastName}`,
+            buttons: [
+                { type: 'secondary', label: marker('common.cancel') },
+                { type: 'danger', label: marker('common.delete'), returnValue: true },
+            ],
+        })
+            .pipe(switchMap(res => (res ? this.dataService.customer.deleteCustomer(customer.id) : EMPTY)))
+            .subscribe(() => {
+            this.notificationService.success(marker('common.notify-delete-success'), {
+                entity: 'Customer',
+            });
+            this.refresh();
+        }, err => {
+            this.notificationService.error(marker('common.notify-delete-error'), {
+                entity: 'Customer',
+            });
+        });
+    }
+}
+CustomerListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerListComponent, deps: [{ token: i1.DataService }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i1.ModalService }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component });
+CustomerListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CustomerListComponent, selector: "vdr-customer-list", usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <input\r\n            type=\"text\"\r\n            name=\"emailSearchTerm\"\r\n            [formControl]=\"searchTerm\"\r\n            [placeholder]=\"'customer.search-customers-by-email-last-name-postal-code' | translate\"\r\n            class=\"search-input ml3\"\r\n        />\r\n    </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-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'customer.name' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'customer.email-address' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'customer.customer-type' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-customer=\"item\">\r\n        <td class=\"left align-middle\">\r\n            {{ customer.title }} {{ customer.firstName }} {{ customer.lastName }}\r\n        </td>\r\n        <td class=\"left align-middle\">{{ customer.emailAddress }}</td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-customer-status-label [customer]=\"customer\"></vdr-customer-status-label>\r\n        </td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', customer.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n        <td>\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteCustomer(customer)\"\r\n                        [disabled]=\"!('DeleteCustomer' | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".search-input{margin-top:6px;min-width:300px}\n"], components: [{ type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1.DataTableComponent, selector: "vdr-data-table", inputs: ["items", "itemsPerPage", "currentPage", "totalItems", "allSelected", "isRowSelectedFn", "emptyStateLabel"], outputs: ["allSelectChange", "rowSelectChange", "pageChange", "itemsPerPageChange"] }, { type: i1.DataTableColumnComponent, selector: "vdr-dt-column", inputs: ["expand"] }, { type: CustomerStatusLabelComponent, selector: "vdr-customer-status-label", inputs: ["customer"] }, { type: i1.TableRowActionComponent, selector: "vdr-table-row-action", inputs: ["linkTo", "label", "iconShape", "disabled"] }, { type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i4$1.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "translate": i4.TranslatePipe, "async": i3$1.AsyncPipe, "hasPermission": i1.HasPermissionPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-customer-list', template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <input\r\n            type=\"text\"\r\n            name=\"emailSearchTerm\"\r\n            [formControl]=\"searchTerm\"\r\n            [placeholder]=\"'customer.search-customers-by-email-last-name-postal-code' | translate\"\r\n            class=\"search-input ml3\"\r\n        />\r\n    </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-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'customer.name' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'customer.email-address' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'customer.customer-type' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-customer=\"item\">\r\n        <td class=\"left align-middle\">\r\n            {{ customer.title }} {{ customer.firstName }} {{ customer.lastName }}\r\n        </td>\r\n        <td class=\"left align-middle\">{{ customer.emailAddress }}</td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-customer-status-label [customer]=\"customer\"></vdr-customer-status-label>\r\n        </td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', customer.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n        <td>\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteCustomer(customer)\"\r\n                        [disabled]=\"!('DeleteCustomer' | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".search-input{margin-top:6px;min-width:300px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i1.ModalService }, { type: i1.NotificationService }]; } });
+
+class CustomerResolver extends BaseEntityResolver {
+    constructor(router, dataService) {
+        super(router, {
+            __typename: 'Customer',
+            id: '',
+            createdAt: '',
+            updatedAt: '',
+            title: '',
+            firstName: '',
+            lastName: '',
+            emailAddress: '',
+            phoneNumber: null,
+            addresses: null,
+            user: null,
+        }, id => dataService.customer.getCustomer(id).mapStream(data => data.customer));
+    }
+}
+CustomerResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerResolver, deps: [{ token: i2.Router }, { token: i1.DataService }], target: i0.ɵɵFactoryTarget.Injectable });
+CustomerResolver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerResolver, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerResolver, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i2.Router }, { type: i1.DataService }]; } });
+
+const customerRoutes = [
+    {
+        path: 'customers',
+        component: CustomerListComponent,
+        pathMatch: '',
+        data: {
+            breadcrumb: marker('breadcrumb.customers'),
+        },
+    },
+    {
+        path: 'customers/:id',
+        component: CustomerDetailComponent,
+        resolve: createResolveData(CustomerResolver),
+        canDeactivate: [CanDeactivateDetailGuard],
+        data: {
+            breadcrumb: customerBreadcrumb,
+        },
+    },
+    {
+        path: 'groups',
+        component: CustomerGroupListComponent,
+        data: {
+            breadcrumb: marker('breadcrumb.customer-groups'),
+        },
+    },
+];
+function customerBreadcrumb(data, params) {
+    return detailBreadcrumb({
+        entity: data.entity,
+        id: params.id,
+        breadcrumbKey: 'breadcrumb.customers',
+        getName: customer => `${customer.firstName} ${customer.lastName}`,
+        route: 'customers',
+    });
+}
+
+class CustomerModule {
+}
+CustomerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CustomerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerModule, declarations: [CustomerListComponent,
+        CustomerDetailComponent,
+        CustomerStatusLabelComponent,
+        AddressCardComponent,
+        CustomerGroupListComponent,
+        CustomerGroupDetailDialogComponent,
+        AddCustomerToGroupDialogComponent,
+        CustomerGroupMemberListComponent,
+        SelectCustomerGroupDialogComponent,
+        CustomerHistoryComponent,
+        AddressDetailDialogComponent], imports: [SharedModule, i2.RouterModule], exports: [AddressCardComponent] });
+CustomerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerModule, imports: [[SharedModule, RouterModule.forChild(customerRoutes)]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SharedModule, RouterModule.forChild(customerRoutes)],
+                    declarations: [
+                        CustomerListComponent,
+                        CustomerDetailComponent,
+                        CustomerStatusLabelComponent,
+                        AddressCardComponent,
+                        CustomerGroupListComponent,
+                        CustomerGroupDetailDialogComponent,
+                        AddCustomerToGroupDialogComponent,
+                        CustomerGroupMemberListComponent,
+                        SelectCustomerGroupDialogComponent,
+                        CustomerHistoryComponent,
+                        AddressDetailDialogComponent,
+                    ],
+                    exports: [AddressCardComponent],
+                }]
+        }] });
+
+// This file was generated by the build-public-api.ts script
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AddCustomerToGroupDialogComponent, AddressCardComponent, AddressDetailDialogComponent, CustomerDetailComponent, CustomerGroupDetailDialogComponent, CustomerGroupListComponent, CustomerGroupMemberListComponent, CustomerHistoryComponent, CustomerListComponent, CustomerModule, CustomerResolver, CustomerStatusLabelComponent, SelectCustomerGroupDialogComponent, customerBreadcrumb, customerRoutes };
+//# sourceMappingURL=vendure-admin-ui-customer.mjs.map