@vendure/admin-ui 1.0.0-beta.9 → 1.0.3

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

@@ -79,6 +79,7 @@ class AddressCardComponent {
         this.modalService = modalService;
         this.changeDetector = changeDetector;
         this.availableCountries = [];
+        this.editable = true;
         this.setAsDefaultShipping = new EventEmitter();
         this.setAsDefaultBilling = new EventEmitter();
         this.dataDependenciesPopulated = new BehaviorSubject(false);
@@ -134,7 +135,7 @@ class AddressCardComponent {
 AddressCardComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-address-card',
-                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        <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            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n",
+                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                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 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)}"]
             },] }
@@ -149,6 +150,7 @@ AddressCardComponent.propDecorators = {
     availableCountries: [{ type: Input }],
     isDefaultBilling: [{ type: Input }],
     isDefaultShipping: [{ type: Input }],
+    editable: [{ type: Input }],
     setAsDefaultShipping: [{ type: Output }],
     setAsDefaultBilling: [{ type: Output }]
 };
@@ -560,7 +562,7 @@ class CustomerDetailComponent extends BaseDetailComponent {
 CustomerDetailComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-customer-detail',
-                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 class=\"last-login\" *ngIf=\"(entity$ | async)?.user?.lastLogin as lastLogin\" [title]=\"lastLogin | localeDate:'medium'\">\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                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        <ng-container *ngFor=\"let customField of customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                entityName=\"Customer\"\r\n                [customFieldsFormGroup]=\"detailForm.get(['customer', 'customFields'])\"\r\n                [customField]=\"customField\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </section>\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 class=\"btn btn-sm btn-secondary\" (click)=\"addToGroup()\">\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            [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            (setAsDefaultBilling)=\"setDefaultBillingAddressId($event)\"\r\n            (setAsDefaultShipping)=\"setDefaultShippingAddressId($event)\"\r\n        ></vdr-address-card>\r\n        <button class=\"btn btn-secondary\" (click)=\"addAddress()\">\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.total | 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",
+                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 class=\"last-login\" *ngIf=\"(entity$ | async)?.user?.lastLogin as lastLogin\" [title]=\"lastLogin | localeDate:'medium'\">\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        <ng-container *ngFor=\"let customField of customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                entityName=\"Customer\"\r\n                [customFieldsFormGroup]=\"detailForm.get(['customer', 'customFields'])\"\r\n                [customField]=\"customField\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </section>\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 class=\"btn btn-sm btn-secondary\" (click)=\"addToGroup()\" *vdrIfPermissions=\"'UpdateCustomerGroup'\">\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            [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\"\r\n            (setAsDefaultBilling)=\"setDefaultBillingAddressId($event)\"\r\n            (setAsDefaultShipping)=\"setDefaultShippingAddressId($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.total | 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",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".last-login{margin-left:6px;color:var(--color-grey-500)}"]
             },] }
@@ -587,7 +589,7 @@ class CustomerGroupDetailDialogComponent {
 CustomerGroupDetailDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-customer-group-detail-dialog',
-                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\r\n<vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n    <input id=\"name\" type=\"text\" [(ngModel)]=\"group.name\" [readonly]=\"!('UpdateCustomer' | hasPermission)\" />\r\n</vdr-form-field>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"save()\" [disabled]=\"!group.name\" 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",
+                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\r\n<vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n    <input id=\"name\" type=\"text\" [(ngModel)]=\"group.name\" [readonly]=\"!(['CreateCustomerGroup', 'UpdateCustomerGroup'] | hasPermission)\" />\r\n</vdr-form-field>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"save()\" [disabled]=\"!group.name\" 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",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
@@ -752,7 +754,7 @@ class CustomerGroupListComponent {
 CustomerGroupListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-customer-group-list',
-                template: "<vdr-action-bar>\r\n    <vdr-ab-left> </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"customer-group-list\"></vdr-action-bar-items>\r\n        <button class=\"btn btn-primary\" *vdrIfPermissions=\"'CreateCustomer'\" (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    <table class=\"table group-list\" [class.expanded]=\"activeGroup$ | async\" *ngIf=\"!(listIsEmpty$ | async); else emptyPlaceholder\">\r\n        <tbody>\r\n            <tr *ngFor=\"let group of groups$ | async\" [class.active]=\"group.id === (activeGroup$ | async)?.id\">\r\n                <td class=\"left align-middle\"><vdr-entity-info [entity]=\"group\"></vdr-entity-info></td>\r\n                <td class=\"left align-middle\"><vdr-chip [colorFrom]=\"group.id\">{{ group.name }}</vdr-chip></td>\r\n                <td class=\"text-right align-middle\">\r\n                    <a\r\n                        class=\"btn btn-link btn-sm\"\r\n                        [routerLink]=\"['./', { contents: 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]=\"!('DeleteSettings' | 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    <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\">\r\n                    {{ activeGroup.name }} ({{ membersTotal$ | async }})\r\n                </div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <button type=\"button\" class=\"close-button\" (click)=\"closeMembers()\">\r\n                    <clr-icon shape=\"close\"></clr-icon>\r\n                </button>\r\n            </div>\r\n            <div class=\"controls\">\r\n                <vdr-dropdown>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"btn btn-secondary btn-sm\"\r\n                        vdrDropdownTrigger\r\n                        [disabled]=\"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]=\"!('DeleteSettings' | 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\r\n",
+                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    <table class=\"table group-list\" [class.expanded]=\"activeGroup$ | async\" *ngIf=\"!(listIsEmpty$ | async); else emptyPlaceholder\">\r\n        <tbody>\r\n            <tr *ngFor=\"let group of groups$ | async\" [class.active]=\"group.id === (activeGroup$ | async)?.id\">\r\n                <td class=\"left align-middle\"><vdr-entity-info [entity]=\"group\"></vdr-entity-info></td>\r\n                <td class=\"left align-middle\"><vdr-chip [colorFrom]=\"group.id\">{{ group.name }}</vdr-chip></td>\r\n                <td class=\"text-right align-middle\">\r\n                    <a\r\n                        class=\"btn btn-link btn-sm\"\r\n                        [routerLink]=\"['./', { contents: 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    <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\">\r\n                    {{ activeGroup.name }} ({{ membersTotal$ | async }})\r\n                </div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <button type=\"button\" class=\"close-button\" (click)=\"closeMembers()\">\r\n                    <clr-icon shape=\"close\"></clr-icon>\r\n                </button>\r\n            </div>\r\n            <div class=\"controls\">\r\n                <vdr-dropdown>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"btn btn-secondary btn-sm\"\r\n                        vdrDropdownTrigger\r\n                        [disabled]=\"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\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 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}"]
             },] }
@@ -842,7 +844,7 @@ class CustomerGroupMemberListComponent {
 CustomerGroupMemberListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-customer-group-member-list',
-                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]=\"('UpdateCustomer' | 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",
+                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",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
@@ -921,7 +923,7 @@ class CustomerHistoryComponent {
 CustomerHistoryComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-customer-history',
-                template: "<h4>{{ 'customer.customer-history' | translate }}</h4>\r\n<div class=\"entry-list\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\">\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]=\"!('UpdateOrder' | 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]=\"!('UpdateOrder' | 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",
+                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",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 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)}"]
             },] }