@vendure/admin-ui 2.1.0 → 2.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/catalog/catalog.module.d.ts +0 -2
  2. package/catalog/components/product-detail/product-detail.component.d.ts +2 -3
  3. package/catalog/components/product-variant-list/product-variant-list.component.d.ts +3 -2
  4. package/core/common/version.d.ts +1 -1
  5. package/core/components/app-shell/app-shell.component.d.ts +5 -3
  6. package/core/components/notification/notification.component.d.ts +10 -2
  7. package/core/extension/register-route-component.d.ts +1 -1
  8. package/core/providers/alerts/alerts.service.d.ts +6 -1
  9. package/core/providers/localization/localization.service.d.ts +21 -0
  10. package/core/public_api.d.ts +1 -0
  11. package/core/shared/components/data-table-2/data-table-custom-component.service.d.ts +1 -1
  12. package/core/shared/components/dropdown/dropdown-menu.component.d.ts +4 -1
  13. package/core/shared/components/extension-host/extension-host.component.d.ts +1 -1
  14. package/core/shared/components/modal-dialog/modal-dialog.component.d.ts +10 -2
  15. package/core/shared/components/order-state-label/order-state-label.component.d.ts +1 -1
  16. package/core/shared/dynamic-form-inputs/customer-group-form-input/customer-group-form-input.component.d.ts +1 -1
  17. package/core/shared/dynamic-form-inputs/default-form-inputs.d.ts +1 -1
  18. package/core/shared/shared.module.d.ts +100 -101
  19. package/esm2022/catalog/catalog.module.mjs +2 -28
  20. package/esm2022/catalog/components/product-detail/product-detail.component.mjs +20 -17
  21. package/esm2022/catalog/components/product-variant-list/product-variant-list.component.mjs +5 -3
  22. package/esm2022/core/common/generated-types.mjs +1 -1
  23. package/esm2022/core/common/version.mjs +2 -2
  24. package/esm2022/core/components/app-shell/app-shell.component.mjs +21 -21
  25. package/esm2022/core/components/notification/notification.component.mjs +18 -9
  26. package/esm2022/core/components/theme-switcher/theme-switcher.component.mjs +2 -2
  27. package/esm2022/core/core.module.mjs +3 -1
  28. package/esm2022/core/extension/register-route-component.mjs +10 -2
  29. package/esm2022/core/providers/alerts/alerts.service.mjs +22 -8
  30. package/esm2022/core/providers/localization/localization.service.mjs +31 -0
  31. package/esm2022/core/public_api.mjs +2 -1
  32. package/esm2022/core/shared/components/data-table-2/data-table-custom-component.service.mjs +1 -1
  33. package/esm2022/core/shared/components/dropdown/dropdown-menu.component.mjs +31 -23
  34. package/esm2022/core/shared/components/extension-host/extension-host.component.mjs +4 -3
  35. package/esm2022/core/shared/components/modal-dialog/modal-dialog.component.mjs +19 -10
  36. package/esm2022/core/shared/components/product-multi-selector-dialog/product-multi-selector-dialog.component.mjs +3 -3
  37. package/esm2022/core/shared/components/radio-card/radio-card-fieldset.component.mjs +2 -2
  38. package/esm2022/core/shared/components/tabbed-custom-fields/tabbed-custom-fields.component.mjs +2 -2
  39. package/esm2022/core/shared/dynamic-form-inputs/code-editor-form-input/base-code-editor-form-input.component.mjs +6 -1
  40. package/esm2022/core/shared/dynamic-form-inputs/customer-group-form-input/customer-group-form-input.component.mjs +5 -3
  41. package/esm2022/core/shared/shared.module.mjs +1 -5
  42. package/esm2022/customer/components/customer-detail/customer-detail.component.mjs +3 -3
  43. package/esm2022/login/components/login/login.component.mjs +12 -7
  44. package/esm2022/react/react-hooks/use-query.mjs +2 -2
  45. package/esm2022/react/register-react-data-table-component.mjs +3 -3
  46. package/fesm2022/vendure-admin-ui-catalog.mjs +16 -37
  47. package/fesm2022/vendure-admin-ui-catalog.mjs.map +1 -1
  48. package/fesm2022/vendure-admin-ui-core.mjs +370 -299
  49. package/fesm2022/vendure-admin-ui-core.mjs.map +1 -1
  50. package/fesm2022/vendure-admin-ui-customer.mjs +2 -2
  51. package/fesm2022/vendure-admin-ui-customer.mjs.map +1 -1
  52. package/fesm2022/vendure-admin-ui-login.mjs +11 -6
  53. package/fesm2022/vendure-admin-ui-login.mjs.map +1 -1
  54. package/fesm2022/vendure-admin-ui-react.mjs +3 -3
  55. package/fesm2022/vendure-admin-ui-react.mjs.map +1 -1
  56. package/login/components/login/login.component.d.ts +7 -3
  57. package/package.json +18 -18
  58. package/react/react-hooks/use-query.d.ts +8 -0
  59. package/react/register-react-data-table-component.d.ts +4 -4
  60. package/static/i18n-messages/hr.json +795 -0
  61. package/static/i18n-messages/it.json +32 -32
  62. package/static/i18n-messages/ne.json +100 -100
  63. package/static/styles/global/_overrides.scss +4 -0
  64. package/static/styles/global/_utilities.scss +6 -6
  65. package/static/theme.min.css +1 -1
  66. package/static/vendure-ui-config.json +2 -1
