npm - @vendure/admin-ui - Versions diffs - 3.1.0-next.2 → 3.1.0-next.4 - Mend

@vendure/admin-ui 3.1.0-next.2 → 3.1.0-next.4

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

package/fesm2022/vendure-admin-ui-order.mjs CHANGED Viewed

@@ -11,7 +11,7 @@ import * as i2$1 from '@angular/common';
 import * as i4 from '@ngx-translate/core';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import * as i3 from '@clr/angular';
-import { Subject, concat, of, EMPTY, combineLatest, BehaviorSubject, forkJoin } from 'rxjs';
+import { Subject, concat, of, EMPTY, forkJoin, combineLatest, BehaviorSubject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap, map, startWith, tap, catchError, retryWhen, delay, take, mapTo, takeUntil, shareReplay } from 'rxjs/operators';
 import { pick } from '@vendure/common/lib/pick';
 import * as i1$1 from '@angular/router';
@@ -648,19 +648,6 @@ class OrderDataTableComponent extends DataTable2Component {
     get allColumns() {
         return [...(this.columns ?? []), ...(this.customFieldColumns ?? []), ...(this.totalColumns ?? [])];
     }
-    get sortedColumns() {
-        const columns = this.allColumns;
-        const dataTableConfig = this.getDataTableConfig();
-        for (const [id, index] of Object.entries(dataTableConfig[this.id].order)) {
-            const column = columns.find(c => c.id === id);
-            const currentIndex = columns.findIndex(c => c.id === id);
-            if (currentIndex !== -1 && column) {
-                columns.splice(currentIndex, 1);
-                columns.splice(index, 0, column);
-            }
-        }
-        return columns;
-    }
     getPromotionLink(promotion) {
         const id = promotion.adjustmentSource.split(':')[1];
         return ['/marketing', 'promotions', id];
@@ -886,6 +873,22 @@ class DraftOrderDetailComponent extends TypedBaseDetailComponent {
             if (this.hasId(result)) {
                 this.dataService.order
                     .setCustomerForDraftOrder(this.id, { customerId: result.id })
+                    .pipe(switchMap(() => {
+                    return this.dataService.query(GetCustomerAddressesDocument, {
+                        customerId: result.id,
+                    }).single$;
+                }), switchMap(({ customer }) => {
+                    const defaultShippingAddress = customer?.addresses?.find(addr => addr.defaultShippingAddress);
+                    const defaultBillingAddress = customer?.addresses?.find(addr => addr.defaultBillingAddress);
+                    return forkJoin([
+                        defaultShippingAddress
+                            ? this.dataService.order.setDraftOrderShippingAddress(this.id, this.mapToAddressInput(defaultShippingAddress))
+                            : this.dataService.order.unsetDraftOrderShippingAddress(this.id),
+                        defaultBillingAddress
+                            ? this.dataService.order.setDraftOrderBillingAddress(this.id, this.mapToAddressInput(defaultBillingAddress))
+                            : this.dataService.order.unsetDraftOrderBillingAddress(this.id),
+                    ]);
+                }))
                     .subscribe();
             }
             else if (result) {
@@ -894,6 +897,21 @@ class DraftOrderDetailComponent extends TypedBaseDetailComponent {
             }
         });
     }
+    mapToAddressInput(address) {
+        return {
+            fullName: address.fullName,
+            company: address.company,
+            streetLine1: address.streetLine1,
+            streetLine2: address.streetLine2,
+            city: address.city,
+            province: address.province,
+            postalCode: address.postalCode,
+            countryCode: address.country.code,
+            phoneNumber: address.phoneNumber,
+            defaultShippingAddress: address.defaultShippingAddress,
+            defaultBillingAddress: address.defaultBillingAddress,
+        };
+    }
     setShippingAddress() {
         this.entity$
             .pipe(take(1), switchMap(order => this.modalService.fromComponent(SelectAddressDialogComponent, {
@@ -1601,11 +1619,11 @@ class RefundOrderDialogComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RefundOrderDialogComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: RefundOrderDialogComponent, selector: "vdr-refund-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.refund-and-cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"refund-wrapper\">\r\n    <vdr-data-table-2 id=\"refund-order\" [items]=\"order.lines\">\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 id=\"created-at\" [heading]=\"'common.created-at' | translate\" [hiddenByDefault]=\"true\">\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 id=\"updated-at\" [heading]=\"'common.updated-at' | translate\" [hiddenByDefault]=\"true\">\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 id=\"product-name\" [heading]=\"'order.product-name' | translate\" [optional]=\"false\">\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\" [hiddenByDefault]=\"true\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"prorated-unit-price\" [heading]=\"'order.prorated-unit-price' | translate\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n                <ng-container *ngIf=\"line.discounts as discounts\">\r\n                    <vdr-dropdown *ngIf=\"discounts.length\">\r\n                        <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                            <button class=\"icon-button\"><clr-icon shape=\"info\"></clr-icon></button>\r\n                        </div>\r\n                        <vdr-dropdown-menu>\r\n                            <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                {{ discount.description }}\r\n                                <div class=\"promotion-amount\">\r\n                                    {{\r\n                                        discount.amount / 100 / line.quantity\r\n                                            | number : '1.0-2'\r\n                                            | currency : order.currencyCode\r\n                                    }}\r\n                                </div>\r\n                            </div>\r\n                        </vdr-dropdown-menu>\r\n                    </vdr-dropdown>\r\n                </ng-container>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.quantity }}\r\n                <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"refund-quantity\" [heading]=\"'order.refund' | translate\" [optional]=\"false\">\r\n            <ng-template let-line=\"item\">\r\n                <input\r\n                    *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                    [ngModel]=\"lineQuantities[line.id].quantity\"\r\n                    type=\"number\"\r\n                    [max]=\"line.quantity\"\r\n                    min=\"0\"\r\n                    (ngModelChange)=\"onRefundQuantityChange(line.id, $event)\"\r\n                />\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"cancel\" [heading]=\"'order.return-to-stock' | translate\" [optional]=\"false\">\r\n            <ng-template let-line=\"item\">\r\n                <div class=\"cancel-checkbox-wrapper\">\r\n                    <label class=\"flex center\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                            clrCheckbox\r\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n                            [(ngModel)]=\"lineQuantities[line.id].cancel\"\r\n                        />\r\n                        <span class=\"ml-1\">{{ 'order.return-to-stock' | translate }}</span></label\r\n                    >\r\n                </div>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n    </vdr-data-table-2>\r\n\r\n    <div class=\"refund-details mt-4\">\r\n        <div>\r\n            <vdr-card>\r\n                <label class=\"flex mb-2\" *ngFor=\"let shippingLine of order.shippingLines\">\r\n                    <input type=\"checkbox\" clrCheckbox (change)=\"toggleShippingRefund(shippingLine.id)\" />\r\n                    <div class=\"ml-1\">\r\n                        {{ 'order.refund-shipping' | translate }}\r\n                        <span>{{ shippingLine.shippingMethod.name }}:</span>\r\n                        <span class=\"ml-1\"\r\n                            >{{ shippingLine.discountedPriceWithTax | localeCurrency : order.currencyCode }}\r\n                        </span>\r\n                    </div></label\r\n                >\r\n                <vdr-form-field [label]=\"'order.refund-cancellation-reason' | translate\" class=\"mb-2\">\r\n                    <ng-select\r\n                        [items]=\"reasons\"\r\n                        bindLabel=\"name\"\r\n                        autofocus\r\n                        [placeholder]=\"'order.refund-cancellation-reason-required' | translate\"\r\n                        bindValue=\"id\"\r\n                        [addTag]=\"true\"\r\n                        [(ngModel)]=\"reason\"\r\n                    ></ng-select>\r\n                </vdr-form-field>\r\n                <vdr-form-field\r\n                    [label]=\"'order.refund-total' | translate\"\r\n                    [readOnlyToggle]=\"true\"\r\n                    (readOnlyToggleChange)=\"manuallySetRefundTotal = !$event\"\r\n                >\r\n                    <vdr-currency-input\r\n                        [readonly]=\"!manuallySetRefundTotal\"\r\n                        [currencyCode]=\"order.currencyCode\"\r\n                        [(ngModel)]=\"refundTotal\"\r\n                        (ngModelChange)=\"updateRefundTotal()\"\r\n                    ></vdr-currency-input>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n        </div>\r\n        <div class=\"\">\r\n            <vdr-payment-for-refund-selector\r\n                [refundablePayments]=\"refundablePayments\"\r\n                (paymentSelected)=\"onPaymentSelected($event.payment, $event.selected)\"\r\n                [order]=\"order\"\r\n            ></vdr-payment-for-refund-selector>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <div>\r\n        <div class=\"errors\">\r\n            <clr-alert\r\n                *ngIf=\"refundTotal < 0 || totalRefundableAmount < refundTotal\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{\r\n                        'order.refund-total-error'\r\n                            | translate\r\n                                : {\r\n                                      min: 0 | currency : order.currencyCode,\r\n                                      max: totalRefundableAmount | localeCurrency : order.currencyCode\r\n                                  }\r\n                    }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n            <clr-alert\r\n                *ngIf=\"amountToRefundTotal < refundTotal || refundTotal < amountToRefundTotal\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{ 'order.refund-total-warning' | translate }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n            <clr-alert\r\n                *ngIf=\"amountToRefundTotal && !reason\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{ 'order.refund-cancellation-reason-required' | translate }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n        </div>\r\n        <div class=\"modal-buttons\">\r\n            <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n            <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n                {{\r\n                    'order.refund-with-amount'\r\n                        | translate : { amount: amountToRefundTotal | localeCurrency : order.currencyCode }\r\n                }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}::ng-deep .refund-wrapper .table-wrapper{max-width:initial!important}.quantity-col{background-color:var(--color-warning-100)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;flex-direction:column;padding-bottom:var(--space-unit);gap:calc(var(--space-unit) * 2);justify-content:space-between}@media screen and (min-width: 992px){.refund-details{flex-direction:row}}.refund-details vdr-card.unselected{opacity:.8}.refund-details>*{flex:1}.errors{display:flex;justify-content:flex-end;gap:calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) 0}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-inline-start:12px}vdr-card.faded{opacity:.8}.modal-buttons{display:flex;justify-content:flex-end;gap:.6rem;gap:var(--clr-modal-footer-gap, .6rem)}\n"], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i3.ClrAlertItem, selector: "clr-alert-item" }, { 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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: PaymentForRefundSelectorComponent, selector: "vdr-payment-for-refund-selector", inputs: ["refundablePayments", "order"], outputs: ["paymentSelected"] }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { 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: RefundOrderDialogComponent, selector: "vdr-refund-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.refund-and-cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"refund-wrapper\">\r\n    <vdr-data-table-2 id=\"refund-order\" [items]=\"order.lines\">\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 id=\"created-at\" [heading]=\"'common.created-at' | translate\" [hiddenByDefault]=\"true\">\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 id=\"updated-at\" [heading]=\"'common.updated-at' | translate\" [hiddenByDefault]=\"true\">\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 id=\"product-name\" [heading]=\"'order.product-name' | translate\" [optional]=\"false\">\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\" [hiddenByDefault]=\"true\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"prorated-unit-price\" [heading]=\"'order.prorated-unit-price' | translate\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.proratedUnitPriceWithTax | localeCurrency : order.currencyCode }}\r\n                <ng-container *ngIf=\"line.discounts as discounts\">\r\n                    <vdr-dropdown *ngIf=\"discounts.length\">\r\n                        <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                            <button class=\"icon-button\"><clr-icon shape=\"info\"></clr-icon></button>\r\n                        </div>\r\n                        <vdr-dropdown-menu>\r\n                            <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                {{ discount.description }}\r\n                                <div class=\"promotion-amount\">\r\n                                    {{\r\n                                        discount.amount / 100 / line.quantity\r\n                                            | number : '1.0-2'\r\n                                            | currency : order.currencyCode\r\n                                    }}\r\n                                </div>\r\n                            </div>\r\n                        </vdr-dropdown-menu>\r\n                    </vdr-dropdown>\r\n                </ng-container>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.quantity }}\r\n                <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"refund-quantity\" [heading]=\"'order.refund' | translate\" [optional]=\"false\">\r\n            <ng-template let-line=\"item\">\r\n                <input\r\n                    *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                    [ngModel]=\"lineQuantities[line.id].quantity\"\r\n                    type=\"number\"\r\n                    [max]=\"line.quantity\"\r\n                    min=\"0\"\r\n                    (ngModelChange)=\"onRefundQuantityChange(line.id, $event)\"\r\n                />\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"cancel\" [heading]=\"'order.return-to-stock' | translate\" [optional]=\"false\">\r\n            <ng-template let-line=\"item\">\r\n                <div class=\"cancel-checkbox-wrapper\">\r\n                    <label class=\"flex center\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                            clrCheckbox\r\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n                            [(ngModel)]=\"lineQuantities[line.id].cancel\"\r\n                        />\r\n                        <span class=\"ml-1\">{{ 'order.return-to-stock' | translate }}</span></label\r\n                    >\r\n                </div>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n    </vdr-data-table-2>\r\n\r\n    <div class=\"refund-details mt-4\">\r\n        <div>\r\n            <vdr-card>\r\n                <label class=\"flex mb-2\" *ngFor=\"let shippingLine of order.shippingLines\">\r\n                    <input type=\"checkbox\" clrCheckbox (change)=\"toggleShippingRefund(shippingLine.id)\" />\r\n                    <div class=\"ml-1\">\r\n                        {{ 'order.refund-shipping' | translate }}\r\n                        <span>{{ shippingLine.shippingMethod.name }}:</span>\r\n                        <span class=\"ml-1\"\r\n                            >{{ shippingLine.discountedPriceWithTax | localeCurrency : order.currencyCode }}\r\n                        </span>\r\n                    </div></label\r\n                >\r\n                <vdr-form-field [label]=\"'order.refund-cancellation-reason' | translate\" class=\"mb-2\">\r\n                    <ng-select\r\n                        [items]=\"reasons\"\r\n                        bindLabel=\"name\"\r\n                        autofocus\r\n                        [placeholder]=\"'order.refund-cancellation-reason-required' | translate\"\r\n                        bindValue=\"id\"\r\n                        [addTag]=\"true\"\r\n                        [(ngModel)]=\"reason\"\r\n                    ></ng-select>\r\n                </vdr-form-field>\r\n                <vdr-form-field\r\n                    [label]=\"'order.refund-total' | translate\"\r\n                    [readOnlyToggle]=\"true\"\r\n                    (readOnlyToggleChange)=\"manuallySetRefundTotal = !$event\"\r\n                >\r\n                    <vdr-currency-input\r\n                        [readonly]=\"!manuallySetRefundTotal\"\r\n                        [currencyCode]=\"order.currencyCode\"\r\n                        [(ngModel)]=\"refundTotal\"\r\n                        (ngModelChange)=\"updateRefundTotal()\"\r\n                    ></vdr-currency-input>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n        </div>\r\n        <div class=\"\">\r\n            <vdr-payment-for-refund-selector\r\n                [refundablePayments]=\"refundablePayments\"\r\n                (paymentSelected)=\"onPaymentSelected($event.payment, $event.selected)\"\r\n                [order]=\"order\"\r\n            ></vdr-payment-for-refund-selector>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <div>\r\n        <div class=\"errors\">\r\n            <clr-alert\r\n                *ngIf=\"refundTotal < 0 || totalRefundableAmount < refundTotal\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{\r\n                        'order.refund-total-error'\r\n                            | translate\r\n                                : {\r\n                                      min: 0 | currency : order.currencyCode,\r\n                                      max: totalRefundableAmount | localeCurrency : order.currencyCode\r\n                                  }\r\n                    }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n            <clr-alert\r\n                *ngIf=\"amountToRefundTotal < refundTotal || refundTotal < amountToRefundTotal\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{ 'order.refund-total-warning' | translate }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n            <clr-alert\r\n                *ngIf=\"amountToRefundTotal && !reason\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{ 'order.refund-cancellation-reason-required' | translate }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n        </div>\r\n        <div class=\"modal-buttons\">\r\n            <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n            <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n                {{\r\n                    'order.refund-with-amount'\r\n                        | translate : { amount: amountToRefundTotal | localeCurrency : order.currencyCode }\r\n                }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}::ng-deep .refund-wrapper .table-wrapper{max-width:initial!important}.quantity-col{background-color:var(--color-warning-100)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;flex-direction:column;padding-bottom:var(--space-unit);gap:calc(var(--space-unit) * 2);justify-content:space-between}@media screen and (min-width: 992px){.refund-details{flex-direction:row}}.refund-details vdr-card.unselected{opacity:.8}.refund-details>*{flex:1}.errors{display:flex;justify-content:flex-end;gap:calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) 0}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-inline-start:12px}vdr-card.faded{opacity:.8}.modal-buttons{display:flex;justify-content:flex-end;gap:.6rem;gap:var(--clr-modal-footer-gap, .6rem)}\n"], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i3.ClrAlertItem, selector: "clr-alert-item" }, { 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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "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.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: PaymentForRefundSelectorComponent, selector: "vdr-payment-for-refund-selector", inputs: ["refundablePayments", "order"], outputs: ["paymentSelected"] }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { 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: RefundOrderDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-refund-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.refund-and-cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"refund-wrapper\">\r\n    <vdr-data-table-2 id=\"refund-order\" [items]=\"order.lines\">\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 id=\"created-at\" [heading]=\"'common.created-at' | translate\" [hiddenByDefault]=\"true\">\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 id=\"updated-at\" [heading]=\"'common.updated-at' | translate\" [hiddenByDefault]=\"true\">\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 id=\"product-name\" [heading]=\"'order.product-name' | translate\" [optional]=\"false\">\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\" [hiddenByDefault]=\"true\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"prorated-unit-price\" [heading]=\"'order.prorated-unit-price' | translate\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n                <ng-container *ngIf=\"line.discounts as discounts\">\r\n                    <vdr-dropdown *ngIf=\"discounts.length\">\r\n                        <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                            <button class=\"icon-button\"><clr-icon shape=\"info\"></clr-icon></button>\r\n                        </div>\r\n                        <vdr-dropdown-menu>\r\n                            <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                {{ discount.description }}\r\n                                <div class=\"promotion-amount\">\r\n                                    {{\r\n                                        discount.amount / 100 / line.quantity\r\n                                            | number : '1.0-2'\r\n                                            | currency : order.currencyCode\r\n                                    }}\r\n                                </div>\r\n                            </div>\r\n                        </vdr-dropdown-menu>\r\n                    </vdr-dropdown>\r\n                </ng-container>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.quantity }}\r\n                <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"refund-quantity\" [heading]=\"'order.refund' | translate\" [optional]=\"false\">\r\n            <ng-template let-line=\"item\">\r\n                <input\r\n                    *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                    [ngModel]=\"lineQuantities[line.id].quantity\"\r\n                    type=\"number\"\r\n                    [max]=\"line.quantity\"\r\n                    min=\"0\"\r\n                    (ngModelChange)=\"onRefundQuantityChange(line.id, $event)\"\r\n                />\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"cancel\" [heading]=\"'order.return-to-stock' | translate\" [optional]=\"false\">\r\n            <ng-template let-line=\"item\">\r\n                <div class=\"cancel-checkbox-wrapper\">\r\n                    <label class=\"flex center\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                            clrCheckbox\r\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n                            [(ngModel)]=\"lineQuantities[line.id].cancel\"\r\n                        />\r\n                        <span class=\"ml-1\">{{ 'order.return-to-stock' | translate }}</span></label\r\n                    >\r\n                </div>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n    </vdr-data-table-2>\r\n\r\n    <div class=\"refund-details mt-4\">\r\n        <div>\r\n            <vdr-card>\r\n                <label class=\"flex mb-2\" *ngFor=\"let shippingLine of order.shippingLines\">\r\n                    <input type=\"checkbox\" clrCheckbox (change)=\"toggleShippingRefund(shippingLine.id)\" />\r\n                    <div class=\"ml-1\">\r\n                        {{ 'order.refund-shipping' | translate }}\r\n                        <span>{{ shippingLine.shippingMethod.name }}:</span>\r\n                        <span class=\"ml-1\"\r\n                            >{{ shippingLine.discountedPriceWithTax | localeCurrency : order.currencyCode }}\r\n                        </span>\r\n                    </div></label\r\n                >\r\n                <vdr-form-field [label]=\"'order.refund-cancellation-reason' | translate\" class=\"mb-2\">\r\n                    <ng-select\r\n                        [items]=\"reasons\"\r\n                        bindLabel=\"name\"\r\n                        autofocus\r\n                        [placeholder]=\"'order.refund-cancellation-reason-required' | translate\"\r\n                        bindValue=\"id\"\r\n                        [addTag]=\"true\"\r\n                        [(ngModel)]=\"reason\"\r\n                    ></ng-select>\r\n                </vdr-form-field>\r\n                <vdr-form-field\r\n                    [label]=\"'order.refund-total' | translate\"\r\n                    [readOnlyToggle]=\"true\"\r\n                    (readOnlyToggleChange)=\"manuallySetRefundTotal = !$event\"\r\n                >\r\n                    <vdr-currency-input\r\n                        [readonly]=\"!manuallySetRefundTotal\"\r\n                        [currencyCode]=\"order.currencyCode\"\r\n                        [(ngModel)]=\"refundTotal\"\r\n                        (ngModelChange)=\"updateRefundTotal()\"\r\n                    ></vdr-currency-input>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n        </div>\r\n        <div class=\"\">\r\n            <vdr-payment-for-refund-selector\r\n                [refundablePayments]=\"refundablePayments\"\r\n                (paymentSelected)=\"onPaymentSelected($event.payment, $event.selected)\"\r\n                [order]=\"order\"\r\n            ></vdr-payment-for-refund-selector>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <div>\r\n        <div class=\"errors\">\r\n            <clr-alert\r\n                *ngIf=\"refundTotal < 0 || totalRefundableAmount < refundTotal\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{\r\n                        'order.refund-total-error'\r\n                            | translate\r\n                                : {\r\n                                      min: 0 | currency : order.currencyCode,\r\n                                      max: totalRefundableAmount | localeCurrency : order.currencyCode\r\n                                  }\r\n                    }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n            <clr-alert\r\n                *ngIf=\"amountToRefundTotal < refundTotal || refundTotal < amountToRefundTotal\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{ 'order.refund-total-warning' | translate }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n            <clr-alert\r\n                *ngIf=\"amountToRefundTotal && !reason\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{ 'order.refund-cancellation-reason-required' | translate }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n        </div>\r\n        <div class=\"modal-buttons\">\r\n            <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n            <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n                {{\r\n                    'order.refund-with-amount'\r\n                        | translate : { amount: amountToRefundTotal | localeCurrency : order.currencyCode }\r\n                }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}::ng-deep .refund-wrapper .table-wrapper{max-width:initial!important}.quantity-col{background-color:var(--color-warning-100)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;flex-direction:column;padding-bottom:var(--space-unit);gap:calc(var(--space-unit) * 2);justify-content:space-between}@media screen and (min-width: 992px){.refund-details{flex-direction:row}}.refund-details vdr-card.unselected{opacity:.8}.refund-details>*{flex:1}.errors{display:flex;justify-content:flex-end;gap:calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) 0}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-inline-start:12px}vdr-card.faded{opacity:.8}.modal-buttons{display:flex;justify-content:flex-end;gap:.6rem;gap:var(--clr-modal-footer-gap, .6rem)}\n"] }]
+            args: [{ selector: 'vdr-refund-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.refund-and-cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"refund-wrapper\">\r\n    <vdr-data-table-2 id=\"refund-order\" [items]=\"order.lines\">\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 id=\"created-at\" [heading]=\"'common.created-at' | translate\" [hiddenByDefault]=\"true\">\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 id=\"updated-at\" [heading]=\"'common.updated-at' | translate\" [hiddenByDefault]=\"true\">\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 id=\"product-name\" [heading]=\"'order.product-name' | translate\" [optional]=\"false\">\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\" [hiddenByDefault]=\"true\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"prorated-unit-price\" [heading]=\"'order.prorated-unit-price' | translate\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.proratedUnitPriceWithTax | localeCurrency : order.currencyCode }}\r\n                <ng-container *ngIf=\"line.discounts as discounts\">\r\n                    <vdr-dropdown *ngIf=\"discounts.length\">\r\n                        <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                            <button class=\"icon-button\"><clr-icon shape=\"info\"></clr-icon></button>\r\n                        </div>\r\n                        <vdr-dropdown-menu>\r\n                            <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                {{ discount.description }}\r\n                                <div class=\"promotion-amount\">\r\n                                    {{\r\n                                        discount.amount / 100 / line.quantity\r\n                                            | number : '1.0-2'\r\n                                            | currency : order.currencyCode\r\n                                    }}\r\n                                </div>\r\n                            </div>\r\n                        </vdr-dropdown-menu>\r\n                    </vdr-dropdown>\r\n                </ng-container>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.quantity }}\r\n                <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"refund-quantity\" [heading]=\"'order.refund' | translate\" [optional]=\"false\">\r\n            <ng-template let-line=\"item\">\r\n                <input\r\n                    *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                    [ngModel]=\"lineQuantities[line.id].quantity\"\r\n                    type=\"number\"\r\n                    [max]=\"line.quantity\"\r\n                    min=\"0\"\r\n                    (ngModelChange)=\"onRefundQuantityChange(line.id, $event)\"\r\n                />\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"cancel\" [heading]=\"'order.return-to-stock' | translate\" [optional]=\"false\">\r\n            <ng-template let-line=\"item\">\r\n                <div class=\"cancel-checkbox-wrapper\">\r\n                    <label class=\"flex center\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                            clrCheckbox\r\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n                            [(ngModel)]=\"lineQuantities[line.id].cancel\"\r\n                        />\r\n                        <span class=\"ml-1\">{{ 'order.return-to-stock' | translate }}</span></label\r\n                    >\r\n                </div>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n    </vdr-data-table-2>\r\n\r\n    <div class=\"refund-details mt-4\">\r\n        <div>\r\n            <vdr-card>\r\n                <label class=\"flex mb-2\" *ngFor=\"let shippingLine of order.shippingLines\">\r\n                    <input type=\"checkbox\" clrCheckbox (change)=\"toggleShippingRefund(shippingLine.id)\" />\r\n                    <div class=\"ml-1\">\r\n                        {{ 'order.refund-shipping' | translate }}\r\n                        <span>{{ shippingLine.shippingMethod.name }}:</span>\r\n                        <span class=\"ml-1\"\r\n                            >{{ shippingLine.discountedPriceWithTax | localeCurrency : order.currencyCode }}\r\n                        </span>\r\n                    </div></label\r\n                >\r\n                <vdr-form-field [label]=\"'order.refund-cancellation-reason' | translate\" class=\"mb-2\">\r\n                    <ng-select\r\n                        [items]=\"reasons\"\r\n                        bindLabel=\"name\"\r\n                        autofocus\r\n                        [placeholder]=\"'order.refund-cancellation-reason-required' | translate\"\r\n                        bindValue=\"id\"\r\n                        [addTag]=\"true\"\r\n                        [(ngModel)]=\"reason\"\r\n                    ></ng-select>\r\n                </vdr-form-field>\r\n                <vdr-form-field\r\n                    [label]=\"'order.refund-total' | translate\"\r\n                    [readOnlyToggle]=\"true\"\r\n                    (readOnlyToggleChange)=\"manuallySetRefundTotal = !$event\"\r\n                >\r\n                    <vdr-currency-input\r\n                        [readonly]=\"!manuallySetRefundTotal\"\r\n                        [currencyCode]=\"order.currencyCode\"\r\n                        [(ngModel)]=\"refundTotal\"\r\n                        (ngModelChange)=\"updateRefundTotal()\"\r\n                    ></vdr-currency-input>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n        </div>\r\n        <div class=\"\">\r\n            <vdr-payment-for-refund-selector\r\n                [refundablePayments]=\"refundablePayments\"\r\n                (paymentSelected)=\"onPaymentSelected($event.payment, $event.selected)\"\r\n                [order]=\"order\"\r\n            ></vdr-payment-for-refund-selector>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <div>\r\n        <div class=\"errors\">\r\n            <clr-alert\r\n                *ngIf=\"refundTotal < 0 || totalRefundableAmount < refundTotal\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{\r\n                        'order.refund-total-error'\r\n                            | translate\r\n                                : {\r\n                                      min: 0 | currency : order.currencyCode,\r\n                                      max: totalRefundableAmount | localeCurrency : order.currencyCode\r\n                                  }\r\n                    }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n            <clr-alert\r\n                *ngIf=\"amountToRefundTotal < refundTotal || refundTotal < amountToRefundTotal\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{ 'order.refund-total-warning' | translate }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n            <clr-alert\r\n                *ngIf=\"amountToRefundTotal && !reason\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{ 'order.refund-cancellation-reason-required' | translate }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n        </div>\r\n        <div class=\"modal-buttons\">\r\n            <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n            <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n                {{\r\n                    'order.refund-with-amount'\r\n                        | translate : { amount: amountToRefundTotal | localeCurrency : order.currencyCode }\r\n                }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}::ng-deep .refund-wrapper .table-wrapper{max-width:initial!important}.quantity-col{background-color:var(--color-warning-100)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;flex-direction:column;padding-bottom:var(--space-unit);gap:calc(var(--space-unit) * 2);justify-content:space-between}@media screen and (min-width: 992px){.refund-details{flex-direction:row}}.refund-details vdr-card.unselected{opacity:.8}.refund-details>*{flex:1}.errors{display:flex;justify-content:flex-end;gap:calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) 0}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-inline-start:12px}vdr-card.faded{opacity:.8}.modal-buttons{display:flex;justify-content:flex-end;gap:.6rem;gap:var(--clr-modal-footer-gap, .6rem)}\n"] }]
         }], ctorParameters: () => [{ type: i1.I18nService }] });
 class SettleRefundDialogComponent {
@@ -3182,7 +3200,7 @@ 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: 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 class=\"form-grid\" *ngIf=\"addItemSelectedVariant\">\r\n                        <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                            <vdr-custom-field-control\r\n                                [readonly]=\"!addItemSelectedVariant\"\r\n                                [customField]=\"customField\"\r\n                                [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n                                entityName=\"OrderLine\"\r\n                                [compact]=\"true\"\r\n                            ></vdr-custom-field-control>\r\n                        </ng-container>\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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.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.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.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: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: ["couponCodes", "control"], outputs: ["addCouponCode", "removeCouponCode"] }, { kind: "component", type: OrderModificationSummaryComponent, selector: "vdr-order-modification-summary", inputs: ["orderSnapshot", "modifyOrderInput", "addedLines", "shippingAddressForm", "billingAddressForm", "updatedShippingMethods", "couponCodesControl"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.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 class=\"form-grid\" *ngIf=\"addItemSelectedVariant\">\r\n                        <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                            <vdr-custom-field-control\r\n                                [readonly]=\"!addItemSelectedVariant\"\r\n                                [customField]=\"customField\"\r\n                                [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n                                entityName=\"OrderLine\"\r\n                                [compact]=\"true\"\r\n                            ></vdr-custom-field-control>\r\n                        </ng-container>\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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.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.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: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: ["couponCodes", "control"], outputs: ["addCouponCode", "removeCouponCode"] }, { kind: "component", type: OrderModificationSummaryComponent, selector: "vdr-order-modification-summary", inputs: ["orderSnapshot", "modifyOrderInput", "addedLines", "shippingAddressForm", "billingAddressForm", "updatedShippingMethods", "couponCodesControl"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.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,
@@ -3194,6 +3212,7 @@ class OrderListComponent extends TypedBaseListComponent {
         super();
         this.serverConfigService = serverConfigService;
         this.channelService = channelService;
+        this.dataTableListId = 'order-list';
         this.orderStates = this.serverConfigService.getOrderProcessStates().map(item => item.name);
         this.OrderType = OrderType;
         this.customFields = this.getCustomFieldConfig('Order');
@@ -3326,11 +3345,11 @@ 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=\"order-list\"\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>\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: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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"] }, { 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: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.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: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.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,
-            args: [{ selector: 'vdr-order-list', changeDetection: ChangeDetectionStrategy.OnPush, 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=\"order-list\"\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>\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"] }]
+            args: [{ selector: 'vdr-order-list', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
         }], ctorParameters: () => [{ type: i1.ServerConfigService }, { type: i1.ChannelService }] });
 class RefundDetailComponent {
@@ -3413,7 +3432,6 @@ const createRoutes = (pageService) => [
     {
         path: '',
         component: PageComponent,
-        pathMatch: 'full',
         data: {
             locationId: 'order-list',
             breadcrumb: marker('breadcrumb.orders'),