npm - @vendure/admin-ui - Versions diffs - 3.1.4 → 3.1.6 - Mend

@vendure/admin-ui 3.1.4 → 3.1.6

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 (50) hide show

package/esm2022/customer/components/customer-detail/customer-detail.component.mjs CHANGED Viewed

@@ -432,7 +432,7 @@ export class CustomerDetailComponent extends TypedBaseDetailComponent {
         }).single$;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CustomerDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.FormBuilder }, { token: i2.DataService }, { token: i2.ModalService }, { token: i2.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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-action-bar-dropdown-menu locationId=\"customer-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-page-detail-layout>\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card *ngIf=\"entity$ | async as customer\">\r\n            <vdr-customer-status-label [customer]=\"customer\"></vdr-customer-status-label>\r\n            <vdr-labeled-data\r\n                class=\"last-login\"\r\n                *ngIf=\"customer.user?.lastLogin as lastLogin\"\r\n                [label]=\"'customer.last-login' | translate\"\r\n            >\r\n                <time [dateTime]=\"lastLogin\">{{ lastLogin | timeAgo }}</time>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card\r\n            [title]=\"'customer.customer-groups' | translate\"\r\n            *ngIf=\"(entity$ | async)?.groups as groups\"\r\n        >\r\n            <div *ngIf=\"groups.length; else noGroups\">\r\n                <vdr-chip\r\n                    *ngFor=\"let group of groups\"\r\n                    [colorFrom]=\"group.id\"\r\n                    icon=\"times\"\r\n                    (iconClick)=\"removeFromGroup(group)\"\r\n                    >{{ group.name }}</vdr-chip\r\n                >\r\n            </div>\r\n            <ng-template #noGroups>\r\n                <span class=\"color-weight-400\">\r\n                    {{ 'customer.not-a-member-of-any-groups' | translate }}\r\n                </span>\r\n            </ng-template>\r\n            <div>\r\n                <button\r\n                    class=\"button-small mt-1\"\r\n                    (click)=\"addToGroup()\"\r\n                    *vdrIfPermissions=\"'UpdateCustomerGroup'\"\r\n                >\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ 'customer.add-customer-to-group' | translate }}\r\n                </button>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <vdr-page-block>\r\n        <form class=\"form\" [formGroup]=\"detailForm.get('customer')\">\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.title' | translate\"\r\n                        for=\"title\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n                    </vdr-form-field>\r\n                    <div><!-- spacer --></div>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.first-name' | translate\"\r\n                        for=\"firstName\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.last-name' | translate\"\r\n                        for=\"lastName\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.email-address' | translate\"\r\n                        for=\"emailAddress\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.phone-number' | translate\"\r\n                        for=\"phoneNumber\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.password' | translate\"\r\n                        for=\"password\"\r\n                        *ngIf=\"isNew$ | async\"\r\n                    >\r\n                        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Customer\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customer.customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\r\n        </form>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"customer-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n        <ng-container *ngIf=\"!(isNew$ | async)\">\r\n            <vdr-card [title]=\"'customer.addresses' | translate\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-address-card\r\n                        *ngFor=\"let addressForm of getAddressFormControls()\"\r\n                        [class.to-delete]=\"addressesToDeleteIds.has(addressForm.value.id)\"\r\n                        [availableCountries]=\"availableCountries$ | async\"\r\n                        [isDefaultBilling]=\"defaultBillingAddressId === addressForm.value.id\"\r\n                        [isDefaultShipping]=\"defaultShippingAddressId === addressForm.value.id\"\r\n                        [addressForm]=\"addressForm\"\r\n                        [customFields]=\"addressCustomFields\"\r\n                        [editable]=\"\r\n                            (['UpdateCustomer'] | hasPermission) &&\r\n                            !addressesToDeleteIds.has(addressForm.value.id)\r\n                        \"\r\n                        (setAsDefaultBilling)=\"setDefaultBillingAddressId($event)\"\r\n                        (setAsDefaultShipping)=\"setDefaultShippingAddressId($event)\"\r\n                        (deleteAddress)=\"toggleDeleteAddress($event)\"\r\n                    ></vdr-address-card>\r\n                </div>\r\n                <button\r\n                    class=\"btn btn-secondary mt-2\"\r\n                    (click)=\"addAddress()\"\r\n                    *vdrIfPermissions=\"'UpdateCustomer'\"\r\n                >\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ 'customer.create-new-address' | translate }}\r\n                </button>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'customer.orders' | translate\" [paddingX]=\"false\">\r\n                <vdr-data-table-2\r\n                    id=\"customer-order-list\"\r\n                    [items]=\"orders$ | async\"\r\n                    [itemsPerPage]=\"ordersPerPage\"\r\n                    [totalItems]=\"ordersCount$ | async\"\r\n                    [currentPage]=\"currentOrdersPage\"\r\n                    [emptyStateLabel]=\"'customer.no-orders-placed' | translate\"\r\n                    (itemsPerPageChange)=\"setOrderItemsPerPage($event)\"\r\n                    (pageChange)=\"setOrderCurrentPage($event)\"\r\n                >\r\n                    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.id }}\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column\r\n                        [heading]=\"'common.created-at' | translate\"\r\n                        id=\"created-at\"\r\n                        [hiddenByDefault]=\"true\"\r\n                    >\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.createdAt | localeDate : 'short' }}\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\">\r\n                        <ng-template let-order=\"item\">\r\n                            <a class=\"button-ghost\" [routerLink]=\"['/orders', order.id]\"\r\n                                ><span>{{ order.code }}</span>\r\n                                <clr-icon shape=\"arrow right\"></clr-icon>\r\n                            </a>\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column\r\n                        [heading]=\"'order.order-type' | translate\"\r\n                        id=\"order-type\"\r\n                        [hiddenByDefault]=\"true\"\r\n                    >\r\n                        <ng-template let-order=\"item\">\r\n                            <vdr-chip>{{ order.type }}</vdr-chip>\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\">\r\n                        <ng-template let-order=\"item\">\r\n                            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'order.total' | translate\" id=\"total\">\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\">\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.updatedAt | timeAgo }}\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'order.placed-at' | translate\" id=\"placed-at\">\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.orderPlacedAt | localeDate : 'short' }}\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-custom-field-column\r\n                        *ngFor=\"let customField of customFields\"\r\n                        [customField]=\"customField\"\r\n                    />\r\n                </vdr-data-table-2>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'customer.customer-history' | translate\">\r\n                <vdr-customer-history\r\n                    [customer]=\"entity$ | async\"\r\n                    [history]=\"history$ | async\"\r\n                    (addNote)=\"addNoteToCustomer($event)\"\r\n                    (updateNote)=\"updateNote($event)\"\r\n                    (deleteNote)=\"deleteNote($event)\"\r\n                ></vdr-customer-history>\r\n            </vdr-card>\r\n        </ng-container>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".last-login{margin-inline-start:6px;color:var(--color-grey-500)}.to-delete{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i2.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i2.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i2.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i2.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i2.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i2.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i2.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i2.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "directive", type: i2.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i2.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i2.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i2.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i2.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i2.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i2.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i2.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i2.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i2.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i2.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i2.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: i6.CustomerStatusLabelComponent, selector: "vdr-customer-status-label", inputs: ["customer"] }, { kind: "component", type: i7.AddressCardComponent, selector: "vdr-address-card", inputs: ["addressForm", "customFields", "availableCountries", "isDefaultBilling", "isDefaultShipping", "editable"], outputs: ["setAsDefaultShipping", "setAsDefaultBilling", "deleteAddress"] }, { kind: "component", type: i8.CustomerHistoryComponent, selector: "vdr-customer-history", inputs: ["customer", "history"], outputs: ["addNote", "updateNote", "deleteNote"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "pipe", type: i2.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i2.TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: i2.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i2.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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-action-bar-dropdown-menu locationId=\"customer-detail\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-page-detail-layout>\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card *ngIf=\"entity$ | async as customer\">\r\n            <vdr-customer-status-label [customer]=\"customer\"></vdr-customer-status-label>\r\n            <vdr-labeled-data\r\n                class=\"last-login\"\r\n                *ngIf=\"customer.user?.lastLogin as lastLogin\"\r\n                [label]=\"'customer.last-login' | translate\"\r\n            >\r\n                <time [dateTime]=\"lastLogin\">{{ lastLogin | timeAgo }}</time>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card\r\n            [title]=\"'customer.customer-groups' | translate\"\r\n            *ngIf=\"(entity$ | async)?.groups as groups\"\r\n        >\r\n            <div *ngIf=\"groups.length; else noGroups\">\r\n                <vdr-chip\r\n                    *ngFor=\"let group of groups\"\r\n                    [colorFrom]=\"group.id\"\r\n                    icon=\"times\"\r\n                    (iconClick)=\"removeFromGroup(group)\"\r\n                    >{{ group.name }}</vdr-chip\r\n                >\r\n            </div>\r\n            <ng-template #noGroups>\r\n                <span class=\"color-weight-400\">\r\n                    {{ 'customer.not-a-member-of-any-groups' | translate }}\r\n                </span>\r\n            </ng-template>\r\n            <div>\r\n                <button\r\n                    class=\"button-small mt-1\"\r\n                    (click)=\"addToGroup()\"\r\n                    *vdrIfPermissions=\"'UpdateCustomerGroup'\"\r\n                >\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ 'customer.add-customer-to-group' | translate }}\r\n                </button>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <vdr-page-block>\r\n        <form class=\"form\" [formGroup]=\"detailForm.get('customer')\">\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.title' | translate\"\r\n                        for=\"title\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n                    </vdr-form-field>\r\n                    <div><!-- spacer --></div>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.first-name' | translate\"\r\n                        for=\"firstName\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.last-name' | translate\"\r\n                        for=\"lastName\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.email-address' | translate\"\r\n                        for=\"emailAddress\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.phone-number' | translate\"\r\n                        for=\"phoneNumber\"\r\n                        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n                    >\r\n                        <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"'customer.password' | translate\"\r\n                        for=\"password\"\r\n                        *ngIf=\"isNew$ | async\"\r\n                    >\r\n                        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Customer\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customer.customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\r\n        </form>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"customer-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n        <ng-container *ngIf=\"!(isNew$ | async)\">\r\n            <vdr-card [title]=\"'customer.addresses' | translate\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-address-card\r\n                        *ngFor=\"let addressForm of getAddressFormControls()\"\r\n                        [class.to-delete]=\"addressesToDeleteIds.has(addressForm.value.id)\"\r\n                        [availableCountries]=\"availableCountries$ | async\"\r\n                        [isDefaultBilling]=\"defaultBillingAddressId === addressForm.value.id\"\r\n                        [isDefaultShipping]=\"defaultShippingAddressId === addressForm.value.id\"\r\n                        [addressForm]=\"addressForm\"\r\n                        [customFields]=\"addressCustomFields\"\r\n                        [editable]=\"\r\n                            (['UpdateCustomer'] | hasPermission) &&\r\n                            !addressesToDeleteIds.has(addressForm.value.id)\r\n                        \"\r\n                        (setAsDefaultBilling)=\"setDefaultBillingAddressId($event)\"\r\n                        (setAsDefaultShipping)=\"setDefaultShippingAddressId($event)\"\r\n                        (deleteAddress)=\"toggleDeleteAddress($event)\"\r\n                    ></vdr-address-card>\r\n                </div>\r\n                <button\r\n                    class=\"btn btn-secondary mt-2\"\r\n                    (click)=\"addAddress()\"\r\n                    *vdrIfPermissions=\"'UpdateCustomer'\"\r\n                >\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ 'customer.create-new-address' | translate }}\r\n                </button>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'customer.orders' | translate\" [paddingX]=\"false\">\r\n                <vdr-data-table-2\r\n                    id=\"customer-order-list\"\r\n                    [items]=\"orders$ | async\"\r\n                    [itemsPerPage]=\"ordersPerPage\"\r\n                    [totalItems]=\"ordersCount$ | async\"\r\n                    [currentPage]=\"currentOrdersPage\"\r\n                    [emptyStateLabel]=\"'customer.no-orders-placed' | translate\"\r\n                    (itemsPerPageChange)=\"setOrderItemsPerPage($event)\"\r\n                    (pageChange)=\"setOrderCurrentPage($event)\"\r\n                >\r\n                    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.id }}\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column\r\n                        [heading]=\"'common.created-at' | translate\"\r\n                        id=\"created-at\"\r\n                        [hiddenByDefault]=\"true\"\r\n                    >\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.createdAt | localeDate : 'short' }}\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\">\r\n                        <ng-template let-order=\"item\">\r\n                            <a class=\"button-ghost\" [routerLink]=\"['/orders', order.id]\"\r\n                                ><span>{{ order.code }}</span>\r\n                                <clr-icon shape=\"arrow right\"></clr-icon>\r\n                            </a>\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column\r\n                        [heading]=\"'order.order-type' | translate\"\r\n                        id=\"order-type\"\r\n                        [hiddenByDefault]=\"true\"\r\n                    >\r\n                        <ng-template let-order=\"item\">\r\n                            <vdr-chip>{{ order.type }}</vdr-chip>\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\">\r\n                        <ng-template let-order=\"item\">\r\n                            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'order.total' | translate\" id=\"total\">\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\">\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.updatedAt | timeAgo }}\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-column [heading]=\"'order.placed-at' | translate\" id=\"placed-at\">\r\n                        <ng-template let-order=\"item\">\r\n                            {{ order.orderPlacedAt | localeDate : 'short' }}\r\n                        </ng-template>\r\n                    </vdr-dt2-column>\r\n                    <vdr-dt2-custom-field-column\r\n                        *ngFor=\"let customField of customFields\"\r\n                        [customField]=\"customField\"\r\n                    />\r\n                </vdr-data-table-2>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'customer.customer-history' | translate\">\r\n                <vdr-customer-history\r\n                    [customer]=\"entity$ | async\"\r\n                    [history]=\"history$ | async\"\r\n                    (addNote)=\"addNoteToCustomer($event)\"\r\n                    (updateNote)=\"updateNote($event)\"\r\n                    (deleteNote)=\"deleteNote($event)\"\r\n                ></vdr-customer-history>\r\n            </vdr-card>\r\n        </ng-container>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".last-login{margin-inline-start:6px;color:var(--color-grey-500)}.to-delete{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i2.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i2.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i2.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i2.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i2.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i2.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i2.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i2.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "directive", type: i2.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i2.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i2.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i2.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i2.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i2.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i2.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i2.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i2.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i2.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i2.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i2.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: i6.CustomerStatusLabelComponent, selector: "vdr-customer-status-label", inputs: ["customer"] }, { kind: "component", type: i7.AddressCardComponent, selector: "vdr-address-card", inputs: ["addressForm", "customFields", "availableCountries", "isDefaultBilling", "isDefaultShipping", "editable"], outputs: ["setAsDefaultShipping", "setAsDefaultBilling", "deleteAddress"] }, { kind: "component", type: i8.CustomerHistoryComponent, selector: "vdr-customer-history", inputs: ["customer", "history"], outputs: ["addNote", "updateNote", "deleteNote"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "pipe", type: i2.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i2.TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: i2.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i2.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CustomerDetailComponent, decorators: [{
             type: Component,

package/esm2022/customer/components/customer-group-list/customer-group-list.component.mjs CHANGED Viewed

@@ -141,7 +141,7 @@ export class CustomerGroupListComponent extends TypedBaseListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CustomerGroupListComponent, deps: [{ token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: i2.ActivatedRoute }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CustomerGroupListComponent, selector: "vdr-customer-group-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"customer-group-list\"></vdr-action-bar-items>\r\n            <a class=\"btn btn-primary\" *vdrIfPermissions=\"'CreateCustomerGroup'\" [routerLink]=\"['./', 'create']\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'customer.create-new-customer-group' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"customer-group-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-split-view [rightPanelOpen]=\"activeGroup$ | async\" (closeClicked)=\"closeMembers()\">\r\n    <ng-template vdrSplitViewLeft>\r\n        <vdr-data-table-2\r\n            class=\"mt-2\"\r\n            [id]=\"dataTableListId\"\r\n            [items]=\"items$ | async\"\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            [totalItems]=\"totalItems$ | async\"\r\n            [currentPage]=\"currentPage$ | async\"\r\n            [filters]=\"filters\"\r\n            [activeIndex]=\"activeIndex$ | async\"\r\n            (pageChange)=\"setPageNumber($event)\"\r\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n            (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n        >\r\n            <vdr-bulk-action-menu\r\n                locationId=\"customer-group-list\"\r\n                [hostComponent]=\"this\"\r\n                [selectionManager]=\"selectionManager\"\r\n            ></vdr-bulk-action-menu>\r\n            <vdr-dt2-search\r\n                [searchTermControl]=\"searchTermControl\"\r\n                [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n            ></vdr-dt2-search>\r\n            <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.id }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('createdAt')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.createdAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('updatedAt')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.updatedAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.name' | translate\" id=\"name\"\r\n                [optional]=\"false\"\r\n                [sort]=\"sorts.get('name')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    <a class=\"button-ghost\" [routerLink]=\"['./', customerGroup.id]\"\r\n                        ><span>{{ customerGroup.name }}</span>\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.view-contents' | translate\" id=\"view-contents\"\r\n                [optional]=\"false\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    <a\r\n                        class=\"button-small bg-weight-150\"\r\n                        [routerLink]=\"['./', { contents: customerGroup.id }]\"\r\n                        queryParamsHandling=\"preserve\"\r\n                    >\r\n                        <span>{{ 'customer.view-group-members' | translate }}</span>\r\n                        <clr-icon shape=\"file-group\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n        </vdr-data-table-2>\r\n    </ng-template>\r\n    <ng-template vdrSplitViewRight [splitViewTitle]=\"(activeGroup$ | async)?.name\">\r\n        <ng-container *ngIf=\"activeGroup$ | async as activeGroup\">\r\n            <button class=\"button-ghost ml-4\" (click)=\"addToGroup(activeGroup)\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                <span>{{\r\n                    'customer.add-customers-to-group' | translate : { groupName: activeGroup.name }\r\n                }}</span>\r\n            </button>\r\n            <vdr-customer-group-member-list\r\n                locationId=\"customer-group-members-list\"\r\n                [members]=\"members$ | async\"\r\n                [route]=\"route\"\r\n                [totalItems]=\"membersTotal$ | async\"\r\n                [activeGroup]=\"activeGroup$ | async\"\r\n                (fetchParamsChange)=\"fetchGroupMembers$.next($event)\"\r\n            />\r\n        </ng-container>\r\n    </ng-template>\r\n</vdr-split-view>\r\n", styles: ["vdr-empty-placeholder{flex:1}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.SplitViewComponent, selector: "vdr-split-view", inputs: ["rightPanelOpen"], outputs: ["closeClicked"] }, { kind: "directive", type: i1.SplitViewLeftDirective, selector: "[vdrSplitViewLeft]" }, { kind: "directive", type: i1.SplitViewRightDirective, selector: "[vdrSplitViewRight]", inputs: ["splitViewTitle"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i5.CustomerGroupMemberListComponent, selector: "vdr-customer-group-member-list", inputs: ["locationId", "members", "totalItems", "route", "selectedMemberIds", "activeGroup"], outputs: ["selectionChange", "fetchParamsChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CustomerGroupListComponent, selector: "vdr-customer-group-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"customer-group-list\"></vdr-action-bar-items>\r\n            <a class=\"btn btn-primary\" *vdrIfPermissions=\"'CreateCustomerGroup'\" [routerLink]=\"['./', 'create']\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'customer.create-new-customer-group' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"customer-group-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-split-view [rightPanelOpen]=\"activeGroup$ | async\" (closeClicked)=\"closeMembers()\">\r\n    <ng-template vdrSplitViewLeft>\r\n        <vdr-data-table-2\r\n            class=\"mt-2\"\r\n            [id]=\"dataTableListId\"\r\n            [items]=\"items$ | async\"\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            [totalItems]=\"totalItems$ | async\"\r\n            [currentPage]=\"currentPage$ | async\"\r\n            [filters]=\"filters\"\r\n            [activeIndex]=\"activeIndex$ | async\"\r\n            (pageChange)=\"setPageNumber($event)\"\r\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n            (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n        >\r\n            <vdr-bulk-action-menu\r\n                locationId=\"customer-group-list\"\r\n                [hostComponent]=\"this\"\r\n                [selectionManager]=\"selectionManager\"\r\n            ></vdr-bulk-action-menu>\r\n            <vdr-dt2-search\r\n                [searchTermControl]=\"searchTermControl\"\r\n                [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n            ></vdr-dt2-search>\r\n            <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.id }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('createdAt')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.createdAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('updatedAt')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    {{ customerGroup.updatedAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.name' | translate\" id=\"name\"\r\n                [optional]=\"false\"\r\n                [sort]=\"sorts.get('name')\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    <a class=\"button-ghost\" [routerLink]=\"['./', customerGroup.id]\"\r\n                        ><span>{{ customerGroup.name }}</span>\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.view-contents' | translate\" id=\"view-contents\"\r\n                [optional]=\"false\"\r\n            >\r\n                <ng-template let-customerGroup=\"item\">\r\n                    <a\r\n                        class=\"button-small bg-weight-150\"\r\n                        [routerLink]=\"['./', { contents: customerGroup.id }]\"\r\n                        queryParamsHandling=\"preserve\"\r\n                    >\r\n                        <span>{{ 'customer.view-group-members' | translate }}</span>\r\n                        <clr-icon shape=\"file-group\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n        </vdr-data-table-2>\r\n    </ng-template>\r\n    <ng-template vdrSplitViewRight [splitViewTitle]=\"(activeGroup$ | async)?.name\">\r\n        <ng-container *ngIf=\"activeGroup$ | async as activeGroup\">\r\n            <button class=\"button-ghost ml-4\" (click)=\"addToGroup(activeGroup)\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                <span>{{\r\n                    'customer.add-customers-to-group' | translate : { groupName: activeGroup.name }\r\n                }}</span>\r\n            </button>\r\n            <vdr-customer-group-member-list\r\n                locationId=\"customer-group-members-list\"\r\n                [members]=\"members$ | async\"\r\n                [route]=\"route\"\r\n                [totalItems]=\"membersTotal$ | async\"\r\n                [activeGroup]=\"activeGroup$ | async\"\r\n                (fetchParamsChange)=\"fetchGroupMembers$.next($event)\"\r\n            />\r\n        </ng-container>\r\n    </ng-template>\r\n</vdr-split-view>\r\n", styles: ["vdr-empty-placeholder{flex:1}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.SplitViewComponent, selector: "vdr-split-view", inputs: ["rightPanelOpen"], outputs: ["closeClicked"] }, { kind: "directive", type: i1.SplitViewLeftDirective, selector: "[vdrSplitViewLeft]" }, { kind: "directive", type: i1.SplitViewRightDirective, selector: "[vdrSplitViewRight]", inputs: ["splitViewTitle"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i5.CustomerGroupMemberListComponent, selector: "vdr-customer-group-member-list", inputs: ["locationId", "members", "totalItems", "route", "selectedMemberIds", "activeGroup"], outputs: ["selectionChange", "fetchParamsChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CustomerGroupListComponent, decorators: [{
             type: Component,

package/esm2022/customer/components/customer-group-member-list/customer-group-member-list.component.mjs CHANGED Viewed

@@ -66,7 +66,7 @@ export class CustomerGroupMemberListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CustomerGroupMemberListComponent, deps: [{ token: i1.Router }, { token: i2.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CustomerGroupMemberListComponent, selector: "vdr-customer-group-member-list", inputs: { locationId: "locationId", members: "members", totalItems: "totalItems", route: "route", selectedMemberIds: "selectedMemberIds", activeGroup: "activeGroup" }, outputs: { selectionChange: "selectionChange", fetchParamsChange: "fetchParamsChange" }, ngImport: i0, template: "<vdr-data-table-2\r\n    [id]=\"locationId\"\r\n    [items]=\"members\"\r\n    [itemsPerPage]=\"membersItemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems\"\r\n    [currentPage]=\"membersCurrentPage$ | async\"\r\n    (pageChange)=\"setContentsPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setContentsItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        [locationId]=\"locationId\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"filterTermControl\"\r\n        [searchTermPlaceholder]=\"'customer.search-customers-by-email' | translate\"\r\n    ></vdr-dt2-search>\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-customerGroup=\"item\">\r\n            {{ customerGroup.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.name' | translate\" id=\"name\" [optional]=\"false\">\r\n        <ng-template let-customer=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['/customer/customers', customer.id]\"\r\n                ><span> {{ customer.title }} {{ customer.firstName }} {{ customer.lastName }} </span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.status' | translate\" id=\"status\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-customer=\"item\">\r\n            <vdr-customer-status-label [customer]=\"customer\" />\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.email-address' | translate\" id=\"email-address\">\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.emailAddress }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-data-table-2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i2.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i2.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i2.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i4.CustomerStatusLabelComponent, selector: "vdr-customer-status-label", inputs: ["customer"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i2.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CustomerGroupMemberListComponent, selector: "vdr-customer-group-member-list", inputs: { locationId: "locationId", members: "members", totalItems: "totalItems", route: "route", selectedMemberIds: "selectedMemberIds", activeGroup: "activeGroup" }, outputs: { selectionChange: "selectionChange", fetchParamsChange: "fetchParamsChange" }, ngImport: i0, template: "<vdr-data-table-2\r\n    [id]=\"locationId\"\r\n    [items]=\"members\"\r\n    [itemsPerPage]=\"membersItemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems\"\r\n    [currentPage]=\"membersCurrentPage$ | async\"\r\n    (pageChange)=\"setContentsPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setContentsItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        [locationId]=\"locationId\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"filterTermControl\"\r\n        [searchTermPlaceholder]=\"'customer.search-customers-by-email' | translate\"\r\n    ></vdr-dt2-search>\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-customerGroup=\"item\">\r\n            {{ customerGroup.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.name' | translate\" id=\"name\" [optional]=\"false\">\r\n        <ng-template let-customer=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['/customer/customers', customer.id]\"\r\n                ><span> {{ customer.title }} {{ customer.firstName }} {{ customer.lastName }} </span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.status' | translate\" id=\"status\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-customer=\"item\">\r\n            <vdr-customer-status-label [customer]=\"customer\" />\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.email-address' | translate\" id=\"email-address\">\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.emailAddress }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-data-table-2>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i2.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i2.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i2.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i2.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i4.CustomerStatusLabelComponent, selector: "vdr-customer-status-label", inputs: ["customer"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i2.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CustomerGroupMemberListComponent, decorators: [{
             type: Component,

package/esm2022/customer/components/customer-list/customer-list.component.mjs CHANGED Viewed

@@ -100,7 +100,7 @@ export class CustomerListComponent extends TypedBaseListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CustomerListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CustomerListComponent, selector: "vdr-customer-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"customer-list\"></vdr-action-bar-items>\r\n            <a class=\"btn btn-primary\" [routerLink]=\"['./create']\" *vdrIfPermissions=\"'CreateCustomer'\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'customer.create-new-customer' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"customer-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"customer-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'customer.search-customers-by-email-last-name-postal-code' | translate\"\r\n    ></vdr-dt2-search>\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('lastName')\">\r\n        <ng-template let-customer=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', customer.id]\"\r\n                ><span> {{ customer.title }} {{ customer.firstName }} {{ customer.lastName }} </span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.status' | translate\" id=\"status\">\r\n        <ng-template let-customer=\"item\">\r\n            <vdr-customer-status-label [customer]=\"customer\" />\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.email-address' | translate\" id=\"email-address\" [sort]=\"sorts.get('emailAddress')\">\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.emailAddress }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [".search-input{margin-top:6px;min-width:300px}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i4.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i4.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i4.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "directive", type: i4.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i4.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i4.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i4.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i4.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i4.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i4.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i4.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i5.CustomerStatusLabelComponent, selector: "vdr-customer-status-label", inputs: ["customer"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.LocaleDatePipe, name: "localeDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CustomerListComponent, selector: "vdr-customer-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"customer-list\"></vdr-action-bar-items>\r\n            <a class=\"btn btn-primary\" [routerLink]=\"['./create']\" *vdrIfPermissions=\"'CreateCustomer'\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'customer.create-new-customer' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"customer-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"customer-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'customer.search-customers-by-email-last-name-postal-code' | translate\"\r\n    ></vdr-dt2-search>\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('lastName')\">\r\n        <ng-template let-customer=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', customer.id]\"\r\n                ><span> {{ customer.title }} {{ customer.firstName }} {{ customer.lastName }} </span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.status' | translate\" id=\"status\">\r\n        <ng-template let-customer=\"item\">\r\n            <vdr-customer-status-label [customer]=\"customer\" />\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'customer.email-address' | translate\" id=\"email-address\" [sort]=\"sorts.get('emailAddress')\">\r\n        <ng-template let-customer=\"item\">\r\n            {{ customer.emailAddress }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [".search-input{margin-top:6px;min-width:300px}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i4.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i4.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i4.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "directive", type: i4.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i4.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i4.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i4.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i4.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i4.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i4.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i4.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i5.CustomerStatusLabelComponent, selector: "vdr-customer-status-label", inputs: ["customer"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.LocaleDatePipe, name: "localeDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CustomerListComponent, decorators: [{
             type: Component,

package/esm2022/dashboard/widgets/latest-orders-widget/latest-orders-widget.component.mjs CHANGED Viewed

@@ -52,7 +52,7 @@ export class LatestOrdersWidgetComponent {
             .mapStream(data => data.orders.items);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LatestOrdersWidgetComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: LatestOrdersWidgetComponent, selector: "vdr-latest-orders-widget", ngImport: i0, template: "<vdr-data-table-2 [items]=\"latestOrders$ | async\" id=\"latest-orders-widget-list\">\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\">\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.state' | translate\" id=\"state\" [hiddenByDefault]=\"true\">\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]=\"'customer.customer' | translate\" id=\"customer\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-order=\"item\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-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]=\"'order.placed-at' | translate\" id=\"placed-at\">\r\n        <ng-template let-order=\"item\">\r\n            {{ order.orderPlacedAt | timeAgo }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-data-table-2>\r\n", styles: ["vdr-data-table ::ng-deep table{margin-top:0}vdr-order-state-label{display:inline-block;margin-top:2px}\n"], dependencies: [{ kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: LatestOrdersWidgetComponent, selector: "vdr-latest-orders-widget", ngImport: i0, template: "<vdr-data-table-2 [items]=\"latestOrders$ | async\" id=\"latest-orders-widget-list\">\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\">\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.state' | translate\" id=\"state\" [hiddenByDefault]=\"true\">\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]=\"'customer.customer' | translate\" id=\"customer\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-order=\"item\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-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]=\"'order.placed-at' | translate\" id=\"placed-at\">\r\n        <ng-template let-order=\"item\">\r\n            {{ order.orderPlacedAt | timeAgo }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-data-table-2>\r\n", styles: ["vdr-data-table ::ng-deep table{margin-top:0}vdr-order-state-label{display:inline-block;margin-top:2px}\n"], dependencies: [{ kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LatestOrdersWidgetComponent, decorators: [{
             type: Component,

package/esm2022/marketing/components/promotion-list/promotion-list.component.mjs CHANGED Viewed

@@ -120,7 +120,7 @@ export class PromotionListComponent extends TypedBaseListComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PromotionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PromotionListComponent, selector: "vdr-promotion-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"promotion-list\" />\r\n            <a class=\"btn btn-primary\" [routerLink]=\"['./create']\" *vdrIfPermissions=\"'CreatePromotion'\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'marketing.create-new-promotion' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"promotion-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-data-table-2\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"promotion-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'marketing.search-by-name-or-coupon-code' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-promotion=\"item\">{{ promotion.id }}</ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\"\r\n        id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-promotion=\"item\">\r\n            {{ promotion.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\"\r\n        id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-promotion=\"item\">\r\n            {{ promotion.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.name' | translate\"\r\n        id=\"name\"\r\n        [optional]=\"false\"\r\n        [sort]=\"sorts.get('name')\"\r\n    >\r\n        <ng-template let-promotion=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', promotion.id]\"\r\n                ><span> {{ promotion.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-promotion=\"item\">\r\n            <vdr-chip *ngIf=\"promotion.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!promotion.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'marketing.coupon-code' | translate\"\r\n        id=\"coupon-code\"\r\n        [sort]=\"sorts.get('couponCode')\"\r\n    >\r\n        <ng-template let-promotion=\"item\">\r\n            {{ promotion.couponCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'marketing.starts-at' | translate\"\r\n        id=\"starts-at\"\r\n        [sort]=\"sorts.get('startsAt')\"\r\n    >\r\n        <ng-template let-promotion=\"item\">\r\n            {{ promotion.startsAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'marketing.ends-at' | translate\" id=\"ends-at\" [sort]=\"sorts.get('endsAt')\">\r\n        <ng-template let-promotion=\"item\">\r\n            {{ promotion.endsAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'marketing.per-customer-limit' | translate\"\r\n        id=\"per-customer-limit\"\r\n        [sort]=\"sorts.get('perCustomerUsageLimit')\"\r\n        [hiddenByDefault]=\"true\"\r\n    >\r\n        <ng-template let-promotion=\"item\">\r\n            {{ promotion.perCustomerUsageLimit }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'marketing.usage-limit' | translate\"\r\n        id=\"usage-limit\"\r\n        [sort]=\"sorts.get('usageLimit')\"\r\n        [hiddenByDefault]=\"true\"\r\n    >\r\n        <ng-template let-promotion=\"item\">\r\n            {{ promotion.usageLimit }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".search-form{padding:0}.search-input{margin:6px 8px 0 0;min-width:200px}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i4.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i4.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i4.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i4.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i4.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i4.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i4.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i4.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i4.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i4.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i4.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i4.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i4.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PromotionListComponent, selector: "vdr-promotion-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            />\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"promotion-list\" />\r\n            <a class=\"btn btn-primary\" [routerLink]=\"['./create']\" *vdrIfPermissions=\"'CreatePromotion'\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'marketing.create-new-promotion' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"promotion-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-data-table-2\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"promotion-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'marketing.search-by-name-or-coupon-code' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-promotion=\"item\">{{ promotion.id }}</ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\"\r\n        id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-promotion=\"item\">\r\n            {{ promotion.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\"\r\n        id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-promotion=\"item\">\r\n            {{ promotion.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.name' | translate\"\r\n        id=\"name\"\r\n        [optional]=\"false\"\r\n        [sort]=\"sorts.get('name')\"\r\n    >\r\n        <ng-template let-promotion=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', promotion.id]\"\r\n                ><span> {{ promotion.name }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-promotion=\"item\">\r\n            <vdr-chip *ngIf=\"promotion.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!promotion.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'marketing.coupon-code' | translate\"\r\n        id=\"coupon-code\"\r\n        [sort]=\"sorts.get('couponCode')\"\r\n    >\r\n        <ng-template let-promotion=\"item\">\r\n            {{ promotion.couponCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'marketing.starts-at' | translate\"\r\n        id=\"starts-at\"\r\n        [sort]=\"sorts.get('startsAt')\"\r\n    >\r\n        <ng-template let-promotion=\"item\">\r\n            {{ promotion.startsAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'marketing.ends-at' | translate\" id=\"ends-at\" [sort]=\"sorts.get('endsAt')\">\r\n        <ng-template let-promotion=\"item\">\r\n            {{ promotion.endsAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'marketing.per-customer-limit' | translate\"\r\n        id=\"per-customer-limit\"\r\n        [sort]=\"sorts.get('perCustomerUsageLimit')\"\r\n        [hiddenByDefault]=\"true\"\r\n    >\r\n        <ng-template let-promotion=\"item\">\r\n            {{ promotion.perCustomerUsageLimit }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'marketing.usage-limit' | translate\"\r\n        id=\"usage-limit\"\r\n        [sort]=\"sorts.get('usageLimit')\"\r\n        [hiddenByDefault]=\"true\"\r\n    >\r\n        <ng-template let-promotion=\"item\">\r\n            {{ promotion.usageLimit }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".search-form{padding:0}.search-input{margin:6px 8px 0 0;min-width:200px}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i4.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i4.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i4.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i4.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i4.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i4.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i4.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i4.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i4.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i4.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i4.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i4.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i4.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PromotionListComponent, decorators: [{
             type: Component,

package/esm2022/order/components/order-editor/order-editor.component.mjs CHANGED Viewed

@@ -476,7 +476,7 @@ export class OrderEditorComponent extends TypedBaseDetailComponent {
         /* not used */
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OrderEditorComponent, deps: [{ token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: i2.OrderTransitionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OrderEditorComponent, selector: "vdr-order-editor", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-align-items-center\"></div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\r\n                {{ 'order.cancel-modification' | translate }}\r\n            </button>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card [title]=\"'order.modification-summary' | translate\">\r\n            <vdr-order-modification-summary\r\n                [orderSnapshot]=\"orderSnapshot\"\r\n                [modifyOrderInput]=\"modifyOrderInput\"\r\n                [addedLines]=\"addedLines\"\r\n                [shippingAddressForm]=\"shippingAddressForm\"\r\n                [billingAddressForm]=\"billingAddressForm\"\r\n                [couponCodesControl]=\"couponCodesControl\"\r\n                [updatedShippingMethods]=\"updatedShippingMethods\"\r\n            ></vdr-order-modification-summary>\r\n\r\n            <div *ngIf=\"!hasModifications()\" class=\"no-modifications\">\r\n                {{ 'order.no-modifications-made' | translate }}\r\n            </div>\r\n\r\n            <div class=\"summary-controls\">\r\n                <vdr-form-field [label]=\"'order.note' | translate\">\r\n                    <textarea\r\n                        [(ngModel)]=\"note\"\r\n                        name=\"note\"\r\n                        required\r\n                        [disabled]=\"!hasModifications()\"\r\n                    ></textarea>\r\n                </vdr-form-field>\r\n                <label class=\"flex items-center\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        [(ngModel)]=\"recalculateShipping\"\r\n                        [disabled]=\"!hasModifications()\"\r\n                    />\r\n                    <div class=\"ml-1\">{{ 'order.modification-recalculate-shipping' | translate }}</div>\r\n                </label>\r\n                <button\r\n                    class=\"btn btn-primary mt-2\"\r\n                    [disabled]=\"!hasModifications()\"\r\n                    (click)=\"previewAndModify(order)\"\r\n                >\r\n                    {{ 'order.preview-changes' | translate }}\r\n                </button>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.set-coupon-codes' | translate\">\r\n            <vdr-coupon-code-selector [control]=\"couponCodesControl\"></vdr-coupon-code-selector>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.shipping-address' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <button\r\n                    class=\"button-small\"\r\n                    [title]=\"'order.edit-shipping-address' | translate\"\r\n                    (click)=\"editingShippingAddress = !editingShippingAddress\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                *ngIf=\"!editingShippingAddress\"\r\n                [address]=\"shippingAddressForm.value\"\r\n            ></vdr-formatted-address>\r\n            <vdr-address-form\r\n                *ngIf=\"editingShippingAddress\"\r\n                [formGroup]=\"shippingAddressForm\"\r\n                [availableCountries]=\"availableCountries$ | async\"\r\n                [customFields]=\"addressCustomFields\"\r\n            ></vdr-address-form>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.billing-address' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <button\r\n                    class=\"button-small\"\r\n                    [title]=\"'order.edit-billing-address' | translate\"\r\n                    (click)=\"editingBillingAddress = !editingBillingAddress\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                *ngIf=\"!editingBillingAddress\"\r\n                [address]=\"billingAddressForm.value\"\r\n            ></vdr-formatted-address>\r\n            <vdr-address-form\r\n                *ngIf=\"editingBillingAddress\"\r\n                [formGroup]=\"billingAddressForm\"\r\n                [availableCountries]=\"availableCountries$ | async\"\r\n                [customFields]=\"addressCustomFields\"\r\n            ></vdr-address-form>\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n\r\n    <vdr-page-block>\r\n        <vdr-card [paddingX]=\"false\">\r\n            <vdr-data-table-2 id=\"modify-order\" class=\"order-table\" [items]=\"order.lines.concat(addedLines)\">\r\n                <!-- Here we define all the available columns -->\r\n                <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.id }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column\r\n                    id=\"created-at\"\r\n                    [heading]=\"'common.created-at' | translate\"\r\n                    [hiddenByDefault]=\"true\"\r\n                >\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.createdAt | localeDate : 'short' }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column\r\n                    id=\"updated-at\"\r\n                    [heading]=\"'common.updated-at' | translate\"\r\n                    [hiddenByDefault]=\"true\"\r\n                >\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.updatedAt | localeDate : 'short' }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n                    <ng-template let-line=\"item\">\r\n                        <div class=\"image-placeholder\">\r\n                            <img\r\n                                *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\r\n                                [src]=\"asset | assetPreview : 'tiny'\"\r\n                            />\r\n                            <ng-template #imagePlaceholder>\r\n                                <div class=\"placeholder\">\r\n                                    <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                                </div>\r\n                            </ng-template>\r\n                        </div>\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column\r\n                    id=\"product-name\"\r\n                    [heading]=\"'order.product-name' | translate\"\r\n                    [optional]=\"false\"\r\n                >\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.productVariant.name }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column id=\"product-sku\" [heading]=\"'order.product-sku' | translate\">\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.productVariant.sku }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column id=\"unit-price\" [heading]=\"'order.unit-price' | translate\">\r\n                    <ng-template let-line=\"item\">\r\n                        <div class=\"text-center\">\r\n                            <div>{{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}</div>\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ line.unitPrice | localeCurrency : order.currencyCode }}\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\" [optional]=\"false\">\r\n                    <ng-template let-line=\"item\">\r\n                        <input\r\n                            type=\"number\"\r\n                            class=\"draft-qty mr-1\"\r\n                            min=\"0\"\r\n                            [value]=\"getInitialLineQuantity(line.id)\"\r\n                            (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n                        />\r\n                        <button\r\n                            class=\"button-small\"\r\n                            *ngIf=\"isAddedLine(line)\"\r\n                            (click)=\"removeAddedItem(line.id)\"\r\n                        >\r\n                            <clr-icon shape=\"trash\"></clr-icon>\r\n                        </button>\r\n                        <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                        <vdr-line-fulfillment\r\n                            [line]=\"line\"\r\n                            [allOrderFulfillments]=\"order.fulfillments\"\r\n                            [orderState]=\"order.state\"\r\n                        ></vdr-line-fulfillment>\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column\r\n                    *ngFor=\"let customField of orderLineCustomFields\"\r\n                    [id]=\"customField.name\"\r\n                    [heading]=\"customField | customFieldLabel : (uiLanguage$ | async)\"\r\n                    [hiddenByDefault]=\"true\"\r\n                >\r\n                    <ng-template let-line=\"item\" let-index=\"index\">\r\n                        <vdr-custom-field-control\r\n                            [compact]=\"true\"\r\n                            [entityName]=\"'OrderLine'\"\r\n                            [customField]=\"customField\"\r\n                            [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.at(index)\"\r\n                        />\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n            </vdr-data-table-2>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.add-item-to-order' | translate\">\r\n            <vdr-product-variant-selector class=\"mb-4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n            </vdr-product-variant-selector>\r\n            <div class=\"flex\">\r\n                <div>\r\n                    <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb-4\">\r\n                        <img\r\n                            *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n                            [src]=\"asset | assetPreview : 'tiny'\"\r\n                            class=\"mr-4 add-item-thumb\"\r\n                        />\r\n                        <div>\r\n                            <strong class=\"mr-4\">{{ addItemSelectedVariant.productVariantName }}</strong>\r\n                            <small>{{ addItemSelectedVariant.sku }}</small>\r\n                            <div>\r\n                                {{\r\n                                    getSelectedItemPrice(addItemSelectedVariant)\r\n                                        | localeCurrency : order.currencyCode\r\n                                }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"addItemSelectedVariant\">\r\n                        <vdr-tabbed-custom-fields\r\n                            entityName=\"Order\"\r\n                            [customFields]=\"orderLineCustomFields\"\r\n                            [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n                        ></vdr-tabbed-custom-fields>\r\n                    </div>\r\n                </div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button\r\n                        *ngIf=\"addItemSelectedVariant\"\r\n                        class=\"btn btn-secondary\"\r\n                        [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\r\n                        (click)=\"addItemToOrder(addItemSelectedVariant)\"\r\n                    >\r\n                        {{ 'order.add-item-to-order' | translate }}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.shipping' | translate\">\r\n            <div *ngFor=\"let shippingLine of order.shippingLines\" class=\"flex items-center\">\r\n                <ng-container *ngIf=\"getShippingLineDetails(shippingLine) as details\">\r\n                    <div>{{ details.name }}:</div>\r\n                    <div class=\"mx-1\">\r\n                        {{ details.price | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                    <button class=\"button-small\" (click)=\"setShippingMethod(shippingLine.id)\">\r\n                        {{ 'order.set-shipping-method' | translate }}\r\n                    </button>\r\n                </ng-container>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.add-surcharge' | translate\">\r\n            <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\r\n                        ><input id=\"description\" type=\"text\" formControlName=\"description\"\r\n                    /></vdr-form-field>\r\n                    <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\r\n                        ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\r\n                    /></vdr-form-field>\r\n                    <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\r\n                        <vdr-currency-input\r\n                            [currencyCode]=\"order.currencyCode\"\r\n                            id=\"price\"\r\n                            formControlName=\"price\"\r\n                        ></vdr-currency-input>\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"\r\n                            'catalog.price-includes-tax-at'\r\n                                | translate : { rate: surchargeForm.get('taxRate')?.value ?? 0 }\r\n                        \"\r\n                        for=\"priceIncludesTax\"\r\n                        ><input\r\n                            id=\"priceIncludesTax\"\r\n                            type=\"checkbox\"\r\n                            clrCheckbox\r\n                            formControlName=\"priceIncludesTax\"\r\n                    /></vdr-form-field>\r\n                    <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\r\n                        <vdr-affixed-input suffix=\"%\"\r\n                            ><input id=\"taxRate\" type=\"number\" min=\"0\" max=\"100\" formControlName=\"taxRate\"\r\n                        /></vdr-affixed-input>\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'order.tax-description' | translate\" for=\"taxDescription\"\r\n                        ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\r\n                    /></vdr-form-field>\r\n                </div>\r\n                <button\r\n                    class=\"btn btn-secondary mt-2\"\r\n                    [disabled]=\"\r\n                        surchargeForm.invalid ||\r\n                        surchargeForm.pristine ||\r\n                        surchargeForm.get('price')?.value === 0 ||\r\n                        !surchargeForm.get('description')?.value\r\n                    \"\r\n                >\r\n                    {{ 'order.add-surcharge' | translate }}\r\n                </button>\r\n            </form>\r\n        </vdr-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table img{border-radius:var(--border-radius-img)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}.order-table .draft-qty{max-width:48px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}.order-table .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .thumb img{width:50px;height:50px}.order-table .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.order-table .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}.add-item-thumb{max-width:50px}.no-modifications{color:var(--color-grey-400)}.summary-controls{border-top:1px solid var(--color-weight-200);margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 1)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i5.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "component", type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { 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: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "component", type: i6.LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: i7.LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: i8.CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: ["couponCodes", "control"], outputs: ["addCouponCode", "removeCouponCode"] }, { kind: "component", type: i9.OrderModificationSummaryComponent, selector: "vdr-order-modification-summary", inputs: ["orderSnapshot", "modifyOrderInput", "addedLines", "shippingAddressForm", "billingAddressForm", "updatedShippingMethods", "couponCodesControl"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.CustomFieldLabelPipe, name: "customFieldLabel" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OrderEditorComponent, selector: "vdr-order-editor", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-align-items-center\"></div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\r\n                {{ 'order.cancel-modification' | translate }}\r\n            </button>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card [title]=\"'order.modification-summary' | translate\">\r\n            <vdr-order-modification-summary\r\n                [orderSnapshot]=\"orderSnapshot\"\r\n                [modifyOrderInput]=\"modifyOrderInput\"\r\n                [addedLines]=\"addedLines\"\r\n                [shippingAddressForm]=\"shippingAddressForm\"\r\n                [billingAddressForm]=\"billingAddressForm\"\r\n                [couponCodesControl]=\"couponCodesControl\"\r\n                [updatedShippingMethods]=\"updatedShippingMethods\"\r\n            ></vdr-order-modification-summary>\r\n\r\n            <div *ngIf=\"!hasModifications()\" class=\"no-modifications\">\r\n                {{ 'order.no-modifications-made' | translate }}\r\n            </div>\r\n\r\n            <div class=\"summary-controls\">\r\n                <vdr-form-field [label]=\"'order.note' | translate\">\r\n                    <textarea\r\n                        [(ngModel)]=\"note\"\r\n                        name=\"note\"\r\n                        required\r\n                        [disabled]=\"!hasModifications()\"\r\n                    ></textarea>\r\n                </vdr-form-field>\r\n                <label class=\"flex items-center\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        [(ngModel)]=\"recalculateShipping\"\r\n                        [disabled]=\"!hasModifications()\"\r\n                    />\r\n                    <div class=\"ml-1\">{{ 'order.modification-recalculate-shipping' | translate }}</div>\r\n                </label>\r\n                <button\r\n                    class=\"btn btn-primary mt-2\"\r\n                    [disabled]=\"!hasModifications()\"\r\n                    (click)=\"previewAndModify(order)\"\r\n                >\r\n                    {{ 'order.preview-changes' | translate }}\r\n                </button>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.set-coupon-codes' | translate\">\r\n            <vdr-coupon-code-selector [control]=\"couponCodesControl\"></vdr-coupon-code-selector>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.shipping-address' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <button\r\n                    class=\"button-small\"\r\n                    [title]=\"'order.edit-shipping-address' | translate\"\r\n                    (click)=\"editingShippingAddress = !editingShippingAddress\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                *ngIf=\"!editingShippingAddress\"\r\n                [address]=\"shippingAddressForm.value\"\r\n            ></vdr-formatted-address>\r\n            <vdr-address-form\r\n                *ngIf=\"editingShippingAddress\"\r\n                [formGroup]=\"shippingAddressForm\"\r\n                [availableCountries]=\"availableCountries$ | async\"\r\n                [customFields]=\"addressCustomFields\"\r\n            ></vdr-address-form>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.billing-address' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <button\r\n                    class=\"button-small\"\r\n                    [title]=\"'order.edit-billing-address' | translate\"\r\n                    (click)=\"editingBillingAddress = !editingBillingAddress\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                *ngIf=\"!editingBillingAddress\"\r\n                [address]=\"billingAddressForm.value\"\r\n            ></vdr-formatted-address>\r\n            <vdr-address-form\r\n                *ngIf=\"editingBillingAddress\"\r\n                [formGroup]=\"billingAddressForm\"\r\n                [availableCountries]=\"availableCountries$ | async\"\r\n                [customFields]=\"addressCustomFields\"\r\n            ></vdr-address-form>\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n\r\n    <vdr-page-block>\r\n        <vdr-card [paddingX]=\"false\">\r\n            <vdr-data-table-2 id=\"modify-order\" class=\"order-table\" [items]=\"order.lines.concat(addedLines)\">\r\n                <!-- Here we define all the available columns -->\r\n                <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.id }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column\r\n                    id=\"created-at\"\r\n                    [heading]=\"'common.created-at' | translate\"\r\n                    [hiddenByDefault]=\"true\"\r\n                >\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.createdAt | localeDate : 'short' }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column\r\n                    id=\"updated-at\"\r\n                    [heading]=\"'common.updated-at' | translate\"\r\n                    [hiddenByDefault]=\"true\"\r\n                >\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.updatedAt | localeDate : 'short' }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n                    <ng-template let-line=\"item\">\r\n                        <div class=\"image-placeholder\">\r\n                            <img\r\n                                *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\r\n                                [src]=\"asset | assetPreview : 'tiny'\"\r\n                            />\r\n                            <ng-template #imagePlaceholder>\r\n                                <div class=\"placeholder\">\r\n                                    <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                                </div>\r\n                            </ng-template>\r\n                        </div>\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column\r\n                    id=\"product-name\"\r\n                    [heading]=\"'order.product-name' | translate\"\r\n                    [optional]=\"false\"\r\n                >\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.productVariant.name }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column id=\"product-sku\" [heading]=\"'order.product-sku' | translate\">\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.productVariant.sku }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column id=\"unit-price\" [heading]=\"'order.unit-price' | translate\">\r\n                    <ng-template let-line=\"item\">\r\n                        <div class=\"text-center\">\r\n                            <div>{{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}</div>\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ line.unitPrice | localeCurrency : order.currencyCode }}\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\" [optional]=\"false\">\r\n                    <ng-template let-line=\"item\">\r\n                        <input\r\n                            type=\"number\"\r\n                            class=\"draft-qty mr-1\"\r\n                            min=\"0\"\r\n                            [value]=\"getInitialLineQuantity(line.id)\"\r\n                            (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n                        />\r\n                        <button\r\n                            class=\"button-small\"\r\n                            *ngIf=\"isAddedLine(line)\"\r\n                            (click)=\"removeAddedItem(line.id)\"\r\n                        >\r\n                            <clr-icon shape=\"trash\"></clr-icon>\r\n                        </button>\r\n                        <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                        <vdr-line-fulfillment\r\n                            [line]=\"line\"\r\n                            [allOrderFulfillments]=\"order.fulfillments\"\r\n                            [orderState]=\"order.state\"\r\n                        ></vdr-line-fulfillment>\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column\r\n                    *ngFor=\"let customField of orderLineCustomFields\"\r\n                    [id]=\"customField.name\"\r\n                    [heading]=\"customField | customFieldLabel : (uiLanguage$ | async)\"\r\n                    [hiddenByDefault]=\"true\"\r\n                >\r\n                    <ng-template let-line=\"item\" let-index=\"index\">\r\n                        <vdr-custom-field-control\r\n                            [compact]=\"true\"\r\n                            [entityName]=\"'OrderLine'\"\r\n                            [customField]=\"customField\"\r\n                            [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.at(index)\"\r\n                        />\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n            </vdr-data-table-2>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.add-item-to-order' | translate\">\r\n            <vdr-product-variant-selector class=\"mb-4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n            </vdr-product-variant-selector>\r\n            <div class=\"flex\">\r\n                <div>\r\n                    <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb-4\">\r\n                        <img\r\n                            *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n                            [src]=\"asset | assetPreview : 'tiny'\"\r\n                            class=\"mr-4 add-item-thumb\"\r\n                        />\r\n                        <div>\r\n                            <strong class=\"mr-4\">{{ addItemSelectedVariant.productVariantName }}</strong>\r\n                            <small>{{ addItemSelectedVariant.sku }}</small>\r\n                            <div>\r\n                                {{\r\n                                    getSelectedItemPrice(addItemSelectedVariant)\r\n                                        | localeCurrency : order.currencyCode\r\n                                }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"addItemSelectedVariant\">\r\n                        <vdr-tabbed-custom-fields\r\n                            entityName=\"Order\"\r\n                            [customFields]=\"orderLineCustomFields\"\r\n                            [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n                        ></vdr-tabbed-custom-fields>\r\n                    </div>\r\n                </div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button\r\n                        *ngIf=\"addItemSelectedVariant\"\r\n                        class=\"btn btn-secondary\"\r\n                        [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\r\n                        (click)=\"addItemToOrder(addItemSelectedVariant)\"\r\n                    >\r\n                        {{ 'order.add-item-to-order' | translate }}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.shipping' | translate\">\r\n            <div *ngFor=\"let shippingLine of order.shippingLines\" class=\"flex items-center\">\r\n                <ng-container *ngIf=\"getShippingLineDetails(shippingLine) as details\">\r\n                    <div>{{ details.name }}:</div>\r\n                    <div class=\"mx-1\">\r\n                        {{ details.price | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                    <button class=\"button-small\" (click)=\"setShippingMethod(shippingLine.id)\">\r\n                        {{ 'order.set-shipping-method' | translate }}\r\n                    </button>\r\n                </ng-container>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.add-surcharge' | translate\">\r\n            <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\r\n                        ><input id=\"description\" type=\"text\" formControlName=\"description\"\r\n                    /></vdr-form-field>\r\n                    <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\r\n                        ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\r\n                    /></vdr-form-field>\r\n                    <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\r\n                        <vdr-currency-input\r\n                            [currencyCode]=\"order.currencyCode\"\r\n                            id=\"price\"\r\n                            formControlName=\"price\"\r\n                        ></vdr-currency-input>\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"\r\n                            'catalog.price-includes-tax-at'\r\n                                | translate : { rate: surchargeForm.get('taxRate')?.value ?? 0 }\r\n                        \"\r\n                        for=\"priceIncludesTax\"\r\n                        ><input\r\n                            id=\"priceIncludesTax\"\r\n                            type=\"checkbox\"\r\n                            clrCheckbox\r\n                            formControlName=\"priceIncludesTax\"\r\n                    /></vdr-form-field>\r\n                    <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\r\n                        <vdr-affixed-input suffix=\"%\"\r\n                            ><input id=\"taxRate\" type=\"number\" min=\"0\" max=\"100\" formControlName=\"taxRate\"\r\n                        /></vdr-affixed-input>\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'order.tax-description' | translate\" for=\"taxDescription\"\r\n                        ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\r\n                    /></vdr-form-field>\r\n                </div>\r\n                <button\r\n                    class=\"btn btn-secondary mt-2\"\r\n                    [disabled]=\"\r\n                        surchargeForm.invalid ||\r\n                        surchargeForm.pristine ||\r\n                        surchargeForm.get('price')?.value === 0 ||\r\n                        !surchargeForm.get('description')?.value\r\n                    \"\r\n                >\r\n                    {{ 'order.add-surcharge' | translate }}\r\n                </button>\r\n            </form>\r\n        </vdr-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table img{border-radius:var(--border-radius-img)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}.order-table .draft-qty{max-width:48px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}.order-table .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .thumb img{width:50px;height:50px}.order-table .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.order-table .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}.add-item-thumb{max-width:50px}.no-modifications{color:var(--color-grey-400)}.summary-controls{border-top:1px solid var(--color-weight-200);margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 1)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i5.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "component", type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { 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: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "component", type: i6.LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: i7.LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: i8.CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: ["couponCodes", "control"], outputs: ["addCouponCode", "removeCouponCode"] }, { kind: "component", type: i9.OrderModificationSummaryComponent, selector: "vdr-order-modification-summary", inputs: ["orderSnapshot", "modifyOrderInput", "addedLines", "shippingAddressForm", "billingAddressForm", "updatedShippingMethods", "couponCodesControl"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.CustomFieldLabelPipe, name: "customFieldLabel" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OrderEditorComponent, decorators: [{
             type: Component,

package/esm2022/order/components/order-list/order-list.component.mjs CHANGED Viewed

@@ -146,7 +146,7 @@ export class OrderListComponent extends TypedBaseListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OrderListComponent, deps: [{ token: i1.ServerConfigService }, { token: i1.ChannelService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OrderListComponent, selector: "vdr-order-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"order-list\" />\r\n            <ng-container *ngIf=\"canCreateDraftOrder\">\r\n                <a class=\"btn\" *vdrIfPermissions=\"['CreateOrder']\" [routerLink]=\"['./draft/create']\">\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ 'catalog.create-draft-order' | translate }}\r\n                </a>\r\n            </ng-container>\r\n            <vdr-action-bar-dropdown-menu locationId=\"order-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"order-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'order.search-by-order-filters' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-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]=\"order.state === 'Draft' ? ['./draft', order.id] : ['./', 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.customer' | translate\" id=\"customer\" [sort]=\"sorts.get('customerLastName')\">\r\n        <ng-template let-order=\"item\">\r\n            <vdr-customer-label\r\n                [customer]=\"order.customer\"\r\n                (click)=\"$event.stopPropagation()\"\r\n            ></vdr-customer-label>\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 *ngIf=\"order.type === OrderType.Regular\">{{ 'order.order-type-regular' | translate }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"order.type === OrderType.Aggregate\">{{ 'order.order-type-aggregate' | translate }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"order.type === OrderType.Seller\">{{ 'order.order-type-seller' | translate }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\" [sort]=\"sorts.get('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\" [sort]=\"sorts.get('totalWithTax')\">\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\" [sort]=\"sorts.get('orderPlacedAt')\">\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-column [heading]=\"'order.shipping' | translate\" id=\"shipping\">\r\n        <ng-template let-order=\"item\">\r\n            {{ getShippingNames(order) }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".search-form{display:flex;flex-direction:column;align-items:baseline;width:100%;max-width:100vw;margin-bottom:6px}.filter-presets{max-width:90vw;overflow-x:auto}.search-input{margin-top:6px;min-width:300px}.custom-filters{overflow:hidden;max-height:0;padding-bottom:6px}.custom-filters.expanded{max-height:initial}.custom-filters>form{display:flex;flex-direction:column;align-items:center}.custom-filters>form>div{width:100%}ng-select{flex:1;min-width:200px;height:36px}ng-select ::ng-deep .ng-select-container{height:36px}\n"], dependencies: [{ kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OrderListComponent, selector: "vdr-order-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"order-list\" />\r\n            <ng-container *ngIf=\"canCreateDraftOrder\">\r\n                <a class=\"btn\" *vdrIfPermissions=\"['CreateOrder']\" [routerLink]=\"['./draft/create']\">\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ 'catalog.create-draft-order' | translate }}\r\n                </a>\r\n            </ng-container>\r\n            <vdr-action-bar-dropdown-menu locationId=\"order-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"order-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'order.search-by-order-filters' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-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]=\"order.state === 'Draft' ? ['./draft', order.id] : ['./', 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.customer' | translate\" id=\"customer\" [sort]=\"sorts.get('customerLastName')\">\r\n        <ng-template let-order=\"item\">\r\n            <vdr-customer-label\r\n                [customer]=\"order.customer\"\r\n                (click)=\"$event.stopPropagation()\"\r\n            ></vdr-customer-label>\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 *ngIf=\"order.type === OrderType.Regular\">{{ 'order.order-type-regular' | translate }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"order.type === OrderType.Aggregate\">{{ 'order.order-type-aggregate' | translate }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"order.type === OrderType.Seller\">{{ 'order.order-type-seller' | translate }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\" [sort]=\"sorts.get('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\" [sort]=\"sorts.get('totalWithTax')\">\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\" [sort]=\"sorts.get('orderPlacedAt')\">\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-column [heading]=\"'order.shipping' | translate\" id=\"shipping\">\r\n        <ng-template let-order=\"item\">\r\n            {{ getShippingNames(order) }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".search-form{display:flex;flex-direction:column;align-items:baseline;width:100%;max-width:100vw;margin-bottom:6px}.filter-presets{max-width:90vw;overflow-x:auto}.search-input{margin-top:6px;min-width:300px}.custom-filters{overflow:hidden;max-height:0;padding-bottom:6px}.custom-filters.expanded{max-height:initial}.custom-filters>form{display:flex;flex-direction:column;align-items:center}.custom-filters>form>div{width:100%}ng-select{flex:1;min-width:200px;height:36px}ng-select ::ng-deep .ng-select-container{height:36px}\n"], dependencies: [{ kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OrderListComponent, decorators: [{
             type: Component,