package/fesm2022/vendure-admin-ui-customer.mjs CHANGED
@@ -825,11 +825,11 @@ class CustomerDetailComponent extends TypedBaseDetailComponent {
825
825
  }).single$;
826
826
  }
827
827
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CustomerDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.FormBuilder }, { token: i1.DataService }, { token: i1.ModalService }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
828
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CustomerDetailComponent, selector: "vdr-customer-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n <vdr-action-bar>\r\n <vdr-ab-left> </vdr-ab-left>\r\n\r\n <vdr-ab-right>\r\n <vdr-action-bar-items locationId=\"customer-detail\"></vdr-action-bar-items>\r\n <button\r\n class=\"btn btn-primary\"\r\n *ngIf=\"isNew$ | async; else updateButton\"\r\n (click)=\"create()\"\r\n [disabled]=\"!(addressDefaultsUpdated || (detailForm.valid && detailForm.dirty))\"\r\n >\r\n {{ 'common.create' | translate }}\r\n </button>\r\n <ng-template #updateButton>\r\n <button\r\n *vdrIfPermissions=\"'UpdateCustomer'\"\r\n class=\"btn btn-primary\"\r\n (click)=\"save()\"\r\n [disabled]=\"!(addressDefaultsUpdated || (detailForm.valid && detailForm.dirty))\"\r\n >\r\n {{ 'common.update' | translate }}\r\n </button>\r\n </ng-template>\r\n </vdr-ab-right>\r\n </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar>\r\n <vdr-card *ngIf=\"entity$ | async as customer\">\r\n <vdr-customer-status-label [customer]=\"customer\"></vdr-customer-status-label>\r\n <vdr-labeled-data\r\n class=\"last-login\"\r\n *ngIf=\"customer.user?.lastLogin as lastLogin\"\r\n [label]=\"'customer.last-login' | translate\"\r\n >\r\n <time [dateTime]=\"lastLogin\">{{ lastLogin | timeAgo }}</time>\r\n </vdr-labeled-data>\r\n </vdr-card>\r\n <vdr-card\r\n [title]=\"'customer.customer-groups' | translate\"\r\n *ngIf=\"(entity$ | async)?.groups as groups\"\r\n >\r\n <div *ngIf=\"groups.length; else noGroups\">\r\n <vdr-chip\r\n *ngFor=\"let group of groups\"\r\n [colorFrom]=\"group.id\"\r\n icon=\"times\"\r\n (iconClick)=\"removeFromGroup(group)\"\r\n >{{ group.name }}</vdr-chip\r\n >\r\n </div>\r\n <ng-template #noGroups>\r\n <span class=\"color-weight-400\">\r\n {{ 'customer.not-a-member-of-any-groups' | translate }}\r\n </span>\r\n </ng-template>\r\n <div>\r\n <button\r\n class=\"button-small mt-1\"\r\n (click)=\"addToGroup()\"\r\n *vdrIfPermissions=\"'UpdateCustomerGroup'\"\r\n >\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'customer.add-customer-to-group' | translate }}\r\n </button>\r\n </div>\r\n </vdr-card>\r\n <vdr-card>\r\n <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n <vdr-page-block>\r\n <form class=\"form\" [formGroup]=\"detailForm.get('customer')\">\r\n <vdr-card>\r\n <div class=\"form-grid\">\r\n <vdr-form-field\r\n [label]=\"'customer.title' | translate\"\r\n for=\"title\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n </vdr-form-field>\r\n <div><!-- spacer --></div>\r\n <vdr-form-field\r\n [label]=\"'customer.first-name' | translate\"\r\n for=\"firstName\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'customer.last-name' | translate\"\r\n for=\"lastName\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'customer.email-address' | translate\"\r\n for=\"emailAddress\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'customer.phone-number' | translate\"\r\n for=\"phoneNumber\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'customer.password' | translate\"\r\n for=\"password\"\r\n *ngIf=\"isNew$ | async\"\r\n >\r\n <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n </vdr-form-field>\r\n </div>\r\n </vdr-card>\r\n <vdr-card\r\n formGroupName=\"customFields\"\r\n *ngIf=\"customFields.length\"\r\n [title]=\"'common.custom-fields' | translate\"\r\n >\r\n <vdr-tabbed-custom-fields\r\n entityName=\"Customer\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"detailForm.get('customer.customFields')\"\r\n ></vdr-tabbed-custom-fields>\r\n </vdr-card>\r\n </form>\r\n <vdr-custom-detail-component-host\r\n locationId=\"customer-detail\"\r\n [entity$]=\"entity$\"\r\n [detailForm]=\"detailForm\"\r\n ></vdr-custom-detail-component-host>\r\n <ng-container *ngIf=\"!(isNew$ | async)\">\r\n <vdr-card [title]=\"'customer.addresses' | translate\">\r\n <vdr-address-card\r\n *ngFor=\"let addressForm of getAddressFormControls()\"\r\n [class.to-delete]=\"addressesToDeleteIds.has(addressForm.value.id)\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [isDefaultBilling]=\"defaultBillingAddressId === addressForm.value.id\"\r\n [isDefaultShipping]=\"defaultShippingAddressId === addressForm.value.id\"\r\n [addressForm]=\"addressForm\"\r\n [customFields]=\"addressCustomFields\"\r\n [editable]=\"\r\n (['UpdateCustomer'] | hasPermission) &&\r\n !addressesToDeleteIds.has(addressForm.value.id)\r\n \"\r\n (setAsDefaultBilling)=\"setDefaultBillingAddressId($event)\"\r\n (setAsDefaultShipping)=\"setDefaultShippingAddressId($event)\"\r\n (deleteAddress)=\"toggleDeleteAddress($event)\"\r\n ></vdr-address-card>\r\n <button class=\"btn btn-secondary mt-2\" (click)=\"addAddress()\" *vdrIfPermissions=\"'UpdateCustomer'\">\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'customer.create-new-address' | translate }}\r\n </button>\r\n </vdr-card>\r\n <vdr-card [title]=\"'customer.orders' | translate\" [paddingX]=\"false\">\r\n <vdr-data-table-2\r\n id=\"customer-order-list\"\r\n [items]=\"orders$ | async\"\r\n [itemsPerPage]=\"ordersPerPage\"\r\n [totalItems]=\"ordersCount$ | async\"\r\n [currentPage]=\"currentOrdersPage\"\r\n [emptyStateLabel]=\"'customer.no-orders-placed' | translate\"\r\n (itemsPerPageChange)=\"setOrderItemsPerPage($event)\"\r\n (pageChange)=\"setOrderCurrentPage($event)\"\r\n >\r\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n <ng-template let-order=\"item\">\r\n {{ order.id }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n <ng-template let-order=\"item\">\r\n {{ order.createdAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\">\r\n <ng-template let-order=\"item\">\r\n <a class=\"button-ghost\" [routerLink]=\"['/orders', order.id]\"\r\n ><span>{{ order.code }}</span>\r\n <clr-icon shape=\"arrow right\"></clr-icon>\r\n </a>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.order-type' | translate\" id=\"order-type\" [hiddenByDefault]=\"true\">\r\n <ng-template let-order=\"item\">\r\n <vdr-chip>{{ order.type }}</vdr-chip>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\">\r\n <ng-template let-order=\"item\">\r\n <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.total' | translate\" id=\"total\">\r\n <ng-template let-order=\"item\">\r\n {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\">\r\n <ng-template let-order=\"item\">\r\n {{ order.updatedAt | timeAgo }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.placed-at' | translate\" id=\"placed-at\">\r\n <ng-template let-order=\"item\">\r\n {{ order.orderPlacedAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-custom-field-column\r\n *ngFor=\"let customField of customFields\"\r\n [customField]=\"customField\"\r\n />\r\n </vdr-data-table-2>\r\n </vdr-card>\r\n <vdr-card [title]=\"'customer.customer-history' | translate\">\r\n <vdr-customer-history\r\n [customer]=\"entity$ | async\"\r\n [history]=\"history$ | async\"\r\n (addNote)=\"addNoteToCustomer($event)\"\r\n (updateNote)=\"updateNote($event)\"\r\n (deleteNote)=\"deleteNote($event)\"\r\n ></vdr-customer-history>\r\n </vdr-card>\r\n </ng-container>\r\n </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".last-login{margin-inline-start:6px;color:var(--color-grey-500)}.to-delete{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: CustomerStatusLabelComponent, selector: "vdr-customer-status-label", inputs: ["customer"] }, { kind: "component", type: AddressCardComponent, selector: "vdr-address-card", inputs: ["addressForm", "customFields", "availableCountries", "isDefaultBilling", "isDefaultShipping", "editable"], outputs: ["setAsDefaultShipping", "setAsDefaultBilling", "deleteAddress"] }, { kind: "component", type: CustomerHistoryComponent, selector: "vdr-customer-history", inputs: ["customer", "history"], outputs: ["addNote", "updateNote", "deleteNote"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
828
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CustomerDetailComponent, selector: "vdr-customer-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n <vdr-action-bar>\r\n <vdr-ab-left> </vdr-ab-left>\r\n\r\n <vdr-ab-right>\r\n <vdr-action-bar-items locationId=\"customer-detail\"></vdr-action-bar-items>\r\n <button\r\n class=\"btn btn-primary\"\r\n *ngIf=\"isNew$ | async; else updateButton\"\r\n (click)=\"create()\"\r\n [disabled]=\"!(addressDefaultsUpdated || (detailForm.valid && detailForm.dirty))\"\r\n >\r\n {{ 'common.create' | translate }}\r\n </button>\r\n <ng-template #updateButton>\r\n <button\r\n *vdrIfPermissions=\"'UpdateCustomer'\"\r\n class=\"btn btn-primary\"\r\n (click)=\"save()\"\r\n [disabled]=\"!(addressDefaultsUpdated || (detailForm.valid && detailForm.dirty))\"\r\n >\r\n {{ 'common.update' | translate }}\r\n </button>\r\n </ng-template>\r\n </vdr-ab-right>\r\n </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar>\r\n <vdr-card *ngIf=\"entity$ | async as customer\">\r\n <vdr-customer-status-label [customer]=\"customer\"></vdr-customer-status-label>\r\n <vdr-labeled-data\r\n class=\"last-login\"\r\n *ngIf=\"customer.user?.lastLogin as lastLogin\"\r\n [label]=\"'customer.last-login' | translate\"\r\n >\r\n <time [dateTime]=\"lastLogin\">{{ lastLogin | timeAgo }}</time>\r\n </vdr-labeled-data>\r\n </vdr-card>\r\n <vdr-card\r\n [title]=\"'customer.customer-groups' | translate\"\r\n *ngIf=\"(entity$ | async)?.groups as groups\"\r\n >\r\n <div *ngIf=\"groups.length; else noGroups\">\r\n <vdr-chip\r\n *ngFor=\"let group of groups\"\r\n [colorFrom]=\"group.id\"\r\n icon=\"times\"\r\n (iconClick)=\"removeFromGroup(group)\"\r\n >{{ group.name }}</vdr-chip\r\n >\r\n </div>\r\n <ng-template #noGroups>\r\n <span class=\"color-weight-400\">\r\n {{ 'customer.not-a-member-of-any-groups' | translate }}\r\n </span>\r\n </ng-template>\r\n <div>\r\n <button\r\n class=\"button-small mt-1\"\r\n (click)=\"addToGroup()\"\r\n *vdrIfPermissions=\"'UpdateCustomerGroup'\"\r\n >\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'customer.add-customer-to-group' | translate }}\r\n </button>\r\n </div>\r\n </vdr-card>\r\n <vdr-card>\r\n <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n <vdr-page-block>\r\n <form class=\"form\" [formGroup]=\"detailForm.get('customer')\">\r\n <vdr-card>\r\n <div class=\"form-grid\">\r\n <vdr-form-field\r\n [label]=\"'customer.title' | translate\"\r\n for=\"title\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n </vdr-form-field>\r\n <div><!-- spacer --></div>\r\n <vdr-form-field\r\n [label]=\"'customer.first-name' | translate\"\r\n for=\"firstName\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'customer.last-name' | translate\"\r\n for=\"lastName\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'customer.email-address' | translate\"\r\n for=\"emailAddress\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'customer.phone-number' | translate\"\r\n for=\"phoneNumber\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'customer.password' | translate\"\r\n for=\"password\"\r\n *ngIf=\"isNew$ | async\"\r\n >\r\n <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n </vdr-form-field>\r\n </div>\r\n </vdr-card>\r\n <vdr-card\r\n formGroupName=\"customFields\"\r\n *ngIf=\"customFields.length\"\r\n [title]=\"'common.custom-fields' | translate\"\r\n >\r\n <vdr-tabbed-custom-fields\r\n entityName=\"Customer\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"detailForm.get('customer.customFields')\"\r\n ></vdr-tabbed-custom-fields>\r\n </vdr-card>\r\n </form>\r\n <vdr-custom-detail-component-host\r\n locationId=\"customer-detail\"\r\n [entity$]=\"entity$\"\r\n [detailForm]=\"detailForm\"\r\n ></vdr-custom-detail-component-host>\r\n <ng-container *ngIf=\"!(isNew$ | async)\">\r\n <vdr-card [title]=\"'customer.addresses' | translate\">\r\n <div class=\"form-grid\">\r\n <vdr-address-card\r\n *ngFor=\"let addressForm of getAddressFormControls()\"\r\n [class.to-delete]=\"addressesToDeleteIds.has(addressForm.value.id)\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [isDefaultBilling]=\"defaultBillingAddressId === addressForm.value.id\"\r\n [isDefaultShipping]=\"defaultShippingAddressId === addressForm.value.id\"\r\n [addressForm]=\"addressForm\"\r\n [customFields]=\"addressCustomFields\"\r\n [editable]=\"\r\n (['UpdateCustomer'] | hasPermission) &&\r\n !addressesToDeleteIds.has(addressForm.value.id)\r\n \"\r\n (setAsDefaultBilling)=\"setDefaultBillingAddressId($event)\"\r\n (setAsDefaultShipping)=\"setDefaultShippingAddressId($event)\"\r\n (deleteAddress)=\"toggleDeleteAddress($event)\"\r\n ></vdr-address-card>\r\n </div>\r\n <button\r\n class=\"btn btn-secondary mt-2\"\r\n (click)=\"addAddress()\"\r\n *vdrIfPermissions=\"'UpdateCustomer'\"\r\n >\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'customer.create-new-address' | translate }}\r\n </button>\r\n </vdr-card>\r\n <vdr-card [title]=\"'customer.orders' | translate\" [paddingX]=\"false\">\r\n <vdr-data-table-2\r\n id=\"customer-order-list\"\r\n [items]=\"orders$ | async\"\r\n [itemsPerPage]=\"ordersPerPage\"\r\n [totalItems]=\"ordersCount$ | async\"\r\n [currentPage]=\"currentOrdersPage\"\r\n [emptyStateLabel]=\"'customer.no-orders-placed' | translate\"\r\n (itemsPerPageChange)=\"setOrderItemsPerPage($event)\"\r\n (pageChange)=\"setOrderCurrentPage($event)\"\r\n >\r\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n <ng-template let-order=\"item\">\r\n {{ order.id }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column\r\n [heading]=\"'common.created-at' | translate\"\r\n id=\"created-at\"\r\n [hiddenByDefault]=\"true\"\r\n >\r\n <ng-template let-order=\"item\">\r\n {{ order.createdAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\">\r\n <ng-template let-order=\"item\">\r\n <a class=\"button-ghost\" [routerLink]=\"['/orders', order.id]\"\r\n ><span>{{ order.code }}</span>\r\n <clr-icon shape=\"arrow right\"></clr-icon>\r\n </a>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column\r\n [heading]=\"'order.order-type' | translate\"\r\n id=\"order-type\"\r\n [hiddenByDefault]=\"true\"\r\n >\r\n <ng-template let-order=\"item\">\r\n <vdr-chip>{{ order.type }}</vdr-chip>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\">\r\n <ng-template let-order=\"item\">\r\n <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.total' | translate\" id=\"total\">\r\n <ng-template let-order=\"item\">\r\n {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\">\r\n <ng-template let-order=\"item\">\r\n {{ order.updatedAt | timeAgo }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.placed-at' | translate\" id=\"placed-at\">\r\n <ng-template let-order=\"item\">\r\n {{ order.orderPlacedAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-custom-field-column\r\n *ngFor=\"let customField of customFields\"\r\n [customField]=\"customField\"\r\n />\r\n </vdr-data-table-2>\r\n </vdr-card>\r\n <vdr-card [title]=\"'customer.customer-history' | translate\">\r\n <vdr-customer-history\r\n [customer]=\"entity$ | async\"\r\n [history]=\"history$ | async\"\r\n (addNote)=\"addNoteToCustomer($event)\"\r\n (updateNote)=\"updateNote($event)\"\r\n (deleteNote)=\"deleteNote($event)\"\r\n ></vdr-customer-history>\r\n </vdr-card>\r\n </ng-container>\r\n </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".last-login{margin-inline-start:6px;color:var(--color-grey-500)}.to-delete{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: CustomerStatusLabelComponent, selector: "vdr-customer-status-label", inputs: ["customer"] }, { kind: "component", type: AddressCardComponent, selector: "vdr-address-card", inputs: ["addressForm", "customFields", "availableCountries", "isDefaultBilling", "isDefaultShipping", "editable"], outputs: ["setAsDefaultShipping", "setAsDefaultBilling", "deleteAddress"] }, { kind: "component", type: CustomerHistoryComponent, selector: "vdr-customer-history", inputs: ["customer", "history"], outputs: ["addNote", "updateNote", "deleteNote"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
829
829
  }
830
830
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CustomerDetailComponent, decorators: [{
831
831
  type: Component,
832
- args: [{ selector: 'vdr-customer-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n <vdr-action-bar>\r\n <vdr-ab-left> </vdr-ab-left>\r\n\r\n <vdr-ab-right>\r\n <vdr-action-bar-items locationId=\"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</vdr-page-block>\r\n<vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar>\r\n <vdr-card *ngIf=\"entity$ | async as customer\">\r\n <vdr-customer-status-label [customer]=\"customer\"></vdr-customer-status-label>\r\n <vdr-labeled-data\r\n class=\"last-login\"\r\n *ngIf=\"customer.user?.lastLogin as lastLogin\"\r\n [label]=\"'customer.last-login' | translate\"\r\n >\r\n <time [dateTime]=\"lastLogin\">{{ lastLogin | timeAgo }}</time>\r\n </vdr-labeled-data>\r\n </vdr-card>\r\n <vdr-card\r\n [title]=\"'customer.customer-groups' | translate\"\r\n *ngIf=\"(entity$ | async)?.groups as groups\"\r\n >\r\n <div *ngIf=\"groups.length; else noGroups\">\r\n <vdr-chip\r\n *ngFor=\"let group of groups\"\r\n [colorFrom]=\"group.id\"\r\n icon=\"times\"\r\n (iconClick)=\"removeFromGroup(group)\"\r\n >{{ group.name }}</vdr-chip\r\n >\r\n </div>\r\n <ng-template #noGroups>\r\n <span class=\"color-weight-400\">\r\n {{ 'customer.not-a-member-of-any-groups' | translate }}\r\n </span>\r\n </ng-template>\r\n <div>\r\n <button\r\n class=\"button-small mt-1\"\r\n (click)=\"addToGroup()\"\r\n *vdrIfPermissions=\"'UpdateCustomerGroup'\"\r\n >\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'customer.add-customer-to-group' | translate }}\r\n </button>\r\n </div>\r\n </vdr-card>\r\n <vdr-card>\r\n <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n <vdr-page-block>\r\n <form class=\"form\" [formGroup]=\"detailForm.get('customer')\">\r\n <vdr-card>\r\n <div class=\"form-grid\">\r\n <vdr-form-field\r\n [label]=\"'customer.title' | translate\"\r\n for=\"title\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n </vdr-form-field>\r\n <div><!-- spacer --></div>\r\n <vdr-form-field\r\n [label]=\"'customer.first-name' | translate\"\r\n for=\"firstName\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'customer.last-name' | translate\"\r\n for=\"lastName\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'customer.email-address' | translate\"\r\n for=\"emailAddress\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'customer.phone-number' | translate\"\r\n for=\"phoneNumber\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'customer.password' | translate\"\r\n for=\"password\"\r\n *ngIf=\"isNew$ | async\"\r\n >\r\n <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n </vdr-form-field>\r\n </div>\r\n </vdr-card>\r\n <vdr-card\r\n formGroupName=\"customFields\"\r\n *ngIf=\"customFields.length\"\r\n [title]=\"'common.custom-fields' | translate\"\r\n >\r\n <vdr-tabbed-custom-fields\r\n entityName=\"Customer\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"detailForm.get('customer.customFields')\"\r\n ></vdr-tabbed-custom-fields>\r\n </vdr-card>\r\n </form>\r\n <vdr-custom-detail-component-host\r\n locationId=\"customer-detail\"\r\n [entity$]=\"entity$\"\r\n [detailForm]=\"detailForm\"\r\n ></vdr-custom-detail-component-host>\r\n <ng-container *ngIf=\"!(isNew$ | async)\">\r\n <vdr-card [title]=\"'customer.addresses' | translate\">\r\n <vdr-address-card\r\n *ngFor=\"let addressForm of getAddressFormControls()\"\r\n [class.to-delete]=\"addressesToDeleteIds.has(addressForm.value.id)\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [isDefaultBilling]=\"defaultBillingAddressId === addressForm.value.id\"\r\n [isDefaultShipping]=\"defaultShippingAddressId === addressForm.value.id\"\r\n [addressForm]=\"addressForm\"\r\n [customFields]=\"addressCustomFields\"\r\n [editable]=\"\r\n (['UpdateCustomer'] | hasPermission) &&\r\n !addressesToDeleteIds.has(addressForm.value.id)\r\n \"\r\n (setAsDefaultBilling)=\"setDefaultBillingAddressId($event)\"\r\n (setAsDefaultShipping)=\"setDefaultShippingAddressId($event)\"\r\n (deleteAddress)=\"toggleDeleteAddress($event)\"\r\n ></vdr-address-card>\r\n <button class=\"btn btn-secondary mt-2\" (click)=\"addAddress()\" *vdrIfPermissions=\"'UpdateCustomer'\">\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'customer.create-new-address' | translate }}\r\n </button>\r\n </vdr-card>\r\n <vdr-card [title]=\"'customer.orders' | translate\" [paddingX]=\"false\">\r\n <vdr-data-table-2\r\n id=\"customer-order-list\"\r\n [items]=\"orders$ | async\"\r\n [itemsPerPage]=\"ordersPerPage\"\r\n [totalItems]=\"ordersCount$ | async\"\r\n [currentPage]=\"currentOrdersPage\"\r\n [emptyStateLabel]=\"'customer.no-orders-placed' | translate\"\r\n (itemsPerPageChange)=\"setOrderItemsPerPage($event)\"\r\n (pageChange)=\"setOrderCurrentPage($event)\"\r\n >\r\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n <ng-template let-order=\"item\">\r\n {{ order.id }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n <ng-template let-order=\"item\">\r\n {{ order.createdAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\">\r\n <ng-template let-order=\"item\">\r\n <a class=\"button-ghost\" [routerLink]=\"['/orders', order.id]\"\r\n ><span>{{ order.code }}</span>\r\n <clr-icon shape=\"arrow right\"></clr-icon>\r\n </a>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.order-type' | translate\" id=\"order-type\" [hiddenByDefault]=\"true\">\r\n <ng-template let-order=\"item\">\r\n <vdr-chip>{{ order.type }}</vdr-chip>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\">\r\n <ng-template let-order=\"item\">\r\n <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.total' | translate\" id=\"total\">\r\n <ng-template let-order=\"item\">\r\n {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\">\r\n <ng-template let-order=\"item\">\r\n {{ order.updatedAt | timeAgo }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.placed-at' | translate\" id=\"placed-at\">\r\n <ng-template let-order=\"item\">\r\n {{ order.orderPlacedAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-custom-field-column\r\n *ngFor=\"let customField of customFields\"\r\n [customField]=\"customField\"\r\n />\r\n </vdr-data-table-2>\r\n </vdr-card>\r\n <vdr-card [title]=\"'customer.customer-history' | translate\">\r\n <vdr-customer-history\r\n [customer]=\"entity$ | async\"\r\n [history]=\"history$ | async\"\r\n (addNote)=\"addNoteToCustomer($event)\"\r\n (updateNote)=\"updateNote($event)\"\r\n (deleteNote)=\"deleteNote($event)\"\r\n ></vdr-customer-history>\r\n </vdr-card>\r\n </ng-container>\r\n </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".last-login{margin-inline-start:6px;color:var(--color-grey-500)}.to-delete{opacity:.5}\n"] }]
832
+ args: [{ selector: 'vdr-customer-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n <vdr-action-bar>\r\n <vdr-ab-left> </vdr-ab-left>\r\n\r\n <vdr-ab-right>\r\n <vdr-action-bar-items locationId=\"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</vdr-page-block>\r\n<vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar>\r\n <vdr-card *ngIf=\"entity$ | async as customer\">\r\n <vdr-customer-status-label [customer]=\"customer\"></vdr-customer-status-label>\r\n <vdr-labeled-data\r\n class=\"last-login\"\r\n *ngIf=\"customer.user?.lastLogin as lastLogin\"\r\n [label]=\"'customer.last-login' | translate\"\r\n >\r\n <time [dateTime]=\"lastLogin\">{{ lastLogin | timeAgo }}</time>\r\n </vdr-labeled-data>\r\n </vdr-card>\r\n <vdr-card\r\n [title]=\"'customer.customer-groups' | translate\"\r\n *ngIf=\"(entity$ | async)?.groups as groups\"\r\n >\r\n <div *ngIf=\"groups.length; else noGroups\">\r\n <vdr-chip\r\n *ngFor=\"let group of groups\"\r\n [colorFrom]=\"group.id\"\r\n icon=\"times\"\r\n (iconClick)=\"removeFromGroup(group)\"\r\n >{{ group.name }}</vdr-chip\r\n >\r\n </div>\r\n <ng-template #noGroups>\r\n <span class=\"color-weight-400\">\r\n {{ 'customer.not-a-member-of-any-groups' | translate }}\r\n </span>\r\n </ng-template>\r\n <div>\r\n <button\r\n class=\"button-small mt-1\"\r\n (click)=\"addToGroup()\"\r\n *vdrIfPermissions=\"'UpdateCustomerGroup'\"\r\n >\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'customer.add-customer-to-group' | translate }}\r\n </button>\r\n </div>\r\n </vdr-card>\r\n <vdr-card>\r\n <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n <vdr-page-block>\r\n <form class=\"form\" [formGroup]=\"detailForm.get('customer')\">\r\n <vdr-card>\r\n <div class=\"form-grid\">\r\n <vdr-form-field\r\n [label]=\"'customer.title' | translate\"\r\n for=\"title\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n </vdr-form-field>\r\n <div><!-- spacer --></div>\r\n <vdr-form-field\r\n [label]=\"'customer.first-name' | translate\"\r\n for=\"firstName\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'customer.last-name' | translate\"\r\n for=\"lastName\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'customer.email-address' | translate\"\r\n for=\"emailAddress\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'customer.phone-number' | translate\"\r\n for=\"phoneNumber\"\r\n [readOnlyToggle]=\"!(isNew$ | async)\"\r\n >\r\n <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'customer.password' | translate\"\r\n for=\"password\"\r\n *ngIf=\"isNew$ | async\"\r\n >\r\n <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n </vdr-form-field>\r\n </div>\r\n </vdr-card>\r\n <vdr-card\r\n formGroupName=\"customFields\"\r\n *ngIf=\"customFields.length\"\r\n [title]=\"'common.custom-fields' | translate\"\r\n >\r\n <vdr-tabbed-custom-fields\r\n entityName=\"Customer\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"detailForm.get('customer.customFields')\"\r\n ></vdr-tabbed-custom-fields>\r\n </vdr-card>\r\n </form>\r\n <vdr-custom-detail-component-host\r\n locationId=\"customer-detail\"\r\n [entity$]=\"entity$\"\r\n [detailForm]=\"detailForm\"\r\n ></vdr-custom-detail-component-host>\r\n <ng-container *ngIf=\"!(isNew$ | async)\">\r\n <vdr-card [title]=\"'customer.addresses' | translate\">\r\n <div class=\"form-grid\">\r\n <vdr-address-card\r\n *ngFor=\"let addressForm of getAddressFormControls()\"\r\n [class.to-delete]=\"addressesToDeleteIds.has(addressForm.value.id)\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [isDefaultBilling]=\"defaultBillingAddressId === addressForm.value.id\"\r\n [isDefaultShipping]=\"defaultShippingAddressId === addressForm.value.id\"\r\n [addressForm]=\"addressForm\"\r\n [customFields]=\"addressCustomFields\"\r\n [editable]=\"\r\n (['UpdateCustomer'] | hasPermission) &&\r\n !addressesToDeleteIds.has(addressForm.value.id)\r\n \"\r\n (setAsDefaultBilling)=\"setDefaultBillingAddressId($event)\"\r\n (setAsDefaultShipping)=\"setDefaultShippingAddressId($event)\"\r\n (deleteAddress)=\"toggleDeleteAddress($event)\"\r\n ></vdr-address-card>\r\n </div>\r\n <button\r\n class=\"btn btn-secondary mt-2\"\r\n (click)=\"addAddress()\"\r\n *vdrIfPermissions=\"'UpdateCustomer'\"\r\n >\r\n <clr-icon shape=\"plus\"></clr-icon>\r\n {{ 'customer.create-new-address' | translate }}\r\n </button>\r\n </vdr-card>\r\n <vdr-card [title]=\"'customer.orders' | translate\" [paddingX]=\"false\">\r\n <vdr-data-table-2\r\n id=\"customer-order-list\"\r\n [items]=\"orders$ | async\"\r\n [itemsPerPage]=\"ordersPerPage\"\r\n [totalItems]=\"ordersCount$ | async\"\r\n [currentPage]=\"currentOrdersPage\"\r\n [emptyStateLabel]=\"'customer.no-orders-placed' | translate\"\r\n (itemsPerPageChange)=\"setOrderItemsPerPage($event)\"\r\n (pageChange)=\"setOrderCurrentPage($event)\"\r\n >\r\n <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n <ng-template let-order=\"item\">\r\n {{ order.id }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column\r\n [heading]=\"'common.created-at' | translate\"\r\n id=\"created-at\"\r\n [hiddenByDefault]=\"true\"\r\n >\r\n <ng-template let-order=\"item\">\r\n {{ order.createdAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\">\r\n <ng-template let-order=\"item\">\r\n <a class=\"button-ghost\" [routerLink]=\"['/orders', order.id]\"\r\n ><span>{{ order.code }}</span>\r\n <clr-icon shape=\"arrow right\"></clr-icon>\r\n </a>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column\r\n [heading]=\"'order.order-type' | translate\"\r\n id=\"order-type\"\r\n [hiddenByDefault]=\"true\"\r\n >\r\n <ng-template let-order=\"item\">\r\n <vdr-chip>{{ order.type }}</vdr-chip>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\">\r\n <ng-template let-order=\"item\">\r\n <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.total' | translate\" id=\"total\">\r\n <ng-template let-order=\"item\">\r\n {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\">\r\n <ng-template let-order=\"item\">\r\n {{ order.updatedAt | timeAgo }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.placed-at' | translate\" id=\"placed-at\">\r\n <ng-template let-order=\"item\">\r\n {{ order.orderPlacedAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-custom-field-column\r\n *ngFor=\"let customField of customFields\"\r\n [customField]=\"customField\"\r\n />\r\n </vdr-data-table-2>\r\n </vdr-card>\r\n <vdr-card [title]=\"'customer.customer-history' | translate\">\r\n <vdr-customer-history\r\n [customer]=\"entity$ | async\"\r\n [history]=\"history$ | async\"\r\n (addNote)=\"addNoteToCustomer($event)\"\r\n (updateNote)=\"updateNote($event)\"\r\n (deleteNote)=\"deleteNote($event)\"\r\n ></vdr-customer-history>\r\n </vdr-card>\r\n </ng-container>\r\n </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".last-login{margin-inline-start:6px;color:var(--color-grey-500)}.to-delete{opacity:.5}\n"] }]
833
833
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }, { type: i1.DataService }, { type: i1.ModalService }, { type: i1.NotificationService }]; } });
834
834
 
835
835
  const CUSTOMER_GROUP_DETAIL_QUERY = gql `