npm - @vendure/admin-ui - Versions diffs - 2.2.0-next.0 → 2.2.0-next.2 - Mend

@vendure/admin-ui 2.2.0-next.0 → 2.2.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (233) hide show

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

@@ -1,26 +1,43 @@
+import * as i2 from '@angular/forms';
+import { FormControl, Validators, UntypedFormGroup, UntypedFormControl, FormGroup, UntypedFormArray } from '@angular/forms';
+import { summate, notNullOrUndefined, isObject, assertNever } from '@vendure/common/lib/shared-utils';
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, EventEmitter, Input, Output, Injectable, ContentChildren, ViewChildren, HostBinding, ViewContainerRef, ViewChild, NgModule } from '@angular/core';
-import * as i2 from '@angular/forms';
-import { UntypedFormGroup, UntypedFormControl, Validators, FormGroup, UntypedFormArray } from '@angular/forms';
 import * as i1 from '@vendure/admin-ui/core';
-import { GetAddManualPaymentMethodListDocument, getAppConfig, GetCouponCodeSelectorPromotionListDocument, GetCustomerAddressesDocument, HistoryEntryType, SortOrder, DataTable2ColumnComponent, DataTable2Component, AdjustmentType, TypedBaseDetailComponent, DeletionResult, configurableDefinitionToInstance, GlobalFlag, configurableOperationValueIsValid, toConfigurableOperationInput, ORDER_DETAIL_FRAGMENT, getCustomFieldsDefaults, EditNoteDialogComponent, BaseDetailComponent, transformRelationCustomFieldInputs, TypedBaseListComponent, OrderType, getOrderStateTranslationToken, GetOrderListDocument, LogicalOperator, ADDRESS_FRAGMENT, PageComponent, detailComponentWithResolver, OrderDetailQueryDocument, SharedModule, PageService } from '@vendure/admin-ui/core';
+import { GetAddManualPaymentMethodListDocument, getAppConfig, GetCouponCodeSelectorPromotionListDocument, GetCustomerAddressesDocument, HistoryEntryType, SortOrder, DataTable2ColumnComponent, DataTable2Component, AdjustmentType, TypedBaseDetailComponent, DeletionResult, configurableDefinitionToInstance, GlobalFlag, configurableOperationValueIsValid, toConfigurableOperationInput, ORDER_DETAIL_FRAGMENT, getCustomFieldsDefaults, SetOrderCustomerDocument, EditNoteDialogComponent, transformRelationCustomFieldInputs, TypedBaseListComponent, OrderType, getOrderStateTranslationToken, GetOrderListDocument, LogicalOperator, ADDRESS_FRAGMENT, PageComponent, detailComponentWithResolver, OrderDetailQueryDocument, SharedModule, PageService } from '@vendure/admin-ui/core';
 import { gql } from 'apollo-angular';
-import * as i3 from '@ng-select/ng-select';
+import * as i5 from '@ng-select/ng-select';
 import * as i2$1 from '@angular/common';
 import * as i4 from '@ngx-translate/core';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
-import * as i1$1 from '@clr/angular';
-import { Subject, concat, of, EMPTY, combineLatest, BehaviorSubject } from 'rxjs';
-import { debounceTime, distinctUntilChanged, switchMap, map, startWith, tap, catchError, retryWhen, delay, take, mapTo, takeUntil, shareReplay, filter } from 'rxjs/operators';
+import * as i3 from '@clr/angular';
+import { Subject, concat, of, EMPTY, combineLatest, BehaviorSubject, forkJoin } 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$2 from '@angular/router';
-import { ActivationStart, ROUTES, RouterModule } from '@angular/router';
-import { notNullOrUndefined, isObject, summate, assertNever } from '@vendure/common/lib/shared-utils';
+import * as i1$1 from '@angular/router';
+import { ROUTES, RouterModule } from '@angular/router';
 import * as i3$1 from '@angular/cdk/bidi';
-import * as i5 from 'ngx-pagination';
+import * as i5$1 from 'ngx-pagination';
 import { DEFAULT_CHANNEL_CODE } from '@vendure/common/lib/shared-constants';
 import { simpleDeepClone } from '@vendure/common/lib/simple-deep-clone';
+function getRefundablePayments(payments) {
+    const settledPayments = (payments || []).filter(p => p.state === 'Settled');
+    return settledPayments.map((payment, index) => {
+        const refundableAmount = payment.amount -
+            summate(payment.refunds.filter(r => r.state !== 'Failed'), 'total');
+        return {
+            ...payment,
+            refundableAmount,
+            amountToRefundControl: new FormControl(0, {
+                nonNullable: true,
+                validators: [Validators.min(0), Validators.max(refundableAmount)],
+            }),
+            selected: index === 0,
+        };
+    });
+}
 const GET_PAYMENT_METHODS_FOR_MANUAL_ADD = gql `
     query GetAddManualPaymentMethodList($options: PaymentMethodListOptions!) {
         paymentMethods(options: $options) {
@@ -65,7 +82,7 @@ class AddManualPaymentDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AddManualPaymentDialogComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AddManualPaymentDialogComponent, selector: "vdr-add-manual-payment-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.add-payment-to-order' | translate }}</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'order.payment-method' | translate\" for=\"method\">\r\n        <ng-select\r\n            [items]=\"paymentMethods$ | async\"\r\n            bindLabel=\"code\"\r\n            appendTo=\"body\"\r\n            autofocus\r\n            bindValue=\"code\"\r\n            [addTag]=\"true\"\r\n            formControlName=\"method\"\r\n        ></ng-select>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'order.transaction-id' | translate\" for=\"transactionId\">\r\n        <input id=\"transactionId\" type=\"text\" formControlName=\"transactionId\" />\r\n    </vdr-form-field>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"submit()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || form.pristine\">\r\n        {{ 'order.add-payment' | translate }}  ({{ outstandingAmount | localeCurrency: currencyCode }})\r\n    </button>\r\n</ng-template>\r\n", styles: [".ng-select{min-width:100%}\n"], dependencies: [{ 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: i3.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.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AddManualPaymentDialogComponent, selector: "vdr-add-manual-payment-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.add-payment-to-order' | translate }}</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'order.payment-method' | translate\" for=\"method\">\r\n        <ng-select\r\n            [items]=\"paymentMethods$ | async\"\r\n            bindLabel=\"code\"\r\n            appendTo=\"body\"\r\n            autofocus\r\n            bindValue=\"code\"\r\n            [addTag]=\"true\"\r\n            formControlName=\"method\"\r\n        ></ng-select>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'order.transaction-id' | translate\" for=\"transactionId\">\r\n        <input id=\"transactionId\" type=\"text\" formControlName=\"transactionId\" />\r\n    </vdr-form-field>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"submit()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || form.pristine\">\r\n        {{ 'order.add-payment' | translate }}  ({{ outstandingAmount | localeCurrency: currencyCode }})\r\n    </button>\r\n</ng-template>\r\n", styles: [".ng-select{min-width:100%}\n"], dependencies: [{ 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: 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.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: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AddManualPaymentDialogComponent, decorators: [{
             type: Component,
@@ -135,7 +152,7 @@ class CancelOrderDialogComponent {
             .filter(l => 0 < l.quantity);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CancelOrderDialogComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CancelOrderDialogComponent, selector: "vdr-cancel-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-lines\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.is-disabled]=\"cancelAll\"\r\n                [class.is-cancelled]=\"line.quantity === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.quantity }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"line.quantity > 0 && !order.active; else nonEditable\"\r\n                        [(ngModel)]=\"lineQuantities[line.id]\"\r\n                        (input)=\"checkIfAllSelected()\"\r\n                        [disabled]=\"cancelAll\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                    />\r\n                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"cancellation-details\">\r\n        <ng-container *ngIf=\"order.active !== true\">\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"true\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-entire-order' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"false\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-specified-items' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n        </ng-container>\r\n        <label class=\"clr-control-label\">{{ 'order.cancellation-reason' | translate }}</label>\r\n        <ng-select\r\n            [items]=\"reasons\"\r\n            bindLabel=\"name\"\r\n            autofocus\r\n            bindValue=\"id\"\r\n            [addTag]=\"true\"\r\n            [(ngModel)]=\"reason\"\r\n        ></ng-select>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"!reason || (!order.active && selectionCount === 0)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        <ng-container *ngIf=\"!order.active\">\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-container>\r\n        <ng-container *ngIf=\"order.active\">\r\n            {{ 'order.cancel-order' | translate }}\r\n        </ng-container>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}@media screen and (min-width: 768px){.fulfillment-wrapper .cancellation-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .order-lines{flex:1;overflow-y:auto}.fulfillment-wrapper .order-lines table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}.fulfillment-wrapper .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.fulfillment-wrapper .is-disabled td,.fulfillment-wrapper .is-disabled td input{background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.ClrRadio, selector: "[clrRadio]" }, { kind: "component", type: i1$1.ClrRadioWrapper, selector: "clr-radio-wrapper" }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: i3.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: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CancelOrderDialogComponent, selector: "vdr-cancel-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-lines\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.is-disabled]=\"cancelAll\"\r\n                [class.is-cancelled]=\"line.quantity === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.quantity }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"line.quantity > 0 && !order.active; else nonEditable\"\r\n                        [(ngModel)]=\"lineQuantities[line.id]\"\r\n                        (input)=\"checkIfAllSelected()\"\r\n                        [disabled]=\"cancelAll\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                    />\r\n                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"cancellation-details\">\r\n        <ng-container *ngIf=\"order.active !== true\">\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"true\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-entire-order' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"false\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-specified-items' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n        </ng-container>\r\n        <label class=\"clr-control-label\">{{ 'order.cancellation-reason' | translate }}</label>\r\n        <ng-select\r\n            [items]=\"reasons\"\r\n            bindLabel=\"name\"\r\n            autofocus\r\n            bindValue=\"id\"\r\n            [addTag]=\"true\"\r\n            [(ngModel)]=\"reason\"\r\n        ></ng-select>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"!reason || (!order.active && selectionCount === 0)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        <ng-container *ngIf=\"!order.active\">\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-container>\r\n        <ng-container *ngIf=\"order.active\">\r\n            {{ 'order.cancel-order' | translate }}\r\n        </ng-container>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}@media screen and (min-width: 768px){.fulfillment-wrapper .cancellation-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .order-lines{flex:1;overflow-y:auto}.fulfillment-wrapper .order-lines table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}.fulfillment-wrapper .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.fulfillment-wrapper .is-disabled td,.fulfillment-wrapper .is-disabled td input{background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrRadio, selector: "[clrRadio]" }, { kind: "component", type: i3.ClrRadioWrapper, selector: "clr-radio-wrapper" }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: "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: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CancelOrderDialogComponent, decorators: [{
             type: Component,
@@ -178,11 +195,11 @@ class CouponCodeSelectorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CouponCodeSelectorComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: { couponCodes: "couponCodes", control: "control" }, outputs: { addCouponCode: "addCouponCode", removeCouponCode: "removeCouponCode" }, ngImport: i0, template: "<ng-select\r\n    [items]=\"availableCouponCodes$ | async\"\r\n    appendTo=\"body\"\r\n    bindLabel=\"code\"\r\n    bindValue=\"code\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"true\"\r\n    [hideSelected]=\"true\"\r\n    [minTermLength]=\"2\"\r\n    typeToSearchText=\"\"\r\n    [typeahead]=\"couponCodeInput$\"\r\n    [formControl]=\"control\"\r\n    (add)=\"addCouponCode.emit($event.code)\"\r\n    (remove)=\"removeCouponCode.emit($event.value?.code)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip>{{ item.code }}</vdr-chip>\r\n        {{ item.promotionName }}\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.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: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: { couponCodes: "couponCodes", control: "control" }, outputs: { addCouponCode: "addCouponCode", removeCouponCode: "removeCouponCode" }, ngImport: i0, template: "<ng-select\r\n    [items]=\"availableCouponCodes$ | async\"\r\n    appendTo=\"body\"\r\n    bindLabel=\"code\"\r\n    bindValue=\"code\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"true\"\r\n    [hideSelected]=\"true\"\r\n    [minTermLength]=\"2\"\r\n    typeToSearchText=\"\"\r\n    [typeahead]=\"couponCodeInput$\"\r\n    [formControl]=\"control\"\r\n    (add)=\"addCouponCode.emit($event.code)\"\r\n    (remove)=\"removeCouponCode.emit($event.value?.code)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <div class=\"flex items-center\">\r\n            <vdr-chip class=\"mr-1\">{{ item.code }}</vdr-chip>\r\n            <span>{{ item.promotionName }}</span>\r\n        </div>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CouponCodeSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-coupon-code-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-select\r\n    [items]=\"availableCouponCodes$ | async\"\r\n    appendTo=\"body\"\r\n    bindLabel=\"code\"\r\n    bindValue=\"code\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"true\"\r\n    [hideSelected]=\"true\"\r\n    [minTermLength]=\"2\"\r\n    typeToSearchText=\"\"\r\n    [typeahead]=\"couponCodeInput$\"\r\n    [formControl]=\"control\"\r\n    (add)=\"addCouponCode.emit($event.code)\"\r\n    (remove)=\"removeCouponCode.emit($event.value?.code)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip>{{ item.code }}</vdr-chip>\r\n        {{ item.promotionName }}\r\n    </ng-template>\r\n</ng-select>\r\n" }]
+            args: [{ selector: 'vdr-coupon-code-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-select\r\n    [items]=\"availableCouponCodes$ | async\"\r\n    appendTo=\"body\"\r\n    bindLabel=\"code\"\r\n    bindValue=\"code\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"true\"\r\n    [hideSelected]=\"true\"\r\n    [minTermLength]=\"2\"\r\n    typeToSearchText=\"\"\r\n    [typeahead]=\"couponCodeInput$\"\r\n    [formControl]=\"control\"\r\n    (add)=\"addCouponCode.emit($event.code)\"\r\n    (remove)=\"removeCouponCode.emit($event.value?.code)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <div class=\"flex items-center\">\r\n            <vdr-chip class=\"mr-1\">{{ item.code }}</vdr-chip>\r\n            <span>{{ item.promotionName }}</span>\r\n        </div>\r\n    </ng-template>\r\n</ng-select>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1.DataService }]; }, propDecorators: { couponCodes: [{
                 type: Input
             }], control: [{
@@ -263,7 +280,7 @@ class SelectAddressDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SelectAddressDialogComponent, deps: [{ token: i1.DataService }, { token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: SelectAddressDialogComponent, selector: "vdr-select-address-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.select-address' | translate }}</ng-template>\r\n\r\n<clr-tabs *ngIf=\"addresses$ | async as addresses\">\r\n    <clr-tab *ngIf=\"customerId && addresses.length\">\r\n        <button clrTabLink>{{ 'order.existing-address' | translate }}</button>\r\n        <ng-template [(clrIfActive)]=\"useExisting\">\r\n            <clr-tab-content>\r\n                <vdr-radio-card-fieldset\r\n                    class=\"block mt-4\"\r\n                    [idFn]=\"addressIdFn\"\r\n                    [selectedItemId]=\"selectedAddress && addressIdFn(selectedAddress)\"\r\n                    (selectItem)=\"selectedAddress = $event\"\r\n                >\r\n                    <vdr-radio-card *ngFor=\"let address of addresses\" [item]=\"address\">\r\n                        <vdr-formatted-address [address]=\"address\"></vdr-formatted-address>\r\n                    </vdr-radio-card>\r\n                </vdr-radio-card-fieldset>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'customer.create-new-address' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"createNew\">\r\n            <clr-tab-content>\r\n                <vdr-address-form\r\n                    [formGroup]=\"addressForm\"\r\n                    [availableCountries]=\"availableCountries$ | async\"\r\n                ></vdr-address-form>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n</clr-tabs>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"(useExisting && !selectedAddress) || (createNew && addressForm.invalid)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }, { kind: "component", type: i1$1.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { kind: "component", type: i1$1.ClrTab, selector: "clr-tab" }, { kind: "component", type: i1$1.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { kind: "directive", type: i1$1.ClrTabLink, selector: "[clrTabLink]", inputs: ["id", "clrTabLinkInOverflow"] }, { kind: "directive", type: i1$1.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { kind: "directive", type: i1$1.ÇlrActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { kind: "component", type: i1.RadioCardComponent, selector: "vdr-radio-card", inputs: ["item"], exportAs: ["VdrRadioCard"] }, { kind: "component", type: i1.RadioCardFieldsetComponent, selector: "vdr-radio-card-fieldset", inputs: ["selectedItemId", "idFn"], outputs: ["selectItem"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: SelectAddressDialogComponent, selector: "vdr-select-address-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.select-address' | translate }}</ng-template>\r\n\r\n<clr-tabs *ngIf=\"addresses$ | async as addresses\">\r\n    <clr-tab *ngIf=\"customerId && addresses.length\">\r\n        <button clrTabLink>{{ 'order.existing-address' | translate }}</button>\r\n        <ng-template [(clrIfActive)]=\"useExisting\">\r\n            <clr-tab-content>\r\n                <vdr-radio-card-fieldset\r\n                    class=\"block mt-4\"\r\n                    [idFn]=\"addressIdFn\"\r\n                    [selectedItemId]=\"selectedAddress && addressIdFn(selectedAddress)\"\r\n                    (selectItem)=\"selectedAddress = $event\"\r\n                >\r\n                    <vdr-radio-card *ngFor=\"let address of addresses\" [item]=\"address\">\r\n                        <vdr-formatted-address [address]=\"address\"></vdr-formatted-address>\r\n                    </vdr-radio-card>\r\n                </vdr-radio-card-fieldset>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'customer.create-new-address' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"createNew\">\r\n            <clr-tab-content>\r\n                <vdr-address-form\r\n                    [formGroup]=\"addressForm\"\r\n                    [availableCountries]=\"availableCountries$ | async\"\r\n                ></vdr-address-form>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n</clr-tabs>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"(useExisting && !selectedAddress) || (createNew && addressForm.invalid)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }, { kind: "component", type: i3.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { kind: "component", type: i3.ClrTab, selector: "clr-tab" }, { kind: "component", type: i3.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { kind: "directive", type: i3.ClrTabLink, selector: "[clrTabLink]", inputs: ["id", "clrTabLinkInOverflow"] }, { kind: "directive", type: i3.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { kind: "directive", type: i3.ÇlrActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { kind: "component", type: i1.RadioCardComponent, selector: "vdr-radio-card", inputs: ["item"], exportAs: ["VdrRadioCard"] }, { kind: "component", type: i1.RadioCardFieldsetComponent, selector: "vdr-radio-card-fieldset", inputs: ["selectedItemId", "idFn"], outputs: ["selectItem"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SelectAddressDialogComponent, decorators: [{
             type: Component,
@@ -274,11 +291,16 @@ class SelectCustomerDialogComponent {
     constructor(dataService, formBuilder) {
         this.dataService = dataService;
         this.formBuilder = formBuilder;
+        // populated by the dialog service
+        this.canCreateNew = true;
+        this.includeNoteInput = false;
+        this.title = marker('order.set-customer-for-order');
         this.isLoading = false;
         this.input$ = new Subject();
         this.selectedCustomer = [];
         this.useExisting = true;
         this.createNew = false;
+        this.note = '';
         this.customerForm = this.formBuilder.group({
             title: '',
             firstName: ['', Validators.required],
@@ -303,19 +325,19 @@ class SelectCustomerDialogComponent {
     }
     select() {
         if (this.useExisting && this.selectedCustomer.length === 1) {
-            this.resolveWith(this.selectedCustomer[0]);
+            this.resolveWith({ ...this.selectedCustomer[0], note: this.note });
         }
-        if (this.createNew && this.customerForm.valid) {
+        else if (this.createNew && this.customerForm.valid) {
             const formValue = this.customerForm.value;
-            this.resolveWith(formValue);
+            this.resolveWith({ ...formValue, note: this.note });
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SelectCustomerDialogComponent, deps: [{ token: i1.DataService }, { token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: SelectCustomerDialogComponent, selector: "vdr-select-customer-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.set-customer-for-order' | translate }}</ng-template>\r\n\r\n<clr-tabs>\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'order.existing-customer' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"useExisting\">\r\n            <clr-tab-content>\r\n                <div class=\"mt-4\">\r\n                    <ng-select\r\n                        [items]=\"customers$ | async\"\r\n                        appendTo=\"body\"\r\n                        bindLabel=\"name\"\r\n                        [addTag]=\"false\"\r\n                        [multiple]=\"true\"\r\n                        [hideSelected]=\"true\"\r\n                        [trackByFn]=\"trackByFn\"\r\n                        [minTermLength]=\"2\"\r\n                        [loading]=\"isLoading\"\r\n                        [typeahead]=\"input$\"\r\n                        [(ngModel)]=\"selectedCustomer\"\r\n                    >\r\n                        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                            <span class=\"item-row\">\r\n                            <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\r\n                            ><span class=\"mx-1\">{{ item.firstName }} {{ item.lastName }}</span>\r\n                            <vdr-chip>{{ item.emailAddress }}</vdr-chip>\r\n                            </span>\r\n                        </ng-template>\r\n                        <ng-template ng-option-tmp let-item=\"item\">\r\n                            <span class=\"item-row\">\r\n                            <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\r\n                            ><span class=\"mx-1\">{{ item.firstName }} {{ item.lastName }}</span>\r\n                            <vdr-chip>{{ item.emailAddress }}</vdr-chip>\r\n                            </span>\r\n                        </ng-template>\r\n                    </ng-select>\r\n                </div>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'customer.create-new-customer' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"createNew\">\r\n            <clr-tab-content>\r\n                <form [formGroup]=\"customerForm\">\r\n                    <vdr-form-field [label]=\"'customer.title' | translate\" for=\"title\">\r\n                        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.first-name' | translate\" for=\"firstName\">\r\n                        <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.last-name' | translate\" for=\"lastName\">\r\n                        <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.email-address' | translate\" for=\"emailAddress\">\r\n                        <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.phone-number' | translate\" for=\"phoneNumber\">\r\n                        <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\r\n                    </vdr-form-field>\r\n                </form>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n</clr-tabs>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"(useExisting && selectedCustomer.length === 0) || (createNew && customerForm.invalid)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".item-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }, { kind: "component", type: i1$1.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { kind: "component", type: i1$1.ClrTab, selector: "clr-tab" }, { kind: "component", type: i1$1.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { kind: "directive", type: i1$1.ClrTabLink, selector: "[clrTabLink]", inputs: ["id", "clrTabLinkInOverflow"] }, { kind: "directive", type: i1$1.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { kind: "directive", type: i1$1.ÇlrActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content" }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: i3.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: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: SelectCustomerDialogComponent, selector: "vdr-select-customer-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ title | translate }}</ng-template>\r\n\r\n<ng-container *ngIf=\"!canCreateNew\">\r\n    <ng-container *ngTemplateOutlet=\"customerSelect\"></ng-container>\r\n    <vdr-form-field [label]=\"'common.add-note' | translate\" *ngIf=\"includeNoteInput\" class=\"mt-4\">\r\n        <textarea [(ngModel)]=\"note\"></textarea>\r\n    </vdr-form-field>\r\n</ng-container>\r\n\r\n<clr-tabs *ngIf=\"canCreateNew\" class=\"pt-1\">\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'order.existing-customer' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"useExisting\">\r\n            <clr-tab-content>\r\n                <div class=\"mt-4\">\r\n                    <ng-container *ngTemplateOutlet=\"customerSelect\"></ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n    <clr-tab *ngIf=\"canCreateNew\">\r\n        <button clrTabLink>{{ 'customer.create-new-customer' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"createNew\">\r\n            <clr-tab-content>\r\n                <form [formGroup]=\"customerForm\">\r\n                    <vdr-form-field [label]=\"'customer.title' | translate\" for=\"title\">\r\n                        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.first-name' | translate\" for=\"firstName\">\r\n                        <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.last-name' | translate\" for=\"lastName\">\r\n                        <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.email-address' | translate\" for=\"emailAddress\">\r\n                        <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.phone-number' | translate\" for=\"phoneNumber\">\r\n                        <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\r\n                    </vdr-form-field>\r\n                </form>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n</clr-tabs>\r\n\r\n<ng-template #customerSelect>\r\n    <ng-select\r\n        [items]=\"customers$ | async\"\r\n        appendTo=\"body\"\r\n        bindLabel=\"name\"\r\n        [addTag]=\"false\"\r\n        [multiple]=\"true\"\r\n        [hideSelected]=\"true\"\r\n        [trackByFn]=\"trackByFn\"\r\n        [minTermLength]=\"2\"\r\n        [loading]=\"isLoading\"\r\n        [typeahead]=\"input$\"\r\n        [(ngModel)]=\"selectedCustomer\"\r\n    >\r\n        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"item-row\">\r\n                <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\r\n                ><span class=\"mx-1\">{{ item.firstName }} {{ item.lastName }}</span>\r\n                <vdr-chip>{{ item.emailAddress }}</vdr-chip>\r\n            </span>\r\n        </ng-template>\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <span class=\"item-row\">\r\n                <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\r\n                ><span class=\"mx-1\">{{ item.firstName }} {{ item.lastName }}</span>\r\n                <vdr-chip>{{ item.emailAddress }}</vdr-chip>\r\n            </span>\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"(useExisting && selectedCustomer.length === 0) || (createNew && customerForm.invalid)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".item-row{display:flex;align-items:center}clr-tabs{display:block}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }, { kind: "component", type: i3.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { kind: "component", type: i3.ClrTab, selector: "clr-tab" }, { kind: "component", type: i3.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { kind: "directive", type: i3.ClrTabLink, selector: "[clrTabLink]", inputs: ["id", "clrTabLinkInOverflow"] }, { kind: "directive", type: i3.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { kind: "directive", type: i3.ÇlrActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: 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: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], 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: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SelectCustomerDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-select-customer-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.set-customer-for-order' | translate }}</ng-template>\r\n\r\n<clr-tabs>\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'order.existing-customer' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"useExisting\">\r\n            <clr-tab-content>\r\n                <div class=\"mt-4\">\r\n                    <ng-select\r\n                        [items]=\"customers$ | async\"\r\n                        appendTo=\"body\"\r\n                        bindLabel=\"name\"\r\n                        [addTag]=\"false\"\r\n                        [multiple]=\"true\"\r\n                        [hideSelected]=\"true\"\r\n                        [trackByFn]=\"trackByFn\"\r\n                        [minTermLength]=\"2\"\r\n                        [loading]=\"isLoading\"\r\n                        [typeahead]=\"input$\"\r\n                        [(ngModel)]=\"selectedCustomer\"\r\n                    >\r\n                        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                            <span class=\"item-row\">\r\n                            <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\r\n                            ><span class=\"mx-1\">{{ item.firstName }} {{ item.lastName }}</span>\r\n                            <vdr-chip>{{ item.emailAddress }}</vdr-chip>\r\n                            </span>\r\n                        </ng-template>\r\n                        <ng-template ng-option-tmp let-item=\"item\">\r\n                            <span class=\"item-row\">\r\n                            <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\r\n                            ><span class=\"mx-1\">{{ item.firstName }} {{ item.lastName }}</span>\r\n                            <vdr-chip>{{ item.emailAddress }}</vdr-chip>\r\n                            </span>\r\n                        </ng-template>\r\n                    </ng-select>\r\n                </div>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'customer.create-new-customer' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"createNew\">\r\n            <clr-tab-content>\r\n                <form [formGroup]=\"customerForm\">\r\n                    <vdr-form-field [label]=\"'customer.title' | translate\" for=\"title\">\r\n                        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.first-name' | translate\" for=\"firstName\">\r\n                        <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.last-name' | translate\" for=\"lastName\">\r\n                        <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.email-address' | translate\" for=\"emailAddress\">\r\n                        <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.phone-number' | translate\" for=\"phoneNumber\">\r\n                        <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\r\n                    </vdr-form-field>\r\n                </form>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n</clr-tabs>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"(useExisting && selectedCustomer.length === 0) || (createNew && customerForm.invalid)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".item-row{display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'vdr-select-customer-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ title | translate }}</ng-template>\r\n\r\n<ng-container *ngIf=\"!canCreateNew\">\r\n    <ng-container *ngTemplateOutlet=\"customerSelect\"></ng-container>\r\n    <vdr-form-field [label]=\"'common.add-note' | translate\" *ngIf=\"includeNoteInput\" class=\"mt-4\">\r\n        <textarea [(ngModel)]=\"note\"></textarea>\r\n    </vdr-form-field>\r\n</ng-container>\r\n\r\n<clr-tabs *ngIf=\"canCreateNew\" class=\"pt-1\">\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'order.existing-customer' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"useExisting\">\r\n            <clr-tab-content>\r\n                <div class=\"mt-4\">\r\n                    <ng-container *ngTemplateOutlet=\"customerSelect\"></ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n    <clr-tab *ngIf=\"canCreateNew\">\r\n        <button clrTabLink>{{ 'customer.create-new-customer' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"createNew\">\r\n            <clr-tab-content>\r\n                <form [formGroup]=\"customerForm\">\r\n                    <vdr-form-field [label]=\"'customer.title' | translate\" for=\"title\">\r\n                        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.first-name' | translate\" for=\"firstName\">\r\n                        <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.last-name' | translate\" for=\"lastName\">\r\n                        <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.email-address' | translate\" for=\"emailAddress\">\r\n                        <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.phone-number' | translate\" for=\"phoneNumber\">\r\n                        <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\r\n                    </vdr-form-field>\r\n                </form>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n</clr-tabs>\r\n\r\n<ng-template #customerSelect>\r\n    <ng-select\r\n        [items]=\"customers$ | async\"\r\n        appendTo=\"body\"\r\n        bindLabel=\"name\"\r\n        [addTag]=\"false\"\r\n        [multiple]=\"true\"\r\n        [hideSelected]=\"true\"\r\n        [trackByFn]=\"trackByFn\"\r\n        [minTermLength]=\"2\"\r\n        [loading]=\"isLoading\"\r\n        [typeahead]=\"input$\"\r\n        [(ngModel)]=\"selectedCustomer\"\r\n    >\r\n        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"item-row\">\r\n                <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\r\n                ><span class=\"mx-1\">{{ item.firstName }} {{ item.lastName }}</span>\r\n                <vdr-chip>{{ item.emailAddress }}</vdr-chip>\r\n            </span>\r\n        </ng-template>\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <span class=\"item-row\">\r\n                <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\r\n                ><span class=\"mx-1\">{{ item.firstName }} {{ item.lastName }}</span>\r\n                <vdr-chip>{{ item.emailAddress }}</vdr-chip>\r\n            </span>\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"(useExisting && selectedCustomer.length === 0) || (createNew && customerForm.invalid)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".item-row{display:flex;align-items:center}clr-tabs{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i2.UntypedFormBuilder }]; } });
 class SelectShippingMethodDialogComponent {
@@ -358,7 +380,7 @@ class OrderStateSelectDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderStateSelectDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderStateSelectDialogComponent, selector: "vdr-order-state-select-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.select-state' | translate }}</ng-template>\r\n<p>{{ message | translate }}</p>\r\n<vdr-form-field>\r\n    <select name=\"state\" [(ngModel)]=\"selectedState\">\r\n        <option *ngFor=\"let state of nextStates\" [value]=\"state\">\r\n            {{ state | stateI18nToken | translate }}\r\n        </option>\r\n    </select>\r\n</vdr-form-field>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" *ngIf=\"cancellable\" (click)=\"cancel()\" class=\"btn btn-secondary\">\r\n        {{ 'common.cancel' | translate }}\r\n    </button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"!selectedState\">\r\n        {{ 'order.transition-to-state' | translate: { state: (selectedState | stateI18nToken | translate) } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ 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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderStateSelectDialogComponent, selector: "vdr-order-state-select-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.select-state' | translate }}</ng-template>\r\n<p>{{ message | translate }}</p>\r\n<vdr-form-field>\r\n    <select name=\"state\" [(ngModel)]=\"selectedState\">\r\n        <option *ngFor=\"let state of nextStates\" [value]=\"state\">\r\n            {{ state | stateI18nToken | translate }}\r\n        </option>\r\n    </select>\r\n</vdr-form-field>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" *ngIf=\"cancellable\" (click)=\"cancel()\" class=\"btn btn-secondary\">\r\n        {{ 'common.cancel' | translate }}\r\n    </button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"!selectedState\">\r\n        {{ 'order.transition-to-state' | translate: { state: (selectedState | stateI18nToken | translate) } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ 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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderStateSelectDialogComponent, decorators: [{
             type: Component,
@@ -512,7 +534,7 @@ class OrderCustomFieldsCardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderCustomFieldsCardComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: i1.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderCustomFieldsCardComponent, selector: "vdr-order-custom-fields-card", inputs: { customFieldsConfig: "customFieldsConfig", customFieldValues: "customFieldValues" }, outputs: { updateClick: "updateClick" }, ngImport: i0, template: "<div class=\"card\" *ngIf=\"customFieldsConfig.length\">\r\n    <div class=\"card-header\">\r\n        {{ 'common.custom-fields' | translate }}\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"card-text custom-field-form\" [class.editable]=\"editable\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Order\"\r\n                [customFields]=\"customFieldsConfig\"\r\n                [customFieldsFormGroup]=\"customFieldForm\"\r\n                [readonly]=\"!editable\"\r\n                [compact]=\"true\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-footer\">\r\n        <button class=\"btn btn-sm btn-secondary\" (click)=\"editable = true\" *ngIf=\"!editable\">\r\n            <clr-icon shape=\"pencil\"></clr-icon>\r\n            {{ 'common.edit' | translate }}\r\n        </button>\r\n        <button\r\n            class=\"btn btn-sm btn-primary\"\r\n            (click)=\"onUpdateClick()\"\r\n            *ngIf=\"editable\"\r\n            [disabled]=\"customFieldForm.pristine || customFieldForm.invalid\"\r\n        >\r\n            <clr-icon shape=\"check\"></clr-icon>\r\n            {{ 'common.update' | translate }}\r\n        </button>\r\n        <button\r\n            class=\"btn btn-sm btn-secondary\"\r\n            (click)=\"onCancelClick()\"\r\n            *ngIf=\"editable\"\r\n        >\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n            {{ 'common.cancel' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: ["vdr-custom-field-control{margin-bottom:6px;display:block}.custom-field-form ::ng-deep .clr-control-label{color:var(--color-grey-400)}.custom-field-form.editable ::ng-deep .clr-control-label{color:inherit}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderCustomFieldsCardComponent, selector: "vdr-order-custom-fields-card", inputs: { customFieldsConfig: "customFieldsConfig", customFieldValues: "customFieldValues" }, outputs: { updateClick: "updateClick" }, ngImport: i0, template: "<div class=\"card\" *ngIf=\"customFieldsConfig.length\">\r\n    <div class=\"card-header\">\r\n        {{ 'common.custom-fields' | translate }}\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"card-text custom-field-form\" [class.editable]=\"editable\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Order\"\r\n                [customFields]=\"customFieldsConfig\"\r\n                [customFieldsFormGroup]=\"customFieldForm\"\r\n                [readonly]=\"!editable\"\r\n                [compact]=\"true\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-footer\">\r\n        <button class=\"btn btn-sm btn-secondary\" (click)=\"editable = true\" *ngIf=\"!editable\">\r\n            <clr-icon shape=\"pencil\"></clr-icon>\r\n            {{ 'common.edit' | translate }}\r\n        </button>\r\n        <button\r\n            class=\"btn btn-sm btn-primary\"\r\n            (click)=\"onUpdateClick()\"\r\n            *ngIf=\"editable\"\r\n            [disabled]=\"customFieldForm.pristine || customFieldForm.invalid\"\r\n        >\r\n            <clr-icon shape=\"check\"></clr-icon>\r\n            {{ 'common.update' | translate }}\r\n        </button>\r\n        <button\r\n            class=\"btn btn-sm btn-secondary\"\r\n            (click)=\"onCancelClick()\"\r\n            *ngIf=\"editable\"\r\n        >\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n            {{ 'common.cancel' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: ["vdr-custom-field-control{margin-bottom:6px;display:block}.custom-field-form ::ng-deep .clr-control-label{color:var(--color-grey-400)}.custom-field-form.editable ::ng-deep .clr-control-label{color:inherit}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderCustomFieldsCardComponent, decorators: [{
             type: Component,
@@ -567,7 +589,7 @@ class LineFulfillmentComponent {
             .filter(notNullOrUndefined) ?? []);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: LineFulfillmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: { line: "line", allOrderFulfillments: "allOrderFulfillments", orderState: "orderState" }, usesOnChanges: true, ngImport: i0, template: "<vdr-dropdown class=\"search-settings-menu\" *ngIf=\"fulfilledCount || orderState === 'PartiallyDelivered'\">\r\n    <button type=\"button\" class=\"icon-button\" vdrDropdownTrigger>\r\n        <clr-icon *ngIf=\"fulfillmentStatus === 'full'\" class=\"item-fulfilled\" shape=\"check-circle\"></clr-icon>\r\n        <clr-icon\r\n            *ngIf=\"fulfillmentStatus === 'partial'\"\r\n            class=\"item-partially-fulfilled\"\r\n            shape=\"check-circle\"\r\n        ></clr-icon>\r\n        <clr-icon\r\n            *ngIf=\"fulfillmentStatus === 'none'\"\r\n            class=\"item-not-fulfilled\"\r\n            shape=\"exclamation-circle\"\r\n        ></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'full'\">\r\n            {{ 'order.line-fulfillment-all' | translate }}\r\n        </label>\r\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'partial'\">\r\n            {{\r\n                'order.line-fulfillment-partial' | translate: { total: line.quantity, count: fulfilledCount }\r\n            }}\r\n        </label>\r\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'none'\">\r\n            {{ 'order.line-fulfillment-none' | translate }}\r\n        </label>\r\n        <div class=\"fulfillment-detail\" *ngFor=\"let item of fulfillments\">\r\n            <div class=\"fulfillment-title\">\r\n                {{ 'order.fulfillment' | translate }} #{{ item.fulfillment.id }} ({{\r\n                    'order.item-count' | translate: { count: item.count }\r\n                }})\r\n            </div>\r\n            <vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n                {{ item.fulfillment.createdAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.fulfillment-method' | translate\">\r\n                {{ item.fulfillment.method }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data\r\n                *ngIf=\"item.fulfillment.trackingCode\"\r\n                [label]=\"'order.tracking-code' | translate\"\r\n            >\r\n                {{ item.fulfillment.trackingCode }}\r\n            </vdr-labeled-data>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".item-fulfilled{color:var(--color-success-700)}.item-partially-fulfilled{color:var(--color-warning-700)}.item-not-fulfilled{color:var(--color-error-700)}.fulfillment-detail{margin:6px 12px}.fulfillment-detail:not(:last-of-type){border-bottom:1px dashed var(--color-component-border-200)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { 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: "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.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: { line: "line", allOrderFulfillments: "allOrderFulfillments", orderState: "orderState" }, usesOnChanges: true, ngImport: i0, template: "<vdr-dropdown class=\"search-settings-menu\" *ngIf=\"fulfilledCount || orderState === 'PartiallyDelivered'\">\r\n    <button type=\"button\" class=\"icon-button\" vdrDropdownTrigger>\r\n        <clr-icon *ngIf=\"fulfillmentStatus === 'full'\" class=\"item-fulfilled\" shape=\"check-circle\"></clr-icon>\r\n        <clr-icon\r\n            *ngIf=\"fulfillmentStatus === 'partial'\"\r\n            class=\"item-partially-fulfilled\"\r\n            shape=\"check-circle\"\r\n        ></clr-icon>\r\n        <clr-icon\r\n            *ngIf=\"fulfillmentStatus === 'none'\"\r\n            class=\"item-not-fulfilled\"\r\n            shape=\"exclamation-circle\"\r\n        ></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'full'\">\r\n            {{ 'order.line-fulfillment-all' | translate }}\r\n        </label>\r\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'partial'\">\r\n            {{\r\n                'order.line-fulfillment-partial' | translate: { total: line.quantity, count: fulfilledCount }\r\n            }}\r\n        </label>\r\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'none'\">\r\n            {{ 'order.line-fulfillment-none' | translate }}\r\n        </label>\r\n        <div class=\"fulfillment-detail\" *ngFor=\"let item of fulfillments\">\r\n            <div class=\"fulfillment-title\">\r\n                {{ 'order.fulfillment' | translate }} #{{ item.fulfillment.id }} ({{\r\n                    'order.item-count' | translate: { count: item.count }\r\n                }})\r\n            </div>\r\n            <vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n                {{ item.fulfillment.createdAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.fulfillment-method' | translate\">\r\n                {{ item.fulfillment.method }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data\r\n                *ngIf=\"item.fulfillment.trackingCode\"\r\n                [label]=\"'order.tracking-code' | translate\"\r\n            >\r\n                {{ item.fulfillment.trackingCode }}\r\n            </vdr-labeled-data>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".item-fulfilled{color:var(--color-success-700)}.item-partially-fulfilled{color:var(--color-warning-700)}.item-not-fulfilled{color:var(--color-error-700)}.fulfillment-detail{margin:6px 12px}.fulfillment-detail:not(:last-of-type){border-bottom:1px dashed var(--color-component-border-200)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { 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: "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.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: LineFulfillmentComponent, decorators: [{
             type: Component,
@@ -591,7 +613,7 @@ class LineRefundsComponent {
             .reduce((sum, i) => sum + i.quantity, 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: LineRefundsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: { line: "line", payments: "payments" }, ngImport: i0, template: "<span *ngIf=\"getRefundedCount()\" [title]=\"'order.refunded-count' | translate: { count: getRefundedCount() }\">\r\n    <clr-icon shape=\"redo\" class=\"is-solid\" dir=\"down\"></clr-icon>\r\n</span>\r\n", styles: [":host{color:var(--color-error-500)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: { line: "line", payments: "payments" }, ngImport: i0, template: "<span *ngIf=\"getRefundedCount()\" [title]=\"'order.refunded-count' | translate: { count: getRefundedCount() }\">\r\n    <clr-icon shape=\"redo\" class=\"is-solid\" dir=\"down\"></clr-icon>\r\n</span>\r\n", styles: [":host{color:var(--color-error-500)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: LineRefundsComponent, decorators: [{
             type: Component,
@@ -656,7 +678,7 @@ class OrderDataTableComponent extends DataTable2Component {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: { order: "order" }, queries: [{ propertyName: "totalColumns", predicate: OrderTotalColumnComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    <table\r\n        class=\"\"\r\n        [class.no-select]=\"disableSelect\"\r\n    >\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <vdr-ui-extension-point\r\n                            [locationId]=\"id\"\r\n                            [metadata]=\"column.id\"\r\n                            api=\"dataTable\"\r\n                            [topPx]=\"-6\"\r\n                            [leftPx]=\"-24\"\r\n                            display=\"block\"\r\n                        >\r\n                            <span>{{ column.heading }}</span>\r\n                        </vdr-ui-extension-point>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  id: id,\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <ng-container\r\n                            *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n                        >\r\n                            <ng-container\r\n                                *ngComponentOutlet=\"\r\n                                    componentConfig.config.component;\r\n                                    inputs: { rowItem: item };\r\n                                    injector: componentConfig.injector\r\n                                \"\r\n                            ></ng-container>\r\n                        </ng-container>\r\n                        <ng-template #defaultComponent>\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n                            ></ng-container>\r\n                        </ng-template>\r\n                    </div>\r\n                </td>\r\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\r\n            </tr>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"'order.order-is-empty' | translate\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n            <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n                <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n                <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                <td class=\"align-middle\" [attr.colspan]=\"visibleSortedColumns.length - 4\"></td>\r\n                <td class=\"align-middle total\">\r\n                    {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ surcharge.price | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <ng-container *ngFor=\"let discount of order.discounts\">\r\n                <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length - 1\" class=\"\">\r\n                        <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\r\n                        <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\r\n                            couponCode\r\n                        }}</vdr-chip>\r\n                    </td>\r\n                    <td class=\"\">\r\n                        {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\r\n                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                            {{ discount.amount | localeCurrency : order.currencyCode }}\r\n                        </div>\r\n                    </td>\r\n                    <td><!-- column select --></td>\r\n                </tr>\r\n            </ng-container>\r\n            <tr class=\"sub-total\">\r\n                <td class=\"\">{{ 'order.sub-total' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.subTotalWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.subTotal | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <tr class=\"shipping\">\r\n                <td class=\"\">{{ 'order.shipping' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\">\r\n                    <vdr-chip *ngFor=\"let shippingLine of order.shippingLines\" class=\"shipping-method-name\">\r\n                        {{ shippingLine.shippingMethod.name }}\r\n                    </vdr-chip>\r\n                </td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.shipping | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <tr class=\"total\">\r\n                <td class=\"\">{{ 'order.total' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.total | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: i1.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { kind: "component", type: i1.DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: i1.DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: { order: "order" }, queries: [{ propertyName: "totalColumns", predicate: OrderTotalColumnComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    <table\r\n        class=\"\"\r\n        [class.no-select]=\"disableSelect\"\r\n    >\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <vdr-ui-extension-point\r\n                            [locationId]=\"id\"\r\n                            [metadata]=\"column.id\"\r\n                            api=\"dataTable\"\r\n                            [topPx]=\"-6\"\r\n                            [leftPx]=\"-24\"\r\n                            display=\"block\"\r\n                        >\r\n                            <span>{{ column.heading }}</span>\r\n                        </vdr-ui-extension-point>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  id: id,\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <ng-container\r\n                            *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n                        >\r\n                            <ng-container\r\n                                *ngComponentOutlet=\"\r\n                                    componentConfig.config.component;\r\n                                    inputs: { rowItem: item };\r\n                                    injector: componentConfig.injector\r\n                                \"\r\n                            ></ng-container>\r\n                        </ng-container>\r\n                        <ng-template #defaultComponent>\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n                            ></ng-container>\r\n                        </ng-template>\r\n                    </div>\r\n                </td>\r\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\r\n            </tr>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"'order.order-is-empty' | translate\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n            <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n                <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n                <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                <td class=\"align-middle\" [attr.colspan]=\"visibleSortedColumns.length - 4\"></td>\r\n                <td class=\"align-middle total\">\r\n                    {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ surcharge.price | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <ng-container *ngFor=\"let discount of order.discounts\">\r\n                <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length - 1\" class=\"\">\r\n                        <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\r\n                        <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\r\n                            couponCode\r\n                        }}</vdr-chip>\r\n                    </td>\r\n                    <td class=\"\">\r\n                        {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\r\n                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                            {{ discount.amount | localeCurrency : order.currencyCode }}\r\n                        </div>\r\n                    </td>\r\n                    <td><!-- column select --></td>\r\n                </tr>\r\n            </ng-container>\r\n            <tr class=\"sub-total\">\r\n                <td class=\"\">{{ 'order.sub-total' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.subTotalWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.subTotal | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <tr class=\"shipping\">\r\n                <td class=\"\">{{ 'order.shipping' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\">\r\n                    <vdr-chip *ngFor=\"let shippingLine of order.shippingLines\" class=\"shipping-method-name\">\r\n                        {{ shippingLine.shippingMethod.name }}\r\n                    </vdr-chip>\r\n                </td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.shipping | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <tr class=\"total\">\r\n                <td class=\"\">{{ 'order.total' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.total | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}\n"], dependencies: [{ kind: "directive", type: i3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: i1.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { kind: "component", type: i1.DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: i1.DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderDataTableComponent, decorators: [{
             type: Component,
@@ -734,11 +756,11 @@ class OrderTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderTableComponent, selector: "vdr-order-table", inputs: { order: "order", orderLineCustomFields: "orderLineCustomFields", isDraft: "isDraft" }, outputs: { adjust: "adjust", remove: "remove" }, ngImport: i0, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\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 [heading]=\"'order.product-name' | translate\" id=\"product-name\">\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 [heading]=\"'order.product-sku' | translate\" id=\"product-sku\" [optional]=\"false\">\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 [heading]=\"'order.unit-price' | translate\" id=\"unit-price\">\r\n        <ng-template let-line=\"item\">\r\n            <div class=\"unit-price\">\r\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\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 [heading]=\"'order.quantity' | translate\" id=\"quantity\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            <ng-container *ngIf=\"!isDraft; else draft\">\r\n                <div class=\"flex\">\r\n                    <div\r\n                        *ngIf=\"line.orderPlacedQuantity && line.quantity !== line.orderPlacedQuantity\"\r\n                        class=\"order-placed-quantity\"\r\n                        [title]=\"'order.original-quantity-at-checkout' | translate\"\r\n                    >\r\n                        {{ line.orderPlacedQuantity }}\r\n                    </div>\r\n                    <div>{{ line.quantity }}</div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #draft>\r\n                <div class=\"flex\">\r\n                    <input\r\n                        class=\"draft-qty\"\r\n                        type=\"number\"\r\n                        min=\"0\"\r\n                        #qtyInput\r\n                        [value]=\"line.quantity\"\r\n                        (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\r\n                    />\r\n                    <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\r\n                        <clr-icon shape=\"trash\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n            </ng-template>\r\n            <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n            <vdr-line-fulfillment\r\n                [line]=\"line\"\r\n                [orderState]=\"order.state\"\r\n                [allOrderFulfillments]=\"order.fulfillments\"\r\n            ></vdr-line-fulfillment>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of orderLineCustomFields\"\r\n        [customField]=\"customField\"\r\n    />\r\n    <vdr-order-total-column [heading]=\"'order.total' | translate\" id=\"total\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            <div class=\"unit-price\">\r\n                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ line.linePrice | localeCurrency : order.currencyCode }}\r\n                </div>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\r\n                <vdr-dropdown *ngIf=\"discounts.length\">\r\n                    <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                        {{ 'order.promotions-applied' | translate }}\r\n                    </div>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                            <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\r\n                                discount.description\r\n                            }}</a>\r\n                            <div class=\"promotion-amount\">\r\n                                {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ discount.amount | localeCurrency : order.currencyCode }}\r\n                                </div>\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-order-total-column>\r\n</vdr-order-data-table>\r\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-inline-start:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i1$1.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$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { 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.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: ["order"] }, { kind: "component", type: OrderTotalColumnComponent, selector: "vdr-order-total-column", exportAs: ["row"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderTableComponent, selector: "vdr-order-table", inputs: { order: "order", orderLineCustomFields: "orderLineCustomFields", isDraft: "isDraft" }, outputs: { adjust: "adjust", remove: "remove" }, ngImport: i0, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\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 [heading]=\"'order.product-name' | translate\" id=\"product-name\">\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 [heading]=\"'order.product-sku' | translate\" id=\"product-sku\" [optional]=\"false\">\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 [heading]=\"'order.unit-price' | translate\" id=\"unit-price\">\r\n        <ng-template let-line=\"item\">\r\n            <div class=\"unit-price\">\r\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\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 [heading]=\"'order.quantity' | translate\" id=\"quantity\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            <ng-container *ngIf=\"!isDraft; else draft\">\r\n                <div class=\"flex\">\r\n                    <div\r\n                        *ngIf=\"line.orderPlacedQuantity && line.quantity !== line.orderPlacedQuantity\"\r\n                        class=\"order-placed-quantity\"\r\n                        [title]=\"'order.original-quantity-at-checkout' | translate\"\r\n                    >\r\n                        {{ line.orderPlacedQuantity }}\r\n                    </div>\r\n                    <div>{{ line.quantity }}</div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #draft>\r\n                <div class=\"flex\">\r\n                    <input\r\n                        class=\"draft-qty\"\r\n                        type=\"number\"\r\n                        min=\"0\"\r\n                        #qtyInput\r\n                        [value]=\"line.quantity\"\r\n                        (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\r\n                    />\r\n                    <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\r\n                        <clr-icon shape=\"trash\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n            </ng-template>\r\n            <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n            <vdr-line-fulfillment\r\n                [line]=\"line\"\r\n                [orderState]=\"order.state\"\r\n                [allOrderFulfillments]=\"order.fulfillments\"\r\n            ></vdr-line-fulfillment>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of orderLineCustomFields\"\r\n        [customField]=\"customField\"\r\n    />\r\n    <vdr-order-total-column [heading]=\"'order.total' | translate\" id=\"total\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            <div class=\"unit-price\">\r\n                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ line.linePrice | localeCurrency : order.currencyCode }}\r\n                </div>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\r\n                <vdr-dropdown *ngIf=\"discounts.length\">\r\n                    <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                        {{ 'order.promotions-applied' | translate }}\r\n                    </div>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                            <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\r\n                                discount.description\r\n                            }}</a>\r\n                            <div class=\"promotion-amount\">\r\n                                {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ discount.amount | localeCurrency : order.currencyCode }}\r\n                                </div>\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-order-total-column>\r\n</vdr-order-data-table>\r\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-inline-start:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { 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.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: ["order"] }, { kind: "component", type: OrderTotalColumnComponent, selector: "vdr-order-total-column", exportAs: ["row"] }, { 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: "16.2.2", ngImport: i0, type: OrderTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\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 [heading]=\"'order.product-name' | translate\" id=\"product-name\">\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 [heading]=\"'order.product-sku' | translate\" id=\"product-sku\" [optional]=\"false\">\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 [heading]=\"'order.unit-price' | translate\" id=\"unit-price\">\r\n        <ng-template let-line=\"item\">\r\n            <div class=\"unit-price\">\r\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\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 [heading]=\"'order.quantity' | translate\" id=\"quantity\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            <ng-container *ngIf=\"!isDraft; else draft\">\r\n                <div class=\"flex\">\r\n                    <div\r\n                        *ngIf=\"line.orderPlacedQuantity && line.quantity !== line.orderPlacedQuantity\"\r\n                        class=\"order-placed-quantity\"\r\n                        [title]=\"'order.original-quantity-at-checkout' | translate\"\r\n                    >\r\n                        {{ line.orderPlacedQuantity }}\r\n                    </div>\r\n                    <div>{{ line.quantity }}</div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #draft>\r\n                <div class=\"flex\">\r\n                    <input\r\n                        class=\"draft-qty\"\r\n                        type=\"number\"\r\n                        min=\"0\"\r\n                        #qtyInput\r\n                        [value]=\"line.quantity\"\r\n                        (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\r\n                    />\r\n                    <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\r\n                        <clr-icon shape=\"trash\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n            </ng-template>\r\n            <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n            <vdr-line-fulfillment\r\n                [line]=\"line\"\r\n                [orderState]=\"order.state\"\r\n                [allOrderFulfillments]=\"order.fulfillments\"\r\n            ></vdr-line-fulfillment>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of orderLineCustomFields\"\r\n        [customField]=\"customField\"\r\n    />\r\n    <vdr-order-total-column [heading]=\"'order.total' | translate\" id=\"total\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            <div class=\"unit-price\">\r\n                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ line.linePrice | localeCurrency : order.currencyCode }}\r\n                </div>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\r\n                <vdr-dropdown *ngIf=\"discounts.length\">\r\n                    <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                        {{ 'order.promotions-applied' | translate }}\r\n                    </div>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                            <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\r\n                                discount.description\r\n                            }}</a>\r\n                            <div class=\"promotion-amount\">\r\n                                {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ discount.amount | localeCurrency : order.currencyCode }}\r\n                                </div>\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-order-total-column>\r\n</vdr-order-data-table>\r\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-inline-start:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"] }]
+            args: [{ selector: 'vdr-order-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\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 [heading]=\"'order.product-name' | translate\" id=\"product-name\">\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 [heading]=\"'order.product-sku' | translate\" id=\"product-sku\" [optional]=\"false\">\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 [heading]=\"'order.unit-price' | translate\" id=\"unit-price\">\r\n        <ng-template let-line=\"item\">\r\n            <div class=\"unit-price\">\r\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\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 [heading]=\"'order.quantity' | translate\" id=\"quantity\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            <ng-container *ngIf=\"!isDraft; else draft\">\r\n                <div class=\"flex\">\r\n                    <div\r\n                        *ngIf=\"line.orderPlacedQuantity && line.quantity !== line.orderPlacedQuantity\"\r\n                        class=\"order-placed-quantity\"\r\n                        [title]=\"'order.original-quantity-at-checkout' | translate\"\r\n                    >\r\n                        {{ line.orderPlacedQuantity }}\r\n                    </div>\r\n                    <div>{{ line.quantity }}</div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #draft>\r\n                <div class=\"flex\">\r\n                    <input\r\n                        class=\"draft-qty\"\r\n                        type=\"number\"\r\n                        min=\"0\"\r\n                        #qtyInput\r\n                        [value]=\"line.quantity\"\r\n                        (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\r\n                    />\r\n                    <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\r\n                        <clr-icon shape=\"trash\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n            </ng-template>\r\n            <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n            <vdr-line-fulfillment\r\n                [line]=\"line\"\r\n                [orderState]=\"order.state\"\r\n                [allOrderFulfillments]=\"order.fulfillments\"\r\n            ></vdr-line-fulfillment>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of orderLineCustomFields\"\r\n        [customField]=\"customField\"\r\n    />\r\n    <vdr-order-total-column [heading]=\"'order.total' | translate\" id=\"total\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            <div class=\"unit-price\">\r\n                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ line.linePrice | localeCurrency : order.currencyCode }}\r\n                </div>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\r\n                <vdr-dropdown *ngIf=\"discounts.length\">\r\n                    <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                        {{ 'order.promotions-applied' | translate }}\r\n                    </div>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                            <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\r\n                                discount.description\r\n                            }}</a>\r\n                            <div class=\"promotion-amount\">\r\n                                {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ discount.amount | localeCurrency : order.currencyCode }}\r\n                                </div>\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-order-total-column>\r\n</vdr-order-data-table>\r\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-inline-start:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"] }]
         }], propDecorators: { order: [{
                 type: Input
             }], orderLineCustomFields: [{
@@ -788,7 +810,7 @@ class DraftOrderVariantSelectorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DraftOrderVariantSelectorComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DraftOrderVariantSelectorComponent, selector: "vdr-draft-order-variant-selector", inputs: { currencyCode: "currencyCode", orderLineCustomFields: "orderLineCustomFields" }, outputs: { addItem: "addItem" }, ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-block\">\r\n        <h4 class=\"card-title\">{{ 'order.add-item-to-order' | translate }}</h4>\r\n        <vdr-product-variant-selector\r\n            (productSelected)=\"selectedVariantId$.next($event.productVariantId)\"\r\n        ></vdr-product-variant-selector>\r\n    </div>\r\n    <div class=\"card-block\" *ngIf=\"selectedVariant$ | async as selectedVariant\">\r\n        <div class=\"variant-details\">\r\n            <img class=\"mr-2\" [src]=\"selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32\">\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.name }}</div>\r\n                <div class=\"small\">{{ selectedVariant?.sku }}</div>\r\n            </div>\r\n            <div class=\"details ml-4\">\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-on-hand' | translate }}: {{ selectedVariant.stockOnHand }}\r\n                </div>\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-allocated' | translate }}: {{ selectedVariant.stockAllocated }}\r\n                </div>\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.priceWithTax | localeCurrency: currencyCode }}</div>\r\n                <div class=\"small\" [title]=\"'order.net-price' | translate\">\r\n                    {{ selectedVariant?.price | localeCurrency: currencyCode }}\r\n                </div>\r\n            </div>\r\n            <div>\r\n                <input [disabled]=\"!selectedVariant\" type=\"number\" min=\"0\" [(ngModel)]=\"quantity\" />\r\n            </div>\r\n            <button\r\n                [disabled]=\"!selectedVariant\"\r\n                class=\"btn btn-small btn-primary\"\r\n                (click)=\"addItemClick(selectedVariant)\"\r\n            >\r\n                {{ 'order.add-item-to-order' | translate }}\r\n            </button>\r\n        </div>\r\n        <ng-container *ngIf=\"orderLineCustomFields.length\">\r\n            <div class=\"custom-field\" *ngFor=\"let field of orderLineCustomFields\">\r\n                <vdr-custom-field-control\r\n                    [compact]=\"true\"\r\n                    [readonly]=\"false\"\r\n                    [customField]=\"field\"\r\n                    [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                ></vdr-custom-field-control>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: [".variant-details{display:flex;align-items:center}.variant-details img{border-radius:var(--border-radius-img);width:32px;height:32px}.variant-details .details{font-size:.65rem;line-height:.7rem}.variant-details input{width:48px;margin:0 6px}.variant-details .small{font-size:11px;color:var(--color-text-300)}\n"], dependencies: [{ 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DraftOrderVariantSelectorComponent, selector: "vdr-draft-order-variant-selector", inputs: { currencyCode: "currencyCode", orderLineCustomFields: "orderLineCustomFields" }, outputs: { addItem: "addItem" }, ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-block\">\r\n        <h4 class=\"card-title\">{{ 'order.add-item-to-order' | translate }}</h4>\r\n        <vdr-product-variant-selector\r\n            (productSelected)=\"selectedVariantId$.next($event.productVariantId)\"\r\n        ></vdr-product-variant-selector>\r\n    </div>\r\n    <div class=\"card-block\" *ngIf=\"selectedVariant$ | async as selectedVariant\">\r\n        <div class=\"variant-details\">\r\n            <img class=\"mr-2\" [src]=\"selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32\">\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.name }}</div>\r\n                <div class=\"small\">{{ selectedVariant?.sku }}</div>\r\n            </div>\r\n            <div class=\"details ml-4\">\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-on-hand' | translate }}: {{ selectedVariant.stockOnHand }}\r\n                </div>\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-allocated' | translate }}: {{ selectedVariant.stockAllocated }}\r\n                </div>\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.priceWithTax | localeCurrency: currencyCode }}</div>\r\n                <div class=\"small\" [title]=\"'order.net-price' | translate\">\r\n                    {{ selectedVariant?.price | localeCurrency: currencyCode }}\r\n                </div>\r\n            </div>\r\n            <div>\r\n                <input [disabled]=\"!selectedVariant\" type=\"number\" min=\"0\" [(ngModel)]=\"quantity\" />\r\n            </div>\r\n            <button\r\n                [disabled]=\"!selectedVariant\"\r\n                class=\"btn btn-small btn-primary\"\r\n                (click)=\"addItemClick(selectedVariant)\"\r\n            >\r\n                {{ 'order.add-item-to-order' | translate }}\r\n            </button>\r\n        </div>\r\n        <ng-container *ngIf=\"orderLineCustomFields.length\">\r\n            <div class=\"custom-field\" *ngFor=\"let field of orderLineCustomFields\">\r\n                <vdr-custom-field-control\r\n                    [compact]=\"true\"\r\n                    [readonly]=\"false\"\r\n                    [customField]=\"field\"\r\n                    [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                ></vdr-custom-field-control>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: [".variant-details{display:flex;align-items:center}.variant-details img{border-radius:var(--border-radius-img);width:32px;height:32px}.variant-details .details{font-size:.65rem;line-height:.7rem}.variant-details input{width:48px;margin:0 6px}.variant-details .small{font-size:11px;color:var(--color-text-300)}\n"], dependencies: [{ 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DraftOrderVariantSelectorComponent, decorators: [{
             type: Component,
@@ -957,7 +979,7 @@ class DraftOrderDetailComponent extends TypedBaseDetailComponent {
         // empty
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DraftOrderDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: OrderTransitionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DraftOrderDetailComponent, selector: "vdr-draft-order-detail", 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\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"draft-order-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"completeOrder()\"\r\n                [disabled]=\"!order.customer || !order.lines.length || !order.shippingLines.length\"\r\n            >\r\n                <clr-icon shape=\"check\"></clr-icon>\r\n                {{ 'order.complete-draft-order' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"deleteOrder()\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'order.delete-draft-order' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\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$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon *ngIf=\"!order.customer\" shape=\"unknown-status\" class=\"is-warning\"></clr-icon>\r\n                <clr-icon *ngIf=\"order.customer\" shape=\"check\" class=\"is-success\"></clr-icon>\r\n            </ng-template>\r\n            <vdr-customer-label\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.customer\"\r\n                [customer]=\"order.customer\"\r\n            ></vdr-customer-label>\r\n            <button class=\"button-small\" (click)=\"setCustomer()\">\r\n                {{ 'order.set-customer-for-order' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.billing-address' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.billingAddress.streetLine1\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.billingAddress.streetLine1\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.billingAddress\"\r\n                [address]=\"order.billingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small\" (click)=\"setBillingAddress()\">\r\n                {{ 'order.set-billing-address' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.shipping' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.shippingAddress.streetLine1 || !order.shippingLines.length\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.shippingAddress.streetLine1 && order.shippingLines.length\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.shippingAddress\"\r\n                [address]=\"order.shippingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small mr-2\" (click)=\"setShippingAddress()\">\r\n                {{ 'order.set-shipping-address' | translate }}\r\n            </button>\r\n\r\n            <div *ngFor=\"let shippingLine of order.shippingLines\">\r\n                {{ shippingLine.shippingMethod.name }}\r\n            </div>\r\n            <button class=\"button-small\" (click)=\"setShippingMethod()\">\r\n                {{ 'order.set-shipping-method' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <button\r\n                *ngIf=\"order.couponCodes.length === 0 && !displayCouponCodeInput\"\r\n                class=\"button-small\"\r\n                (click)=\"displayCouponCodeInput = !displayCouponCodeInput\"\r\n            >\r\n                {{ 'order.set-coupon-codes' | translate }}\r\n            </button>\r\n            <div *ngIf=\"order.couponCodes.length || displayCouponCodeInput\">\r\n                <label>{{ 'order.set-coupon-codes' | translate }}</label>\r\n                <vdr-coupon-code-selector\r\n                    [couponCodes]=\"order.couponCodes\"\r\n                    (addCouponCode)=\"applyCouponCode($event)\"\r\n                    (removeCouponCode)=\"removeCouponCode($event)\"\r\n                ></vdr-coupon-code-selector>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <vdr-page-block>\r\n        <vdr-card>\r\n            <vdr-draft-order-variant-selector\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                (addItem)=\"addItemToOrder($event)\"\r\n            ></vdr-draft-order-variant-selector>\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [isDraft]=\"true\"\r\n                (adjust)=\"adjustOrderLine($event)\"\r\n                (remove)=\"removeOrderLine($event)\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\">\r\n            <ng-container *ngIf=\"order.taxSummary.length\">\r\n                <table class=\"table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>{{ 'common.description' | translate }}</th>\r\n                            <th>{{ 'order.tax-rate' | translate }}</th>\r\n                            <th>{{ 'order.tax-base' | translate }}</th>\r\n                            <th>{{ 'order.tax-total' | translate }}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let row of order.taxSummary\">\r\n                            <td>{{ row.description }}</td>\r\n                            <td>{{ row.taxRate / 100 | percent }}</td>\r\n                            <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                            <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </vdr-card>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"draft-order-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n\r\n        <vdr-order-custom-fields-card\r\n            [customFieldsConfig]=\"customFields\"\r\n            [customFieldValues]=\"order.customFields\"\r\n            (updateClick)=\"updateCustomFields($event)\"\r\n        ></vdr-order-custom-fields-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { 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: "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.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { 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: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "component", type: OrderCustomFieldsCardComponent, selector: "vdr-order-custom-fields-card", inputs: ["customFieldsConfig", "customFieldValues"], outputs: ["updateClick"] }, { kind: "component", type: OrderTableComponent, selector: "vdr-order-table", inputs: ["order", "orderLineCustomFields", "isDraft"], outputs: ["adjust", "remove"] }, { kind: "component", type: DraftOrderVariantSelectorComponent, selector: "vdr-draft-order-variant-selector", inputs: ["currencyCode", "orderLineCustomFields"], outputs: ["addItem"] }, { kind: "component", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: ["couponCodes", "control"], outputs: ["addCouponCode", "removeCouponCode"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DraftOrderDetailComponent, selector: "vdr-draft-order-detail", 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\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"draft-order-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"completeOrder()\"\r\n                [disabled]=\"!order.customer || !order.lines.length || !order.shippingLines.length\"\r\n            >\r\n                <clr-icon shape=\"check\"></clr-icon>\r\n                {{ 'order.complete-draft-order' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"deleteOrder()\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'order.delete-draft-order' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\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$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon *ngIf=\"!order.customer\" shape=\"unknown-status\" class=\"is-warning\"></clr-icon>\r\n                <clr-icon *ngIf=\"order.customer\" shape=\"check\" class=\"is-success\"></clr-icon>\r\n            </ng-template>\r\n            <vdr-customer-label\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.customer\"\r\n                [customer]=\"order.customer\"\r\n            ></vdr-customer-label>\r\n            <button class=\"button-small\" (click)=\"setCustomer()\">\r\n                {{ 'order.set-customer-for-order' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.billing-address' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.billingAddress.streetLine1\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.billingAddress.streetLine1\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.billingAddress\"\r\n                [address]=\"order.billingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small\" (click)=\"setBillingAddress()\">\r\n                {{ 'order.set-billing-address' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.shipping' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.shippingAddress.streetLine1 || !order.shippingLines.length\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.shippingAddress.streetLine1 && order.shippingLines.length\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.shippingAddress\"\r\n                [address]=\"order.shippingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small mr-2\" (click)=\"setShippingAddress()\">\r\n                {{ 'order.set-shipping-address' | translate }}\r\n            </button>\r\n\r\n            <div *ngFor=\"let shippingLine of order.shippingLines\">\r\n                {{ shippingLine.shippingMethod.name }}\r\n            </div>\r\n            <button class=\"button-small\" (click)=\"setShippingMethod()\">\r\n                {{ 'order.set-shipping-method' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <button\r\n                *ngIf=\"order.couponCodes.length === 0 && !displayCouponCodeInput\"\r\n                class=\"button-small\"\r\n                (click)=\"displayCouponCodeInput = !displayCouponCodeInput\"\r\n            >\r\n                {{ 'order.set-coupon-codes' | translate }}\r\n            </button>\r\n            <div *ngIf=\"order.couponCodes.length || displayCouponCodeInput\">\r\n                <label>{{ 'order.set-coupon-codes' | translate }}</label>\r\n                <vdr-coupon-code-selector\r\n                    [couponCodes]=\"order.couponCodes\"\r\n                    (addCouponCode)=\"applyCouponCode($event)\"\r\n                    (removeCouponCode)=\"removeCouponCode($event)\"\r\n                ></vdr-coupon-code-selector>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <vdr-page-block>\r\n        <vdr-card>\r\n            <vdr-draft-order-variant-selector\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                (addItem)=\"addItemToOrder($event)\"\r\n            ></vdr-draft-order-variant-selector>\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [isDraft]=\"true\"\r\n                (adjust)=\"adjustOrderLine($event)\"\r\n                (remove)=\"removeOrderLine($event)\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\">\r\n            <ng-container *ngIf=\"order.taxSummary.length\">\r\n                <table class=\"table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>{{ 'common.description' | translate }}</th>\r\n                            <th>{{ 'order.tax-rate' | translate }}</th>\r\n                            <th>{{ 'order.tax-base' | translate }}</th>\r\n                            <th>{{ 'order.tax-total' | translate }}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let row of order.taxSummary\">\r\n                            <td>{{ row.description }}</td>\r\n                            <td>{{ row.taxRate / 100 | percent }}</td>\r\n                            <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                            <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </vdr-card>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"draft-order-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n\r\n        <vdr-order-custom-fields-card\r\n            [customFieldsConfig]=\"customFields\"\r\n            [customFieldValues]=\"order.customFields\"\r\n            (updateClick)=\"updateCustomFields($event)\"\r\n        ></vdr-order-custom-fields-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { 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: "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.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { 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: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "component", type: OrderCustomFieldsCardComponent, selector: "vdr-order-custom-fields-card", inputs: ["customFieldsConfig", "customFieldValues"], outputs: ["updateClick"] }, { kind: "component", type: OrderTableComponent, selector: "vdr-order-table", inputs: ["order", "orderLineCustomFields", "isDraft"], outputs: ["adjust", "remove"] }, { kind: "component", type: DraftOrderVariantSelectorComponent, selector: "vdr-draft-order-variant-selector", inputs: ["currencyCode", "orderLineCustomFields"], outputs: ["addItem"] }, { kind: "component", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: ["couponCodes", "control"], outputs: ["addCouponCode", "removeCouponCode"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DraftOrderDetailComponent, decorators: [{
             type: Component,
@@ -1028,7 +1050,7 @@ class FulfillOrderDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FulfillOrderDialogComponent, deps: [{ token: i1.DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: FulfillOrderDialogComponent, selector: "vdr-fulfill-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\r\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                    <th>{{ 'order.fulfill' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\r\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\r\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\r\n                        type=\"number\"\r\n                        [max]=\"fulfillmentQuantities[line.id].max\"\r\n                        min=\"0\"\r\n                    />\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"shipping-details\">\r\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\r\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\r\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\r\n        <vdr-configurable-input\r\n            [operationDefinition]=\"fulfillmentHandlerDef\"\r\n            [operation]=\"fulfillmentHandler\"\r\n            [formControl]=\"fulfillmentHandlerControl\"\r\n            [removable]=\"false\"\r\n        ></vdr-configurable-input>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        {{ 'order.create-fulfillment' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}:host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}.fulfillment-wrapper .shipping-details{margin-top:24px}@media screen and (min-width: 768px){.fulfillment-wrapper .shipping-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"], dependencies: [{ 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.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: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position"], outputs: ["remove"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: FulfillOrderDialogComponent, selector: "vdr-fulfill-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\r\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                    <th>{{ 'order.fulfill' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\r\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\r\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\r\n                        type=\"number\"\r\n                        [max]=\"fulfillmentQuantities[line.id].max\"\r\n                        min=\"0\"\r\n                    />\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"shipping-details\">\r\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\r\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\r\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\r\n        <vdr-configurable-input\r\n            [operationDefinition]=\"fulfillmentHandlerDef\"\r\n            [operation]=\"fulfillmentHandler\"\r\n            [formControl]=\"fulfillmentHandlerControl\"\r\n            [removable]=\"false\"\r\n        ></vdr-configurable-input>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        {{ 'order.create-fulfillment' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}:host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}.fulfillment-wrapper .shipping-details{margin-top:24px}@media screen and (min-width: 768px){.fulfillment-wrapper .shipping-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"], dependencies: [{ 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.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: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position"], outputs: ["remove"] }, { 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.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FulfillOrderDialogComponent, decorators: [{
             type: Component,
@@ -1037,11 +1059,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
 class SimpleItemListComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SimpleItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: SimpleItemListComponent, selector: "vdr-simple-item-list", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"items-list\">\r\n    <ul>\r\n        <li *ngFor=\"let item of items\" [title]=\"item.name\">\r\n            <div class=\"quantity\">{{ item.quantity }}</div>\r\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\r\n            {{ item.name }}\r\n        </li>\r\n    </ul>\r\n</div>\r\n", styles: [".items-list{font-size:12px}.items-list ul{margin-top:6px;list-style-type:none;margin-inline-start:2px}.items-list ul li{line-height:14px;text-overflow:ellipsis;overflow:hidden}.items-list .quantity{min-width:16px;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: SimpleItemListComponent, selector: "vdr-simple-item-list", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"items-list\">\r\n    <ul>\r\n        <li *ngFor=\"let item of items\" [title]=\"item.name\">\r\n            <div class=\"quantity\" *ngIf=\"item.quantity != null\">{{ item.quantity }}</div>\r\n            <clr-icon shape=\"times\" size=\"12\" *ngIf=\"item.quantity != null\"></clr-icon>\r\n            {{ item.name }}\r\n        </li>\r\n    </ul>\r\n</div>\r\n", styles: [".items-list{font-size:12px}.items-list ul{margin-top:6px;list-style-type:none;margin-inline-start:2px}.items-list ul li{line-height:14px;text-overflow:ellipsis;overflow:hidden}.items-list .quantity{min-width:16px;display:inline-block}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SimpleItemListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-simple-item-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"items-list\">\r\n    <ul>\r\n        <li *ngFor=\"let item of items\" [title]=\"item.name\">\r\n            <div class=\"quantity\">{{ item.quantity }}</div>\r\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\r\n            {{ item.name }}\r\n        </li>\r\n    </ul>\r\n</div>\r\n", styles: [".items-list{font-size:12px}.items-list ul{margin-top:6px;list-style-type:none;margin-inline-start:2px}.items-list ul li{line-height:14px;text-overflow:ellipsis;overflow:hidden}.items-list .quantity{min-width:16px;display:inline-block}\n"] }]
+            args: [{ selector: 'vdr-simple-item-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"items-list\">\r\n    <ul>\r\n        <li *ngFor=\"let item of items\" [title]=\"item.name\">\r\n            <div class=\"quantity\" *ngIf=\"item.quantity != null\">{{ item.quantity }}</div>\r\n            <clr-icon shape=\"times\" size=\"12\" *ngIf=\"item.quantity != null\"></clr-icon>\r\n            {{ item.name }}\r\n        </li>\r\n    </ul>\r\n</div>\r\n", styles: [".items-list{font-size:12px}.items-list ul{margin-top:6px;list-style-type:none;margin-inline-start:2px}.items-list ul li{line-height:14px;text-overflow:ellipsis;overflow:hidden}.items-list .quantity{min-width:16px;display:inline-block}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }] } });
@@ -1101,7 +1123,7 @@ class FulfillmentStateLabelComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FulfillmentStateLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: FulfillmentStateLabelComponent, selector: "vdr-fulfillment-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Delivered'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n", styles: [":host{font-size:14px}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: FulfillmentStateLabelComponent, selector: "vdr-fulfillment-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Delivered'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n", styles: [":host{font-size:14px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FulfillmentStateLabelComponent, decorators: [{
             type: Component,
@@ -1137,7 +1159,7 @@ class FulfillmentCardComponent {
         return this.fulfillment.nextStates.filter(s => s !== suggested);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FulfillmentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: FulfillmentCardComponent, selector: "vdr-fulfillment-card", inputs: { fulfillment: "fulfillment", order: "order" }, outputs: { transitionState: "transitionState" }, ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-header fulfillment-header\">\r\n        <div>{{ 'order.fulfillment' | translate }}</div>\r\n        <div class=\"fulfillment-state\">\r\n            <vdr-fulfillment-state-label [state]=\"fulfillment?.state\"></vdr-fulfillment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-fulfillment-detail\r\n            *ngIf=\"!!fulfillment\"\r\n            [fulfillmentId]=\"fulfillment?.id\"\r\n            [order]=\"order\"\r\n        ></vdr-fulfillment-detail>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"fulfillment?.nextStates.length\">\r\n        <ng-container *ngIf=\"nextSuggestedState() as suggestedState\">\r\n            <button class=\"btn btn-sm btn-primary\" (click)=\"transitionState.emit(suggestedState)\">\r\n                {{ 'order.set-fulfillment-state' | translate: { state: (suggestedState | stateI18nToken | translate) } }}\r\n            </button>\r\n        </ng-container>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionState.emit(nextState)\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{ 'order.transition-to-state' | translate: { state: (nextState | stateI18nToken | translate) } }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-fulfillment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n", styles: [".fulfillment-header{display:flex;justify-content:space-between;align-items:center}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1$1.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: "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: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: FulfillmentDetailComponent, selector: "vdr-fulfillment-detail", inputs: ["fulfillmentId", "order"] }, { kind: "component", type: FulfillmentStateLabelComponent, selector: "vdr-fulfillment-state-label", inputs: ["state"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: FulfillmentCardComponent, selector: "vdr-fulfillment-card", inputs: { fulfillment: "fulfillment", order: "order" }, outputs: { transitionState: "transitionState" }, ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-header fulfillment-header\">\r\n        <div>{{ 'order.fulfillment' | translate }}</div>\r\n        <div class=\"fulfillment-state\">\r\n            <vdr-fulfillment-state-label [state]=\"fulfillment?.state\"></vdr-fulfillment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-fulfillment-detail\r\n            *ngIf=\"!!fulfillment\"\r\n            [fulfillmentId]=\"fulfillment?.id\"\r\n            [order]=\"order\"\r\n        ></vdr-fulfillment-detail>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"fulfillment?.nextStates.length\">\r\n        <ng-container *ngIf=\"nextSuggestedState() as suggestedState\">\r\n            <button class=\"btn btn-sm btn-primary\" (click)=\"transitionState.emit(suggestedState)\">\r\n                {{ 'order.set-fulfillment-state' | translate: { state: (suggestedState | stateI18nToken | translate) } }}\r\n            </button>\r\n        </ng-container>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionState.emit(nextState)\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{ 'order.transition-to-state' | translate: { state: (nextState | stateI18nToken | translate) } }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-fulfillment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n", styles: [".fulfillment-header{display:flex;justify-content:space-between;align-items:center}.card-footer{display:flex;align-items:center;justify-content:flex-end}\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: "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: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: FulfillmentDetailComponent, selector: "vdr-fulfillment-detail", inputs: ["fulfillmentId", "order"] }, { kind: "component", type: FulfillmentStateLabelComponent, selector: "vdr-fulfillment-state-label", inputs: ["state"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FulfillmentCardComponent, decorators: [{
             type: Component,
@@ -1154,11 +1176,13 @@ class ModificationDetailComponent {
     constructor() {
         this.addedItems = new Map();
         this.removedItems = new Map();
+        this.modifiedItems = new Set();
     }
     ngOnChanges() {
-        const { added, removed } = this.getModifiedLines();
+        const { added, removed, modified } = this.getModifiedLines();
         this.addedItems = added;
         this.removedItems = removed;
+        this.modifiedItems = modified;
     }
     getSurcharge(id) {
         return this.order.surcharges.find(m => m.id === id);
@@ -1175,29 +1199,38 @@ class ModificationDetailComponent {
             quantity: count,
         }));
     }
+    getModifiedItems() {
+        return [...this.modifiedItems].map(line => ({
+            name: line.productVariant.name,
+        }));
+    }
     getModifiedLines() {
         const added = new Map();
         const removed = new Map();
+        const modified = new Set();
         for (const modificationLine of this.modification.lines || []) {
             const line = this.order.lines.find(l => l.id === modificationLine.orderLineId);
             if (!line) {
                 continue;
             }
-            if (modificationLine.quantity < 0) {
+            if (modificationLine.quantity === 0) {
+                modified.add(line);
+            }
+            else if (modificationLine.quantity < 0) {
                 removed.set(line, -modificationLine.quantity);
             }
             else {
                 added.set(line, modificationLine.quantity);
             }
         }
-        return { added, removed };
+        return { added, removed, modified };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ModificationDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ModificationDetailComponent, selector: "vdr-modification-detail", inputs: { order: "order", modification: "modification" }, usesOnChanges: true, ngImport: i0, template: "<vdr-labeled-data [label]=\"'common.ID' | translate\">{{ modification.id }}</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"modification.note\" [label]=\"'order.note' | translate\">{{\r\n    modification.note\r\n}}</vdr-labeled-data>\r\n<vdr-labeled-data *ngFor=\"let surcharge of modification.surcharges\" [label]=\"'order.surcharges' | translate\">\r\n    {{ getSurcharge(surcharge.id)?.description }}\r\n    {{ getSurcharge(surcharge.id)?.priceWithTax | localeCurrency: order.currencyCode }}</vdr-labeled-data\r\n>\r\n<vdr-labeled-data *ngIf=\"getAddedItems().length\" [label]=\"'order.added-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getAddedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"getRemovedItems().length\" [label]=\"'order.removed-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getRemovedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n", styles: [""], dependencies: [{ 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: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: SimpleItemListComponent, selector: "vdr-simple-item-list", inputs: ["items"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ModificationDetailComponent, selector: "vdr-modification-detail", inputs: { order: "order", modification: "modification" }, usesOnChanges: true, ngImport: i0, template: "<vdr-labeled-data [label]=\"'common.ID' | translate\">{{ modification.id }}</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"modification.note\" [label]=\"'order.note' | translate\">{{\r\n    modification.note\r\n}}</vdr-labeled-data>\r\n<vdr-labeled-data *ngFor=\"let surcharge of modification.surcharges\" [label]=\"'order.surcharges' | translate\">\r\n    {{ getSurcharge(surcharge.id)?.description }}\r\n    {{ getSurcharge(surcharge.id)?.priceWithTax | localeCurrency: order.currencyCode }}</vdr-labeled-data\r\n>\r\n<vdr-labeled-data *ngIf=\"getAddedItems().length\" [label]=\"'order.added-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getAddedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"getRemovedItems().length\" [label]=\"'order.removed-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getRemovedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"getModifiedItems().length\" [label]=\"'order.modified-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getModifiedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n", styles: [""], dependencies: [{ 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: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: SimpleItemListComponent, selector: "vdr-simple-item-list", inputs: ["items"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ModificationDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-modification-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-labeled-data [label]=\"'common.ID' | translate\">{{ modification.id }}</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"modification.note\" [label]=\"'order.note' | translate\">{{\r\n    modification.note\r\n}}</vdr-labeled-data>\r\n<vdr-labeled-data *ngFor=\"let surcharge of modification.surcharges\" [label]=\"'order.surcharges' | translate\">\r\n    {{ getSurcharge(surcharge.id)?.description }}\r\n    {{ getSurcharge(surcharge.id)?.priceWithTax | localeCurrency: order.currencyCode }}</vdr-labeled-data\r\n>\r\n<vdr-labeled-data *ngIf=\"getAddedItems().length\" [label]=\"'order.added-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getAddedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"getRemovedItems().length\" [label]=\"'order.removed-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getRemovedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n" }]
+            args: [{ selector: 'vdr-modification-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-labeled-data [label]=\"'common.ID' | translate\">{{ modification.id }}</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"modification.note\" [label]=\"'order.note' | translate\">{{\r\n    modification.note\r\n}}</vdr-labeled-data>\r\n<vdr-labeled-data *ngFor=\"let surcharge of modification.surcharges\" [label]=\"'order.surcharges' | translate\">\r\n    {{ getSurcharge(surcharge.id)?.description }}\r\n    {{ getSurcharge(surcharge.id)?.priceWithTax | localeCurrency: order.currencyCode }}</vdr-labeled-data\r\n>\r\n<vdr-labeled-data *ngIf=\"getAddedItems().length\" [label]=\"'order.added-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getAddedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"getRemovedItems().length\" [label]=\"'order.removed-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getRemovedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"getModifiedItems().length\" [label]=\"'order.modified-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getModifiedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n" }]
         }], propDecorators: { order: [{
                 type: Input
             }], modification: [{
@@ -1238,7 +1271,7 @@ class OrderProcessNodeComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderProcessNodeComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderProcessNodeComponent, selector: "vdr-order-process-node", inputs: { node: "node", index: "index", active: "active" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"node-wrapper\" [ngStyle]=\"getStyle()\" [class.active]=\"active$ | async\">\r\n    <div\r\n        class=\"node\"\r\n        [class.active-target]=\"activeTarget$ | async\"\r\n    >\r\n        {{ node.name | stateI18nToken | translate }}\r\n    </div>\r\n    <div class=\"cancelled-wrapper\" *ngIf=\"isCancellable\">\r\n        <div class=\"cancelled-edge\">\r\n        </div>\r\n        <clr-icon shape=\"dot-circle\"></clr-icon>\r\n        <div class=\"cancelled-node\">\r\n            {{ cancelledState | stateI18nToken | translate }}\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.node-wrapper{position:absolute;z-index:1;display:flex;align-items:center}.node{display:inline-block;border:2px solid var(--color-component-border-200);border-radius:3px;padding:3px 6px;z-index:1;background-color:var(--color-component-bg-100);opacity:.7;transition:opacity .2s,background-color .2s,color .2s;cursor:default}.node.active-target{border-color:var(--color-primary-500);opacity:.9}.cancelled-wrapper{display:flex;align-items:center;color:var(--color-grey-300);transition:color .2s,opacity .2s;opacity:.7}.cancelled-edge{width:48px;height:2px;background-color:var(--color-component-bg-300);transition:background-color .2s}clr-icon{margin-inline-start:-1px}.cancelled-node{margin-inline-start:6px}.active .cancelled-wrapper{opacity:1}.active .node{opacity:1;background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-primary-100)}.active .cancelled-wrapper{color:var(--color-error-500)}.active .cancelled-edge{background-color:var(--color-error-500)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderProcessNodeComponent, selector: "vdr-order-process-node", inputs: { node: "node", index: "index", active: "active" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"node-wrapper\" [ngStyle]=\"getStyle()\" [class.active]=\"active$ | async\">\r\n    <div\r\n        class=\"node\"\r\n        [class.active-target]=\"activeTarget$ | async\"\r\n    >\r\n        {{ node.name | stateI18nToken | translate }}\r\n    </div>\r\n    <div class=\"cancelled-wrapper\" *ngIf=\"isCancellable\">\r\n        <div class=\"cancelled-edge\">\r\n        </div>\r\n        <clr-icon shape=\"dot-circle\"></clr-icon>\r\n        <div class=\"cancelled-node\">\r\n            {{ cancelledState | stateI18nToken | translate }}\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.node-wrapper{position:absolute;z-index:1;display:flex;align-items:center}.node{display:inline-block;border:2px solid var(--color-component-border-200);border-radius:3px;padding:3px 6px;z-index:1;background-color:var(--color-component-bg-100);opacity:.7;transition:opacity .2s,background-color .2s,color .2s;cursor:default}.node.active-target{border-color:var(--color-primary-500);opacity:.9}.cancelled-wrapper{display:flex;align-items:center;color:var(--color-grey-300);transition:color .2s,opacity .2s;opacity:.7}.cancelled-edge{width:48px;height:2px;background-color:var(--color-component-bg-300);transition:background-color .2s}clr-icon{margin-inline-start:-1px}.cancelled-node{margin-inline-start:6px}.active .cancelled-wrapper{opacity:1}.active .node{opacity:1;background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-primary-100)}.active .cancelled-wrapper{color:var(--color-error-500)}.active .cancelled-edge{background-color:var(--color-error-500)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderProcessNodeComponent, decorators: [{
             type: Component,
@@ -1278,7 +1311,7 @@ class OrderProcessEdgeComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderProcessEdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderProcessEdgeComponent, selector: "vdr-order-process-edge", inputs: { from: "from", to: "to", index: "index" }, ngImport: i0, template: "<div\r\n    [attr.data-from]=\"from.node.name\"\r\n    [attr.data-to]=\"to.node.name\"\r\n    [ngStyle]=\"getStyle()\"\r\n    [class.active]=\"active$ | async\"\r\n    class=\"edge\">\r\n    <clr-icon shape=\"arrow\" flip=\"vertical\" class=\"arrow\"></clr-icon>\r\n</div>\r\n", styles: [".edge{position:absolute;border:1px solid var(--color-component-border-200);background-color:var(--color-component-bg-300);opacity:.3;transition:border .2s,opacity .2s,background-color .2s}.edge.active{border-color:var(--color-primary-500);background-color:var(--color-primary-500);opacity:1}.edge.active .arrow{color:var(--color-primary-500)}.edge .arrow{position:absolute;bottom:-4px;left:-8px;color:var(--color-grey-300)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderProcessEdgeComponent, selector: "vdr-order-process-edge", inputs: { from: "from", to: "to", index: "index" }, ngImport: i0, template: "<div\r\n    [attr.data-from]=\"from.node.name\"\r\n    [attr.data-to]=\"to.node.name\"\r\n    [ngStyle]=\"getStyle()\"\r\n    [class.active]=\"active$ | async\"\r\n    class=\"edge\">\r\n    <clr-icon shape=\"arrow\" flip=\"vertical\" class=\"arrow\"></clr-icon>\r\n</div>\r\n", styles: [".edge{position:absolute;border:1px solid var(--color-component-border-200);background-color:var(--color-component-bg-300);opacity:.3;transition:border .2s,opacity .2s,background-color .2s}.edge.active{border-color:var(--color-primary-500);background-color:var(--color-primary-500);opacity:1}.edge.active .arrow{color:var(--color-primary-500)}.edge .arrow{position:absolute;bottom:-4px;left:-8px;color:var(--color-grey-300)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderProcessEdgeComponent, decorators: [{
             type: Component,
@@ -1394,34 +1427,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
             args: [{ selector: 'vdr-order-process-graph-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.order-state-diagram' | translate }}</ng-template>\r\n\r\n<vdr-order-process-graph [states]=\"states\" [initialState]=\"activeState\"></vdr-order-process-graph>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1.ServerConfigService }]; } });
+class PaymentForRefundSelectorComponent {
+    constructor() {
+        this.paymentSelected = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: PaymentForRefundSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: PaymentForRefundSelectorComponent, selector: "vdr-payment-for-refund-selector", inputs: { refundablePayments: "refundablePayments", order: "order" }, outputs: { paymentSelected: "paymentSelected" }, ngImport: i0, template: "<vdr-card\r\n        [title]=\"'order.payment' | translate\"\r\n        [class.selected]=\"payment.selected\"\r\n        [class.unselected]=\"!payment.selected\"\r\n        *ngFor=\"let payment of refundablePayments\"\r\n>\r\n    <ng-template vdrCardControls>\r\n        <vdr-select-toggle\r\n                size=\"small\"\r\n                [title]=\"'order.refund-this-payment' | translate\"\r\n                [label]=\"'order.refund-this-payment' | translate\"\r\n                [disabled]=\"refundablePayments.length === 1\"\r\n                [(selected)]=\"payment.selected\"\r\n                (selectedChange)=\"paymentSelected.emit({ payment: payment, selected: $event })\"\r\n        ></vdr-select-toggle>\r\n    </ng-template>\r\n    <div class=\"form-grid\">\r\n        <vdr-labeled-data [label]=\"'order.payment-method' | translate\">\r\n            {{ payment.method }}\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'order.transaction-id' | translate\">\r\n            {{ payment.transactionId }}\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'order.payment-amount' | translate\">\r\n            {{ payment.amount | localeCurrency : order.currencyCode }}\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'order.refundable-amount' | translate\">\r\n            {{ payment.refundableAmount | localeCurrency : order.currencyCode }}\r\n        </vdr-labeled-data>\r\n    </div>\r\n    <vdr-form-field [label]=\"'order.refund-amount' | translate\">\r\n        <vdr-currency-input\r\n                [readonly]=\"!payment.selected\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                [formControl]=\"payment.amountToRefundControl\"\r\n        ></vdr-currency-input>\r\n    </vdr-form-field>\r\n</vdr-card>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "component", type: i1.SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: PaymentForRefundSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-payment-for-refund-selector', changeDetection: ChangeDetectionStrategy.Default, template: "<vdr-card\r\n        [title]=\"'order.payment' | translate\"\r\n        [class.selected]=\"payment.selected\"\r\n        [class.unselected]=\"!payment.selected\"\r\n        *ngFor=\"let payment of refundablePayments\"\r\n>\r\n    <ng-template vdrCardControls>\r\n        <vdr-select-toggle\r\n                size=\"small\"\r\n                [title]=\"'order.refund-this-payment' | translate\"\r\n                [label]=\"'order.refund-this-payment' | translate\"\r\n                [disabled]=\"refundablePayments.length === 1\"\r\n                [(selected)]=\"payment.selected\"\r\n                (selectedChange)=\"paymentSelected.emit({ payment: payment, selected: $event })\"\r\n        ></vdr-select-toggle>\r\n    </ng-template>\r\n    <div class=\"form-grid\">\r\n        <vdr-labeled-data [label]=\"'order.payment-method' | translate\">\r\n            {{ payment.method }}\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'order.transaction-id' | translate\">\r\n            {{ payment.transactionId }}\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'order.payment-amount' | translate\">\r\n            {{ payment.amount | localeCurrency : order.currencyCode }}\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'order.refundable-amount' | translate\">\r\n            {{ payment.refundableAmount | localeCurrency : order.currencyCode }}\r\n        </vdr-labeled-data>\r\n    </div>\r\n    <vdr-form-field [label]=\"'order.refund-amount' | translate\">\r\n        <vdr-currency-input\r\n                [readonly]=\"!payment.selected\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                [formControl]=\"payment.amountToRefundControl\"\r\n        ></vdr-currency-input>\r\n    </vdr-form-field>\r\n</vdr-card>", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { refundablePayments: [{
+                type: Input
+            }], order: [{
+                type: Input
+            }], paymentSelected: [{
+                type: Output
+            }] } });
 class RefundOrderDialogComponent {
     constructor(i18nService) {
         this.i18nService = i18nService;
         this.lineQuantities = {};
-        this.refundShipping = false;
-        this.adjustment = 0;
+        this.refundablePayments = [];
+        this.refundShippingLineIds = [];
         this.reasons = getAppConfig().cancellationReasons ?? [
             marker('order.refund-reason-customer-request'),
             marker('order.refund-reason-not-available'),
         ];
+        this.manuallySetRefundTotal = false;
+        this.refundTotal = 0;
         this.reasons = this.reasons.map(r => this.i18nService.translate(r));
     }
-    get refundTotal() {
-        const itemTotal = this.order.lines.reduce((total, line) => {
-            const lineRef = this.lineQuantities[line.id];
-            const refundCount = (lineRef.refund && lineRef.quantity) || 0;
-            return total + line.proratedUnitPriceWithTax * refundCount;
-        }, 0);
-        return itemTotal + (this.refundShipping ? this.order.shippingWithTax : 0) + this.adjustment;
-    }
-    get settledPaymentsTotal() {
-        return this.settledPayments
-            .map(payment => {
-            const paymentTotal = payment.amount;
-            const alreadyRefundedTotal = summate(payment.refunds.filter(r => r.state !== 'Failed'), 'total');
-            return paymentTotal - alreadyRefundedTotal;
-        })
-            .reduce((sum, amount) => sum + amount, 0);
+    get totalRefundableAmount() {
+        return summate(this.refundablePayments, 'refundableAmount');
+    }
+    get amountToRefundTotal() {
+        return this.refundablePayments.reduce((total, payment) => total + payment.amountToRefundControl.value, 0);
     }
     lineCanBeRefundedOrCancelled(line) {
         const refundedCount = this.order.payments
@@ -1430,30 +1472,86 @@ class RefundOrderDialogComponent {
             .reduce((all, refund) => [...all, ...refund.lines], [])
             .filter(refundLine => refundLine.orderLineId === line.id)
             .reduce((sum, refundLine) => sum + refundLine.quantity, 0) ?? 0;
-        return refundedCount < line.quantity;
+        return refundedCount < line.orderPlacedQuantity;
     }
     ngOnInit() {
         this.lineQuantities = this.order.lines.reduce((result, line) => ({
             ...result,
             [line.id]: {
                 quantity: 0,
-                refund: false,
+                refund: true,
                 cancel: false,
             },
         }), {});
-        this.settledPayments = (this.order.payments || []).filter(p => p.state === 'Settled');
-        if (this.settledPayments.length) {
-            this.selectedPayment = this.settledPayments[0];
+        this.refundablePayments = getRefundablePayments(this.order.payments);
+    }
+    updateRefundTotal() {
+        if (!this.manuallySetRefundTotal) {
+            const itemTotal = this.order.lines.reduce((total, line) => {
+                const lineRef = this.lineQuantities[line.id];
+                const refundCount = lineRef.quantity || 0;
+                return total + line.proratedUnitPriceWithTax * refundCount;
+            }, 0);
+            const shippingTotal = this.order.shippingLines.reduce((total, line) => {
+                if (this.refundShippingLineIds.includes(line.id)) {
+                    return total + line.discountedPriceWithTax;
+                }
+                else {
+                    return total;
+                }
+            }, 0);
+            this.refundTotal = itemTotal + shippingTotal;
+        }
+        // allocate the refund total across the refundable payments
+        const refundablePayments = this.refundablePayments.filter(p => p.selected);
+        let refundsAllocated = 0;
+        for (const payment of refundablePayments) {
+            const amountToRefund = Math.min(payment.refundableAmount, this.refundTotal - refundsAllocated);
+            payment.amountToRefundControl.setValue(amountToRefund);
+            refundsAllocated += amountToRefund;
+        }
+    }
+    toggleShippingRefund(lineId) {
+        const index = this.refundShippingLineIds.indexOf(lineId);
+        if (index === -1) {
+            this.refundShippingLineIds.push(lineId);
+        }
+        else {
+            this.refundShippingLineIds.splice(index, 1);
+        }
+        this.updateRefundTotal();
+    }
+    onRefundQuantityChange(orderLineId, quantity) {
+        this.manuallySetRefundTotal = false;
+        const selectionLine = this.lineQuantities[orderLineId];
+        if (selectionLine) {
+            const previousQuantity = selectionLine.quantity;
+            if (quantity === 0) {
+                selectionLine.cancel = false;
+            }
+            else if (previousQuantity === 0 && quantity > 0) {
+                selectionLine.cancel = true;
+            }
+            selectionLine.quantity = quantity;
+            this.updateRefundTotal();
         }
     }
-    handleZeroQuantity(line) {
-        if (line?.quantity === 0) {
-            line.cancel = false;
-            line.refund = false;
+    onPaymentSelected(payment, selected) {
+        if (selected) {
+            const outstandingRefundAmount = this.refundTotal -
+                this.refundablePayments
+                    .filter(p => p.id !== payment.id)
+                    .reduce((total, p) => total + p.amountToRefundControl.value, 0);
+            if (0 < outstandingRefundAmount) {
+                payment.amountToRefundControl.setValue(Math.min(outstandingRefundAmount, payment.refundableAmount));
+            }
+        }
+        else {
+            payment.amountToRefundControl.setValue(0);
         }
     }
     isRefunding() {
-        const result = Object.values(this.lineQuantities).reduce((isRefunding, line) => isRefunding || (0 < line.quantity && line.refund), false);
+        const result = Object.values(this.lineQuantities).reduce((isRefunding, line) => isRefunding || 0 < line.quantity, false);
         return result;
     }
     isCancelling() {
@@ -1461,38 +1559,31 @@ class RefundOrderDialogComponent {
         return result;
     }
     canSubmit() {
-        if (this.isRefunding()) {
-            return !!(this.selectedPayment &&
-                this.reason &&
-                0 < this.refundTotal &&
-                this.refundTotal <= this.settledPaymentsTotal);
-        }
-        else if (this.isCancelling()) {
-            return !!this.reason;
-        }
-        return false;
+        return 0 < this.refundTotal && this.amountToRefundTotal === this.refundTotal && !!this.reason;
     }
     select() {
-        const payment = this.selectedPayment;
-        if (payment) {
-            const refundLines = this.getOrderLineInput(line => line.refund);
-            const cancelLines = this.getOrderLineInput(line => line.cancel);
-            this.resolveWith({
-                refund: {
+        const refundLines = this.getOrderLineInput(() => true);
+        const cancelLines = this.getOrderLineInput(line => line.cancel);
+        this.resolveWith({
+            refunds: this.refundablePayments
+                .filter(rp => rp.selected && 0 < rp.amountToRefundControl.value)
+                .map(payment => {
+                return {
                     lines: refundLines,
                     reason: this.reason,
-                    shipping: this.refundShipping ? this.order.shippingWithTax : 0,
-                    adjustment: this.adjustment,
                     paymentId: payment.id,
-                },
-                cancel: {
-                    lines: cancelLines,
-                    orderId: this.order.id,
-                    reason: this.reason,
-                    cancelShipping: this.refundShipping,
-                },
-            });
-        }
+                    amount: payment.amountToRefundControl.value,
+                    shipping: 0,
+                    adjustment: 0,
+                };
+            }),
+            cancel: {
+                lines: cancelLines,
+                orderId: this.order.id,
+                reason: this.reason,
+                cancelShipping: this.refundShippingLineIds.length > 0,
+            },
+        });
     }
     cancel() {
         this.resolveWith();
@@ -1506,11 +1597,11 @@ class RefundOrderDialogComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RefundOrderDialogComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", 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    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.prorated-unit-price' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.refund' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr *ngFor=\"let line of order.lines\" class=\"order-line\">\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    <div class=\"prorated-wrapper\">\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                    </div>\r\n                </td>\r\n                <td class=\"align-middle quantity-col\">\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                        (input)=\"handleZeroQuantity(lineQuantities[line.id])\"\r\n                    />\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                    <div class=\"cancel-checkbox-wrapper\">\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].refund\"\r\n                        />\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                    <div class=\"cancel-checkbox-wrapper\">\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                    </div>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"refund-details mt-4\" [class.faded]=\"!isRefunding() && !isCancelling()\">\r\n        <div>\r\n            <label class=\"clr-control-label\">{{ 'order.refund-cancellation-reason' | translate }}</label>\r\n            <ng-select\r\n                [disabled]=\"!isRefunding() && !isCancelling()\"\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        </div>\r\n\r\n        <div>\r\n            <clr-select-container>\r\n                <label>{{ 'order.payment-to-refund' | translate }}</label>\r\n                <select clrSelect name=\"options\" [(ngModel)]=\"selectedPayment\" [disabled]=\"!isRefunding()\">\r\n                    <option\r\n                        *ngFor=\"let payment of settledPayments\"\r\n                        [ngValue]=\"payment\"\r\n                        [disabled]=\"payment.state !== 'Settled'\"\r\n                    >\r\n                        #{{ payment.id }} {{ payment.method }}:\r\n                        {{ payment.amount | localeCurrency: order.currencyCode }}\r\n                    </option>\r\n                </select>\r\n            </clr-select-container>\r\n\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"refundShipping\" [disabled]=\"!isRefunding()\" />\r\n                <label>\r\n                    {{ 'order.refund-shipping' | translate }} ({{\r\n                        order.shippingWithTax | localeCurrency: order.currencyCode\r\n                    }})\r\n                </label>\r\n            </clr-checkbox-wrapper>\r\n            <clr-input-container>\r\n                <label>{{ 'order.refund-adjustment' | translate }}</label>\r\n                <vdr-currency-input\r\n                    clrInput\r\n                    [disabled]=\"!isRefunding()\"\r\n                    [currencyCode]=\"order.currencyCode\"\r\n                    [(ngModel)]=\"adjustment\"\r\n                ></vdr-currency-input>\r\n            </clr-input-container>\r\n            <div class=\"totals\" [class.disabled]=\"!isRefunding()\">\r\n                <div class=\"order-total\">\r\n                    {{ 'order.payment-amount' | translate }}:\r\n                    {{ selectedPayment.amount | localeCurrency: order.currencyCode }}\r\n                </div>\r\n                <div class=\"refund-total\">\r\n                    {{ 'order.refund-total' | translate }}:\r\n                    {{ refundTotal | localeCurrency: order.currencyCode }}\r\n                </div>\r\n                <div class=\"refund-total-error\" *ngIf=\"refundTotal < 0 || settledPaymentsTotal < refundTotal\">\r\n                    {{\r\n                        'order.refund-total-error'\r\n                            | translate\r\n                                : {\r\n                                      min: 0 | currency: order.currencyCode,\r\n                                      max: settledPaymentsTotal | localeCurrency: order.currencyCode\r\n                                  }\r\n                    }}\r\n                </div>\r\n                <div class=\"refund-total-warning\" *ngIf=\"selectedPayment.amount < refundTotal\">\r\n                    {{ 'order.refund-total-warning' | translate }}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        <ng-container *ngIf=\"isRefunding(); else cancelling\">\r\n            {{\r\n                'order.refund-with-amount'\r\n                    | translate: { amount: refundTotal | localeCurrency: order.currencyCode }\r\n            }}\r\n        </ng-container>\r\n        <ng-template #cancelling>\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;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)}.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;justify-content:space-between}.refund-details.faded{opacity:.5}.totals{margin-top:48px}.totals .refund-total{font-size:18px}.totals .refund-total-error{color:var(--color-error-500)}.totals .refund-total-warning{color:var(--color-warning-600);max-width:250px}.totals.disabled{color:var(--color-grey-300)}.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}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1$1.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i1$1.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i1$1.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i1$1.ClrSelect, selector: "[clrSelect]" }, { kind: "component", type: i1$1.ClrSelectContainer, selector: "clr-select-container" }, { 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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: i3.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: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { 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: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { 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.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", 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", "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", 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    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.prorated-unit-price' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.refund' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr *ngFor=\"let line of order.lines\" class=\"order-line\">\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    <div class=\"prorated-wrapper\">\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                    </div>\r\n                </td>\r\n                <td class=\"align-middle quantity-col\">\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                        (input)=\"handleZeroQuantity(lineQuantities[line.id])\"\r\n                    />\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                    <div class=\"cancel-checkbox-wrapper\">\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].refund\"\r\n                        />\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                    <div class=\"cancel-checkbox-wrapper\">\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                    </div>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"refund-details mt-4\" [class.faded]=\"!isRefunding() && !isCancelling()\">\r\n        <div>\r\n            <label class=\"clr-control-label\">{{ 'order.refund-cancellation-reason' | translate }}</label>\r\n            <ng-select\r\n                [disabled]=\"!isRefunding() && !isCancelling()\"\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        </div>\r\n\r\n        <div>\r\n            <clr-select-container>\r\n                <label>{{ 'order.payment-to-refund' | translate }}</label>\r\n                <select clrSelect name=\"options\" [(ngModel)]=\"selectedPayment\" [disabled]=\"!isRefunding()\">\r\n                    <option\r\n                        *ngFor=\"let payment of settledPayments\"\r\n                        [ngValue]=\"payment\"\r\n                        [disabled]=\"payment.state !== 'Settled'\"\r\n                    >\r\n                        #{{ payment.id }} {{ payment.method }}:\r\n                        {{ payment.amount | localeCurrency: order.currencyCode }}\r\n                    </option>\r\n                </select>\r\n            </clr-select-container>\r\n\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"refundShipping\" [disabled]=\"!isRefunding()\" />\r\n                <label>\r\n                    {{ 'order.refund-shipping' | translate }} ({{\r\n                        order.shippingWithTax | localeCurrency: order.currencyCode\r\n                    }})\r\n                </label>\r\n            </clr-checkbox-wrapper>\r\n            <clr-input-container>\r\n                <label>{{ 'order.refund-adjustment' | translate }}</label>\r\n                <vdr-currency-input\r\n                    clrInput\r\n                    [disabled]=\"!isRefunding()\"\r\n                    [currencyCode]=\"order.currencyCode\"\r\n                    [(ngModel)]=\"adjustment\"\r\n                ></vdr-currency-input>\r\n            </clr-input-container>\r\n            <div class=\"totals\" [class.disabled]=\"!isRefunding()\">\r\n                <div class=\"order-total\">\r\n                    {{ 'order.payment-amount' | translate }}:\r\n                    {{ selectedPayment.amount | localeCurrency: order.currencyCode }}\r\n                </div>\r\n                <div class=\"refund-total\">\r\n                    {{ 'order.refund-total' | translate }}:\r\n                    {{ refundTotal | localeCurrency: order.currencyCode }}\r\n                </div>\r\n                <div class=\"refund-total-error\" *ngIf=\"refundTotal < 0 || settledPaymentsTotal < refundTotal\">\r\n                    {{\r\n                        'order.refund-total-error'\r\n                            | translate\r\n                                : {\r\n                                      min: 0 | currency: order.currencyCode,\r\n                                      max: settledPaymentsTotal | localeCurrency: order.currencyCode\r\n                                  }\r\n                    }}\r\n                </div>\r\n                <div class=\"refund-total-warning\" *ngIf=\"selectedPayment.amount < refundTotal\">\r\n                    {{ 'order.refund-total-warning' | translate }}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        <ng-container *ngIf=\"isRefunding(); else cancelling\">\r\n            {{\r\n                'order.refund-with-amount'\r\n                    | translate: { amount: refundTotal | localeCurrency: order.currencyCode }\r\n            }}\r\n        </ng-container>\r\n        <ng-template #cancelling>\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;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)}.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;justify-content:space-between}.refund-details.faded{opacity:.5}.totals{margin-top:48px}.totals .refund-total{font-size:18px}.totals .refund-total-error{color:var(--color-error-500)}.totals .refund-total-warning{color:var(--color-warning-600);max-width:250px}.totals.disabled{color:var(--color-grey-300)}.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}\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.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"] }]
         }], ctorParameters: function () { return [{ type: i1.I18nService }]; } });
 class SettleRefundDialogComponent {
@@ -1524,7 +1615,7 @@ class SettleRefundDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SettleRefundDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: SettleRefundDialogComponent, selector: "vdr-settle-refund-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.settle-refund' | translate }}</ng-template>\r\n<p class=\"instruction\">\r\n    {{ 'order.settle-refund-manual-instructions' | translate: { method: refund.method } }}\r\n</p>\r\n<clr-input-container>\r\n    <label>{{ 'order.transaction-id' | translate }}</label>\r\n    <input clrInput name=\"transactionId\" [(ngModel)]=\"transactionId\" />\r\n</clr-input-container>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"submit()\" [disabled]=\"!transactionId\" class=\"btn btn-primary\">\r\n        {{ 'order.settle-refund' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{padding-bottom:32px}.instruction{margin-top:0;margin-bottom:24px}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i1$1.ClrInputContainer, selector: "clr-input-container" }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: SettleRefundDialogComponent, selector: "vdr-settle-refund-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.settle-refund' | translate }}</ng-template>\r\n<p class=\"instruction\">\r\n    {{ 'order.settle-refund-manual-instructions' | translate: { method: refund.method } }}\r\n</p>\r\n<clr-input-container>\r\n    <label>{{ 'order.transaction-id' | translate }}</label>\r\n    <input clrInput name=\"transactionId\" [(ngModel)]=\"transactionId\" />\r\n</clr-input-container>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"submit()\" [disabled]=\"!transactionId\" class=\"btn btn-primary\">\r\n        {{ 'order.settle-refund' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{padding-bottom:32px}.instruction{margin-top:0;margin-bottom:24px}\n"], dependencies: [{ kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3.ClrInputContainer, selector: "clr-input-container" }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SettleRefundDialogComponent, decorators: [{
             type: Component,
@@ -1544,11 +1635,11 @@ class PaymentStateLabelComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: PaymentStateLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: PaymentStateLabelComponent, selector: "vdr-payment-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n", styles: [":host{font-size:14px}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: PaymentStateLabelComponent, selector: "vdr-payment-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n", styles: [":host{display:flex;font-size:14px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: PaymentStateLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-payment-state-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n", styles: [":host{font-size:14px}\n"] }]
+            args: [{ selector: 'vdr-payment-state-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n", styles: [":host{display:flex;font-size:14px}\n"] }]
         }], propDecorators: { state: [{
                 type: Input
             }] } });
@@ -1565,11 +1656,11 @@ class RefundStateLabelComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RefundStateLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: RefundStateLabelComponent, selector: "vdr-refund-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n", styles: [":host{font-size:14px}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: RefundStateLabelComponent, selector: "vdr-refund-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n", styles: [":host{display:flex;font-size:14px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RefundStateLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-refund-state-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n", styles: [":host{font-size:14px}\n"] }]
+            args: [{ selector: 'vdr-refund-state-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n", styles: [":host{display:flex;font-size:14px}\n"] }]
         }], propDecorators: { state: [{
                 type: Input
             }] } });
@@ -1603,11 +1694,11 @@ class OrderPaymentCardComponent {
         return this.payment.nextStates.filter(s => s !== 'Settled' && s !== 'Error');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderPaymentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderPaymentCardComponent, selector: "vdr-order-payment-card", inputs: { payment: "payment", currencyCode: "currencyCode" }, outputs: { settlePayment: "settlePayment", transitionPaymentState: "transitionPaymentState", settleRefund: "settleRefund" }, ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-header payment-header\">\r\n        <div>\r\n            {{ 'order.payment' | translate }}\r\n            <ng-container *ngIf=\"payment.transactionId\">#{{ payment.transactionId }}</ng-container>\r\n        </div>\r\n        <div class=\"payment-state\">\r\n            <vdr-payment-state-label [state]=\"payment.state\"></vdr-payment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-payment-detail [payment]=\"payment\" [currencyCode]=\"currencyCode\"></vdr-payment-detail>\r\n    </div>\r\n    <ng-container *ngFor=\"let refund of payment.refunds\">\r\n        <div class=\"card-header payment-header\">\r\n            <clr-icon shape=\"redo\" class=\"refund-icon\" dir=\"down\"></clr-icon>\r\n            {{ 'order.refund' | translate }} #{{ refund.id }}\r\n            <div class=\"clr-flex-fill\"></div>\r\n            <vdr-refund-state-label [state]=\"refund.state\"></vdr-refund-state-label>\r\n        </div>\r\n        <div class=\"card-block\">\r\n            <vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n                {{ refund.createdAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-total' | translate\">\r\n                {{ refund.total | localeCurrency: currencyCode }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.transaction-id' | translate\" *ngIf=\"refund.transactionId\">\r\n                {{ refund.transactionId }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-reason' | translate\" *ngIf=\"refund.reason\">\r\n                {{ refund.reason }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-metadata' | translate\" *ngIf=\"refundHasMetadata(refund)\">\r\n                <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\r\n            </vdr-labeled-data>\r\n        </div>\r\n        <div class=\"card-footer\" *ngIf=\"refund.state === 'Pending'\">\r\n            <button class=\"btn btn-sm btn-primary\" (click)=\"settleRefund.emit(refund)\">\r\n                {{ 'order.settle-refund' | translate }}\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"card-footer\" *ngIf=\"payment.nextStates.length\">\r\n        <button\r\n            class=\"btn btn-sm btn-primary\"\r\n            *ngIf=\"payment.nextStates.includes('Settled')\"\r\n            (click)=\"settlePayment.emit(payment)\"\r\n        >\r\n            {{ 'order.settle-payment' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionPaymentState.emit({ payment: payment, state: nextState })\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate: { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-payment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n", styles: [".payment-header{display:flex;justify-content:space-between;align-items:center}.refund-icon{margin-inline-end:6px;color:var(--color-grey-400)}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1$1.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: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: PaymentStateLabelComponent, selector: "vdr-payment-state-label", inputs: ["state"] }, { kind: "component", type: RefundStateLabelComponent, selector: "vdr-refund-state-label", inputs: ["state"] }, { kind: "component", type: PaymentDetailComponent, selector: "vdr-payment-detail", inputs: ["payment", "currencyCode"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }, { 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: "16.2.2", type: OrderPaymentCardComponent, selector: "vdr-order-payment-card", inputs: { payment: "payment", currencyCode: "currencyCode" }, outputs: { settlePayment: "settlePayment", transitionPaymentState: "transitionPaymentState", settleRefund: "settleRefund" }, ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-header payment-header\">\r\n        <div>\r\n            {{ 'order.payment' | translate }}\r\n            <ng-container *ngIf=\"payment.amount\">{{ payment.amount | localeCurrency : currencyCode }}</ng-container>\r\n        </div>\r\n        <div class=\"payment-state\">\r\n            <vdr-payment-state-label [state]=\"payment.state\"></vdr-payment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-payment-detail [payment]=\"payment\" [currencyCode]=\"currencyCode\"></vdr-payment-detail>\r\n    </div>\r\n    <ng-container *ngFor=\"let refund of payment.refunds\">\r\n        <div class=\"refund-wrapper card-block\">\r\n            <div class=\"card-header payment-header refund-header\">\r\n                <clr-icon shape=\"redo\" class=\"refund-icon\" dir=\"down\"></clr-icon>\r\n                {{ 'order.refund' | translate }} #{{ refund.id }}\r\n                <div class=\"clr-flex-fill\"></div>\r\n                <vdr-refund-state-label [state]=\"refund.state\"></vdr-refund-state-label>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n                    {{ refund.createdAt | localeDate : 'medium' }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'order.refund-total' | translate\">\r\n                    {{ refund.total | localeCurrency : currencyCode }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'order.transaction-id' | translate\" *ngIf=\"refund.transactionId\">\r\n                    {{ refund.transactionId }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'order.refund-reason' | translate\" *ngIf=\"refund.reason\">\r\n                    {{ refund.reason }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data\r\n                    [label]=\"'order.refund-metadata' | translate\"\r\n                    *ngIf=\"refundHasMetadata(refund)\"\r\n                >\r\n                    <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <div class=\"card-footer\" *ngIf=\"refund.state === 'Pending'\">\r\n                <button class=\"btn btn-sm btn-primary\" (click)=\"settleRefund.emit(refund)\">\r\n                    {{ 'order.settle-refund' | translate }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"card-footer\" *ngIf=\"payment.nextStates.length\">\r\n        <button\r\n            class=\"btn btn-sm btn-primary\"\r\n            *ngIf=\"payment.nextStates.includes('Settled')\"\r\n            (click)=\"settlePayment.emit(payment)\"\r\n        >\r\n            {{ 'order.settle-payment' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionPaymentState.emit({ payment: payment, state: nextState })\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate : { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-payment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.payment-header{display:flex;justify-content:space-between;align-items:center;line-break:anywhere}.refund-icon{margin-inline-end:6px;color:var(--color-grey-400)}.card-footer{display:flex;align-items:center;justify-content:flex-end}.refund-wrapper{font-size:var(--font-size-xs)}\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: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: PaymentStateLabelComponent, selector: "vdr-payment-state-label", inputs: ["state"] }, { kind: "component", type: RefundStateLabelComponent, selector: "vdr-refund-state-label", inputs: ["state"] }, { kind: "component", type: PaymentDetailComponent, selector: "vdr-payment-detail", inputs: ["payment", "currencyCode"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }, { 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: "16.2.2", ngImport: i0, type: OrderPaymentCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-payment-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card\">\r\n    <div class=\"card-header payment-header\">\r\n        <div>\r\n            {{ 'order.payment' | translate }}\r\n            <ng-container *ngIf=\"payment.transactionId\">#{{ payment.transactionId }}</ng-container>\r\n        </div>\r\n        <div class=\"payment-state\">\r\n            <vdr-payment-state-label [state]=\"payment.state\"></vdr-payment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-payment-detail [payment]=\"payment\" [currencyCode]=\"currencyCode\"></vdr-payment-detail>\r\n    </div>\r\n    <ng-container *ngFor=\"let refund of payment.refunds\">\r\n        <div class=\"card-header payment-header\">\r\n            <clr-icon shape=\"redo\" class=\"refund-icon\" dir=\"down\"></clr-icon>\r\n            {{ 'order.refund' | translate }} #{{ refund.id }}\r\n            <div class=\"clr-flex-fill\"></div>\r\n            <vdr-refund-state-label [state]=\"refund.state\"></vdr-refund-state-label>\r\n        </div>\r\n        <div class=\"card-block\">\r\n            <vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n                {{ refund.createdAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-total' | translate\">\r\n                {{ refund.total | localeCurrency: currencyCode }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.transaction-id' | translate\" *ngIf=\"refund.transactionId\">\r\n                {{ refund.transactionId }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-reason' | translate\" *ngIf=\"refund.reason\">\r\n                {{ refund.reason }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-metadata' | translate\" *ngIf=\"refundHasMetadata(refund)\">\r\n                <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\r\n            </vdr-labeled-data>\r\n        </div>\r\n        <div class=\"card-footer\" *ngIf=\"refund.state === 'Pending'\">\r\n            <button class=\"btn btn-sm btn-primary\" (click)=\"settleRefund.emit(refund)\">\r\n                {{ 'order.settle-refund' | translate }}\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"card-footer\" *ngIf=\"payment.nextStates.length\">\r\n        <button\r\n            class=\"btn btn-sm btn-primary\"\r\n            *ngIf=\"payment.nextStates.includes('Settled')\"\r\n            (click)=\"settlePayment.emit(payment)\"\r\n        >\r\n            {{ 'order.settle-payment' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionPaymentState.emit({ payment: payment, state: nextState })\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate: { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-payment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n", styles: [".payment-header{display:flex;justify-content:space-between;align-items:center}.refund-icon{margin-inline-end:6px;color:var(--color-grey-400)}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"] }]
+            args: [{ selector: 'vdr-order-payment-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card\">\r\n    <div class=\"card-header payment-header\">\r\n        <div>\r\n            {{ 'order.payment' | translate }}\r\n            <ng-container *ngIf=\"payment.amount\">{{ payment.amount | localeCurrency : currencyCode }}</ng-container>\r\n        </div>\r\n        <div class=\"payment-state\">\r\n            <vdr-payment-state-label [state]=\"payment.state\"></vdr-payment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-payment-detail [payment]=\"payment\" [currencyCode]=\"currencyCode\"></vdr-payment-detail>\r\n    </div>\r\n    <ng-container *ngFor=\"let refund of payment.refunds\">\r\n        <div class=\"refund-wrapper card-block\">\r\n            <div class=\"card-header payment-header refund-header\">\r\n                <clr-icon shape=\"redo\" class=\"refund-icon\" dir=\"down\"></clr-icon>\r\n                {{ 'order.refund' | translate }} #{{ refund.id }}\r\n                <div class=\"clr-flex-fill\"></div>\r\n                <vdr-refund-state-label [state]=\"refund.state\"></vdr-refund-state-label>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n                    {{ refund.createdAt | localeDate : 'medium' }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'order.refund-total' | translate\">\r\n                    {{ refund.total | localeCurrency : currencyCode }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'order.transaction-id' | translate\" *ngIf=\"refund.transactionId\">\r\n                    {{ refund.transactionId }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'order.refund-reason' | translate\" *ngIf=\"refund.reason\">\r\n                    {{ refund.reason }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data\r\n                    [label]=\"'order.refund-metadata' | translate\"\r\n                    *ngIf=\"refundHasMetadata(refund)\"\r\n                >\r\n                    <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <div class=\"card-footer\" *ngIf=\"refund.state === 'Pending'\">\r\n                <button class=\"btn btn-sm btn-primary\" (click)=\"settleRefund.emit(refund)\">\r\n                    {{ 'order.settle-refund' | translate }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"card-footer\" *ngIf=\"payment.nextStates.length\">\r\n        <button\r\n            class=\"btn btn-sm btn-primary\"\r\n            *ngIf=\"payment.nextStates.includes('Settled')\"\r\n            (click)=\"settlePayment.emit(payment)\"\r\n        >\r\n            {{ 'order.settle-payment' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionPaymentState.emit({ payment: payment, state: nextState })\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate : { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-payment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.payment-header{display:flex;justify-content:space-between;align-items:center;line-break:anywhere}.refund-icon{margin-inline-end:6px;color:var(--color-grey-400)}.card-footer{display:flex;align-items:center;justify-content:flex-end}.refund-wrapper{font-size:var(--font-size-xs)}\n"] }]
         }], propDecorators: { payment: [{
                 type: Input
             }], currencyCode: [{
@@ -1713,7 +1804,7 @@ class OrderHistoryComponent {
             }
         }
         if (entry.type === HistoryEntryType.ORDER_CANCELLATION) {
-            return 'error';
+            return 'warning';
         }
         if (entry.type === HistoryEntryType.ORDER_REFUND_TRANSITION) {
             return 'warning';
@@ -1734,12 +1825,20 @@ class OrderHistoryComponent {
                 return 'credit-card';
             }
         }
+        if (entry.type === HistoryEntryType.ORDER_REFUND_TRANSITION) {
+            if (entry.data.to === 'Settled') {
+                return 'credit-card';
+            }
+        }
         if (entry.type === HistoryEntryType.ORDER_NOTE) {
             return 'note';
         }
         if (entry.type === HistoryEntryType.ORDER_MODIFIED) {
             return 'pencil';
         }
+        if (entry.type === HistoryEntryType.ORDER_CUSTOMER_UPDATED) {
+            return 'switch';
+        }
         if (entry.type === HistoryEntryType.ORDER_FULFILLMENT_TRANSITION) {
             if (entry.data.to === 'Shipped') {
                 return 'truck';
@@ -1756,12 +1855,15 @@ class OrderHistoryComponent {
                     entry.data.to === 'Cancelled' ||
                     entry.data.to === 'Settled');
             }
+            case HistoryEntryType.ORDER_REFUND_TRANSITION:
+                return entry.data.to === 'Settled';
             case HistoryEntryType.ORDER_PAYMENT_TRANSITION:
                 return entry.data.to === 'Settled' || entry.data.to === 'Cancelled';
             case HistoryEntryType.ORDER_FULFILLMENT_TRANSITION:
                 return entry.data.to === 'Delivered' || entry.data.to === 'Shipped';
             case HistoryEntryType.ORDER_NOTE:
             case HistoryEntryType.ORDER_MODIFIED:
+            case HistoryEntryType.ORDER_CUSTOMER_UPDATED:
                 return true;
             default:
                 return false;
@@ -1779,12 +1881,17 @@ class OrderHistoryComponent {
             return this.order.payments.find(p => p.id === entry.data.paymentId);
         }
     }
+    getRefund(entry) {
+        if (entry.type === HistoryEntryType.ORDER_REFUND_TRANSITION && this.order.payments) {
+            const allRefunds = this.order.payments.reduce((refunds, payment) => refunds.concat(payment.refunds), []);
+            return allRefunds.find(r => r.id === entry.data.refundId);
+        }
+    }
     getCancelledQuantity(entry) {
         return entry.data.lines.reduce((total, line) => total + line.quantity, 0);
     }
-    getCancelledItems(entry) {
+    getCancelledItems(cancellationLines) {
         const itemMap = new Map();
-        const cancellationLines = entry.data.lines;
         for (const line of this.order.lines) {
             const cancellationLine = cancellationLines.find(l => l.orderLineId === line.id);
             if (cancellationLine) {
@@ -1816,11 +1923,11 @@ class OrderHistoryComponent {
         this.noteIsPrivate = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderHistoryComponent, deps: [{ token: i1.HistoryEntryComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderHistoryComponent, selector: "vdr-order-history", inputs: { order: "order", history: "history" }, outputs: { addNote: "addNote", updateNote: "updateNote", deleteNote: "deleteNote" }, ngImport: i0, template: "<div class=\"entry-list\" [class.expanded]=\"expanded\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\">\r\n        <div class=\"note-entry\">\r\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToOrder()\">\r\n                {{ 'common.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"visibility-select\">\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n                <label>{{ 'order.note-is-private' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n                {{ 'order.note-only-visible-to-administrators' | translate }}\r\n            </span>\r\n            <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n                {{ 'order.note-visible-to-customer' | translate }}\r\n            </span>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <ng-container *ngFor=\"let entry of history\">\r\n        <vdr-order-history-entry-host\r\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\r\n            [order]=\"order\"\r\n            [entry]=\"entry\"\r\n            [expanded]=\"expanded\"\r\n            (expandClick)=\"expanded = !expanded\"\r\n        ></vdr-order-history-entry-host>\r\n        <ng-template #defaultComponents>\r\n            <vdr-timeline-entry\r\n                [displayType]=\"getDisplayType(entry)\"\r\n                [iconShape]=\"getTimelineIcon(entry)\"\r\n                [createdAt]=\"entry.createdAt\"\r\n                [name]=\"getName(entry)\"\r\n                [featured]=\"isFeatured(entry)\"\r\n                [collapsed]=\"!expanded && !isFeatured(entry)\"\r\n                (expandClick)=\"expanded = !expanded\"\r\n            >\r\n                <ng-container [ngSwitch]=\"entry.type\">\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_STATE_TRANSITION\">\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            {{ 'order.history-order-fulfilled' | translate }}\r\n                        </div>\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Cancelled'\">\r\n                            {{ 'order.history-order-cancelled' | translate }}\r\n                        </div>\r\n                        <ng-template [ngIf]=\"entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'\">\r\n                            {{\r\n                                'order.history-order-transition'\r\n                                    | translate: { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_MODIFIED\">\r\n                        <div class=\"title\">\r\n                            {{ 'order.history-order-modified' | translate }}\r\n                        </div>\r\n                        <ng-container *ngIf=\"getModification(entry.data.modificationId) as modification\">\r\n                            {{ 'order.modify-order-price-difference' | translate }}:\r\n                            <strong>{{\r\n                                modification.priceChange | localeCurrency: order.currencyCode\r\n                            }}</strong>\r\n                            <vdr-chip colorType=\"success\" *ngIf=\"modification.isSettled\">{{\r\n                                'order.modification-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-chip colorType=\"error\" *ngIf=\"!modification.isSettled\">{{\r\n                                'order.modification-not-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-modification-detail\r\n                                    [order]=\"order\"\r\n                                    [modification]=\"modification\"\r\n                                ></vdr-modification-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_PAYMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularPaymentTransition\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-payment-settled' | translate }}\r\n                            </div>\r\n                            {{ 'order.transaction-id' | translate }}: {{ getPayment(entry)?.transactionId }}\r\n                            <vdr-history-entry-detail *ngIf=\"getPayment(entry) as payment\">\r\n                                <vdr-payment-detail\r\n                                    [payment]=\"payment\"\r\n                                    [currencyCode]=\"order.currencyCode\"\r\n                                ></vdr-payment-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </ng-container>\r\n                        <ng-template #regularPaymentTransition>\r\n                            {{\r\n                                'order.history-payment-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: getPayment(entry)?.transactionId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_REFUND_TRANSITION\">\r\n                        {{\r\n                            'order.history-refund-transition'\r\n                                | translate\r\n                                    : { from: entry.data.from, to: entry.data.to, id: entry.data.refundId }\r\n                        }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CANCELLATION\">\r\n                        {{\r\n                            'order.history-items-cancelled'\r\n                                | translate: { count: getCancelledQuantity(entry) }\r\n                        }}\r\n                        <vdr-history-entry-detail *ngIf=\"getCancelledItems(entry) as items\">\r\n                            <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                {{ entry.data.reason }}\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.shipping-cancelled' | translate\">\r\n                                {{ entry.data.shippingCancelled }}\r\n                            </vdr-labeled-data>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT\">\r\n                        {{ 'order.history-fulfillment-created' | translate }}\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-delivered' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to === 'Shipped'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-shipped' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'\">\r\n                            {{\r\n                                'order.history-fulfillment-transition'\r\n                                    | translate: { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-container>\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_NOTE\">\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                <span *ngIf=\"entry.isPublic\" class=\"note-visibility public\">{{\r\n                                    'common.public' | translate\r\n                                }}</span>\r\n                                <span *ngIf=\"!entry.isPublic\" class=\"note-visibility private\">{{\r\n                                    'common.private' | translate\r\n                                }}</span>\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-dropdown>\r\n                                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                                </button>\r\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"updateNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"edit\"></clr-icon>\r\n                                        {{ 'common.edit' | translate }}\r\n                                    </button>\r\n                                    <div class=\"dropdown-divider\"></div>\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"deleteNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                        {{ 'common.delete' | translate }}\r\n                                    </button>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_APPLIED\">\r\n                        {{ 'order.history-coupon-code-applied' | translate }}:\r\n                        <vdr-chip>\r\n                            <a [routerLink]=\"['/marketing', 'promotions', entry.data.promotionId]\">{{\r\n                                entry.data.couponCode\r\n                            }}</a>\r\n                        </vdr-chip>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_REMOVED\">\r\n                        {{ 'order.history-coupon-code-removed' | translate }}:\r\n                        <vdr-chip\r\n                            ><span class=\"cancelled-coupon-code\">{{ entry.data.couponCode }}</span></vdr-chip\r\n                        >\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"title\">\r\n                            {{ entry.type | translate }}\r\n                        </div>\r\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\r\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </vdr-timeline-entry>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <vdr-timeline-entry [isLast]=\"true\" [createdAt]=\"order.createdAt\" [featured]=\"true\">\r\n        <div class=\"title\">\r\n            {{ 'order.history-order-created' | translate }}\r\n        </div>\r\n    </vdr-timeline-entry>\r\n</div>\r\n", styles: [":host{display:block}.entry-list{margin-inline-start:calc(var(--space-unit) * 2)}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}.visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-700)}.visibility-select .private{color:var(--color-success-700)}textarea.note{flex:1;height:36px;border-radius:3px;margin-inline-end:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-700)}.note-visibility.private{color:var(--color-success-700)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1$1.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { 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$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { 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: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: i1.TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: ["displayType", "createdAt", "name", "featured", "iconShape", "isLast", "collapsed"], outputs: ["expandClick"] }, { kind: "component", type: i1.HistoryEntryDetailComponent, selector: "vdr-history-entry-detail" }, { kind: "component", type: FulfillmentDetailComponent, selector: "vdr-fulfillment-detail", inputs: ["fulfillmentId", "order"] }, { kind: "component", type: PaymentDetailComponent, selector: "vdr-payment-detail", inputs: ["payment", "currencyCode"] }, { kind: "component", type: SimpleItemListComponent, selector: "vdr-simple-item-list", inputs: ["items"] }, { kind: "component", type: ModificationDetailComponent, selector: "vdr-modification-detail", inputs: ["order", "modification"] }, { kind: "component", type: OrderHistoryEntryHostComponent, selector: "vdr-order-history-entry-host", inputs: ["entry", "order", "expanded"], outputs: ["expandClick"], exportAs: ["historyEntry"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderHistoryComponent, selector: "vdr-order-history", inputs: { order: "order", history: "history" }, outputs: { addNote: "addNote", updateNote: "updateNote", deleteNote: "deleteNote" }, ngImport: i0, template: "<div class=\"entry-list\" [class.expanded]=\"expanded\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\">\r\n        <div class=\"note-entry\">\r\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToOrder()\">\r\n                {{ 'common.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"visibility-select\">\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n                <label>{{ 'order.note-is-private' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n                {{ 'order.note-only-visible-to-administrators' | translate }}\r\n            </span>\r\n            <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n                {{ 'order.note-visible-to-customer' | translate }}\r\n            </span>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <ng-container *ngFor=\"let entry of history\">\r\n        <vdr-order-history-entry-host\r\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\r\n            [order]=\"order\"\r\n            [entry]=\"entry\"\r\n            [expanded]=\"expanded\"\r\n            (expandClick)=\"expanded = !expanded\"\r\n        ></vdr-order-history-entry-host>\r\n        <ng-template #defaultComponents>\r\n            <vdr-timeline-entry\r\n                [displayType]=\"getDisplayType(entry)\"\r\n                [iconShape]=\"getTimelineIcon(entry)\"\r\n                [createdAt]=\"entry.createdAt\"\r\n                [name]=\"getName(entry)\"\r\n                [featured]=\"isFeatured(entry)\"\r\n                [collapsed]=\"!expanded && !isFeatured(entry)\"\r\n                (expandClick)=\"expanded = !expanded\"\r\n            >\r\n                <ng-container [ngSwitch]=\"entry.type\">\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_STATE_TRANSITION\">\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            {{ 'order.history-order-fulfilled' | translate }}\r\n                        </div>\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Cancelled'\">\r\n                            {{ 'order.history-order-cancelled' | translate }}\r\n                        </div>\r\n                        <ng-template [ngIf]=\"entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'\">\r\n                            {{\r\n                                'order.history-order-transition'\r\n                                    | translate : { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_MODIFIED\">\r\n                        <div class=\"title\">\r\n                            {{ 'order.history-order-modified' | translate }}\r\n                        </div>\r\n                        <div\r\n                            class=\"flex items-center\"\r\n                            *ngIf=\"getModification(entry.data.modificationId) as modification\"\r\n                        >\r\n                            {{ 'order.modify-order-price-difference' | translate }}:\r\n                            <strong>{{\r\n                                modification.priceChange | localeCurrency : order.currencyCode\r\n                            }}</strong>\r\n                            <vdr-chip colorType=\"success\" class=\"mx-1\" *ngIf=\"modification.isSettled\">{{\r\n                                'order.modification-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-chip colorType=\"error\" class=\"mx-1\" *ngIf=\"!modification.isSettled\">{{\r\n                                'order.modification-not-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-modification-detail\r\n                                    [order]=\"order\"\r\n                                    [modification]=\"modification\"\r\n                                ></vdr-modification-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_PAYMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularPaymentTransition\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-payment-settled' | translate }}\r\n                            </div>\r\n                            <div class=\"flex items-center\">\r\n                                <vdr-chip *ngIf=\"getPayment(entry) as payment\" class=\"mr-1\">{{\r\n                                    payment.amount | localeCurrency : order.currencyCode\r\n                                }}</vdr-chip>\r\n                                <vdr-history-entry-detail *ngIf=\"getPayment(entry) as payment\">\r\n                                    <vdr-payment-detail\r\n                                        [payment]=\"payment\"\r\n                                        [currencyCode]=\"order.currencyCode\"\r\n                                    ></vdr-payment-detail>\r\n                                </vdr-history-entry-detail>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-template #regularPaymentTransition>\r\n                            {{\r\n                                'order.history-payment-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: getPayment(entry)?.transactionId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_REFUND_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularRefundTransition\">\r\n                            <ng-container *ngIf=\"getRefund(entry) as refund\">\r\n                                <div class=\"title\">{{ 'order.refund' | translate }} #{{ refund.id }}</div>\r\n                                <div class=\"flex items-center\">\r\n                                    <vdr-chip colorType=\"warning\" class=\"mr-1\">{{\r\n                                        refund.total | localeCurrency : order.currencyCode\r\n                                    }}</vdr-chip>\r\n                                    <vdr-history-entry-detail>\r\n                                        <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                            {{ entry.data.reason }}\r\n                                        </vdr-labeled-data>\r\n                                        <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                            <vdr-simple-item-list\r\n                                                [items]=\"getCancelledItems(refund.lines)\"\r\n                                            ></vdr-simple-item-list>\r\n                                        </vdr-labeled-data>\r\n                                    </vdr-history-entry-detail>\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #regularRefundTransition>\r\n                            {{\r\n                                'order.history-refund-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: entry.data.refundId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CANCELLATION\">\r\n                        {{\r\n                            'order.history-items-cancelled'\r\n                                | translate : { count: getCancelledQuantity(entry) }\r\n                        }}\r\n                        <vdr-history-entry-detail *ngIf=\"getCancelledItems(entry.data.lines) as items\">\r\n                            <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                {{ entry.data.reason }}\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.shipping-cancelled' | translate\">\r\n                                {{ entry.data.shippingCancelled }}\r\n                            </vdr-labeled-data>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT\">\r\n                        {{ 'order.history-fulfillment-created' | translate }}\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-delivered' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to === 'Shipped'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-shipped' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'\">\r\n                            {{\r\n                                'order.history-fulfillment-transition'\r\n                                    | translate : { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-container>\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_NOTE\">\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                <span *ngIf=\"entry.isPublic\" class=\"note-visibility public\">{{\r\n                                    'common.public' | translate\r\n                                }}</span>\r\n                                <span *ngIf=\"!entry.isPublic\" class=\"note-visibility private\">{{\r\n                                    'common.private' | translate\r\n                                }}</span>\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-dropdown>\r\n                                <button class=\"button-small ml-1\" vdrDropdownTrigger>\r\n                                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n                                </button>\r\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"updateNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"edit\"></clr-icon>\r\n                                        {{ 'common.edit' | translate }}\r\n                                    </button>\r\n                                    <div class=\"dropdown-divider\"></div>\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"deleteNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                        {{ 'common.delete' | translate }}\r\n                                    </button>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_APPLIED\">\r\n                        {{ 'order.history-coupon-code-applied' | translate }}:\r\n                        <vdr-chip>\r\n                            <a [routerLink]=\"['/marketing', 'promotions', entry.data.promotionId]\">{{\r\n                                entry.data.couponCode\r\n                            }}</a>\r\n                        </vdr-chip>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_REMOVED\">\r\n                        {{ 'order.history-coupon-code-removed' | translate }}:\r\n                        <vdr-chip\r\n                            ><span class=\"cancelled-coupon-code\">{{ entry.data.couponCode }}</span></vdr-chip\r\n                        >\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CUSTOMER_UPDATED\">\r\n                        <div class=\"title\">\r\n                            {{\r\n                                'order.history-customer-updated'\r\n                                    | translate : { newCustomerName: entry.data.newCustomerName }\r\n                            }}\r\n                        </div>\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-labeled-data [label]=\"'order.previous-customer' | translate\">\r\n                                    <a\r\n                                        *ngIf=\"entry.data.previousCustomerId\"\r\n                                        class=\"button-ghost\"\r\n                                        [routerLink]=\"[\r\n                                            '/customer',\r\n                                            'customers',\r\n                                            entry.data.previousCustomerId\r\n                                        ]\"\r\n                                    >\r\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\r\n                                        <span>{{ entry.data.previousCustomerName }}</span>\r\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                                    </a>\r\n                                </vdr-labeled-data>\r\n                                <vdr-labeled-data [label]=\"'order.new-customer' | translate\">\r\n                                    <a\r\n                                        *ngIf=\"entry.data.newCustomerId\"\r\n                                        class=\"button-ghost\"\r\n                                        [routerLink]=\"['/customer', 'customers', entry.data.newCustomerId]\"\r\n                                    >\r\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\r\n                                        <span>{{ entry.data.newCustomerName }}</span>\r\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                                    </a>\r\n                                </vdr-labeled-data>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"title\">\r\n                            {{ entry.type | translate }}\r\n                        </div>\r\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\r\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </vdr-timeline-entry>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <vdr-timeline-entry [isLast]=\"true\" [createdAt]=\"order.createdAt\" [featured]=\"true\">\r\n        <div class=\"title\">\r\n            {{ 'order.history-order-created' | translate }}\r\n        </div>\r\n    </vdr-timeline-entry>\r\n</div>\r\n", styles: [":host{display:block}.entry-list{margin-inline-start:calc(var(--space-unit) * 2)}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}.visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-700)}.visibility-select .private{color:var(--color-success-700)}textarea.note{flex:1;height:36px;border-radius:3px;margin-inline-end:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap;max-width:580px}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-700)}.note-visibility.private{color:var(--color-success-700)}\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: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { 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$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { 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: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: i1.TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: ["displayType", "createdAt", "name", "featured", "iconShape", "isLast", "collapsed"], outputs: ["expandClick"] }, { kind: "component", type: i1.HistoryEntryDetailComponent, selector: "vdr-history-entry-detail" }, { kind: "component", type: FulfillmentDetailComponent, selector: "vdr-fulfillment-detail", inputs: ["fulfillmentId", "order"] }, { kind: "component", type: PaymentDetailComponent, selector: "vdr-payment-detail", inputs: ["payment", "currencyCode"] }, { kind: "component", type: SimpleItemListComponent, selector: "vdr-simple-item-list", inputs: ["items"] }, { kind: "component", type: ModificationDetailComponent, selector: "vdr-modification-detail", inputs: ["order", "modification"] }, { kind: "component", type: OrderHistoryEntryHostComponent, selector: "vdr-order-history-entry-host", inputs: ["entry", "order", "expanded"], outputs: ["expandClick"], exportAs: ["historyEntry"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderHistoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-history', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"entry-list\" [class.expanded]=\"expanded\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\">\r\n        <div class=\"note-entry\">\r\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToOrder()\">\r\n                {{ 'common.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"visibility-select\">\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n                <label>{{ 'order.note-is-private' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n                {{ 'order.note-only-visible-to-administrators' | translate }}\r\n            </span>\r\n            <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n                {{ 'order.note-visible-to-customer' | translate }}\r\n            </span>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <ng-container *ngFor=\"let entry of history\">\r\n        <vdr-order-history-entry-host\r\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\r\n            [order]=\"order\"\r\n            [entry]=\"entry\"\r\n            [expanded]=\"expanded\"\r\n            (expandClick)=\"expanded = !expanded\"\r\n        ></vdr-order-history-entry-host>\r\n        <ng-template #defaultComponents>\r\n            <vdr-timeline-entry\r\n                [displayType]=\"getDisplayType(entry)\"\r\n                [iconShape]=\"getTimelineIcon(entry)\"\r\n                [createdAt]=\"entry.createdAt\"\r\n                [name]=\"getName(entry)\"\r\n                [featured]=\"isFeatured(entry)\"\r\n                [collapsed]=\"!expanded && !isFeatured(entry)\"\r\n                (expandClick)=\"expanded = !expanded\"\r\n            >\r\n                <ng-container [ngSwitch]=\"entry.type\">\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_STATE_TRANSITION\">\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            {{ 'order.history-order-fulfilled' | translate }}\r\n                        </div>\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Cancelled'\">\r\n                            {{ 'order.history-order-cancelled' | translate }}\r\n                        </div>\r\n                        <ng-template [ngIf]=\"entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'\">\r\n                            {{\r\n                                'order.history-order-transition'\r\n                                    | translate: { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_MODIFIED\">\r\n                        <div class=\"title\">\r\n                            {{ 'order.history-order-modified' | translate }}\r\n                        </div>\r\n                        <ng-container *ngIf=\"getModification(entry.data.modificationId) as modification\">\r\n                            {{ 'order.modify-order-price-difference' | translate }}:\r\n                            <strong>{{\r\n                                modification.priceChange | localeCurrency: order.currencyCode\r\n                            }}</strong>\r\n                            <vdr-chip colorType=\"success\" *ngIf=\"modification.isSettled\">{{\r\n                                'order.modification-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-chip colorType=\"error\" *ngIf=\"!modification.isSettled\">{{\r\n                                'order.modification-not-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-modification-detail\r\n                                    [order]=\"order\"\r\n                                    [modification]=\"modification\"\r\n                                ></vdr-modification-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_PAYMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularPaymentTransition\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-payment-settled' | translate }}\r\n                            </div>\r\n                            {{ 'order.transaction-id' | translate }}: {{ getPayment(entry)?.transactionId }}\r\n                            <vdr-history-entry-detail *ngIf=\"getPayment(entry) as payment\">\r\n                                <vdr-payment-detail\r\n                                    [payment]=\"payment\"\r\n                                    [currencyCode]=\"order.currencyCode\"\r\n                                ></vdr-payment-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </ng-container>\r\n                        <ng-template #regularPaymentTransition>\r\n                            {{\r\n                                'order.history-payment-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: getPayment(entry)?.transactionId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_REFUND_TRANSITION\">\r\n                        {{\r\n                            'order.history-refund-transition'\r\n                                | translate\r\n                                    : { from: entry.data.from, to: entry.data.to, id: entry.data.refundId }\r\n                        }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CANCELLATION\">\r\n                        {{\r\n                            'order.history-items-cancelled'\r\n                                | translate: { count: getCancelledQuantity(entry) }\r\n                        }}\r\n                        <vdr-history-entry-detail *ngIf=\"getCancelledItems(entry) as items\">\r\n                            <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                {{ entry.data.reason }}\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.shipping-cancelled' | translate\">\r\n                                {{ entry.data.shippingCancelled }}\r\n                            </vdr-labeled-data>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT\">\r\n                        {{ 'order.history-fulfillment-created' | translate }}\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-delivered' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to === 'Shipped'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-shipped' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'\">\r\n                            {{\r\n                                'order.history-fulfillment-transition'\r\n                                    | translate: { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-container>\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_NOTE\">\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                <span *ngIf=\"entry.isPublic\" class=\"note-visibility public\">{{\r\n                                    'common.public' | translate\r\n                                }}</span>\r\n                                <span *ngIf=\"!entry.isPublic\" class=\"note-visibility private\">{{\r\n                                    'common.private' | translate\r\n                                }}</span>\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-dropdown>\r\n                                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                                </button>\r\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"updateNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"edit\"></clr-icon>\r\n                                        {{ 'common.edit' | translate }}\r\n                                    </button>\r\n                                    <div class=\"dropdown-divider\"></div>\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"deleteNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                        {{ 'common.delete' | translate }}\r\n                                    </button>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_APPLIED\">\r\n                        {{ 'order.history-coupon-code-applied' | translate }}:\r\n                        <vdr-chip>\r\n                            <a [routerLink]=\"['/marketing', 'promotions', entry.data.promotionId]\">{{\r\n                                entry.data.couponCode\r\n                            }}</a>\r\n                        </vdr-chip>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_REMOVED\">\r\n                        {{ 'order.history-coupon-code-removed' | translate }}:\r\n                        <vdr-chip\r\n                            ><span class=\"cancelled-coupon-code\">{{ entry.data.couponCode }}</span></vdr-chip\r\n                        >\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"title\">\r\n                            {{ entry.type | translate }}\r\n                        </div>\r\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\r\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </vdr-timeline-entry>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <vdr-timeline-entry [isLast]=\"true\" [createdAt]=\"order.createdAt\" [featured]=\"true\">\r\n        <div class=\"title\">\r\n            {{ 'order.history-order-created' | translate }}\r\n        </div>\r\n    </vdr-timeline-entry>\r\n</div>\r\n", styles: [":host{display:block}.entry-list{margin-inline-start:calc(var(--space-unit) * 2)}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}.visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-700)}.visibility-select .private{color:var(--color-success-700)}textarea.note{flex:1;height:36px;border-radius:3px;margin-inline-end:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-700)}.note-visibility.private{color:var(--color-success-700)}\n"] }]
+            args: [{ selector: 'vdr-order-history', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"entry-list\" [class.expanded]=\"expanded\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\">\r\n        <div class=\"note-entry\">\r\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToOrder()\">\r\n                {{ 'common.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"visibility-select\">\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n                <label>{{ 'order.note-is-private' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n                {{ 'order.note-only-visible-to-administrators' | translate }}\r\n            </span>\r\n            <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n                {{ 'order.note-visible-to-customer' | translate }}\r\n            </span>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <ng-container *ngFor=\"let entry of history\">\r\n        <vdr-order-history-entry-host\r\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\r\n            [order]=\"order\"\r\n            [entry]=\"entry\"\r\n            [expanded]=\"expanded\"\r\n            (expandClick)=\"expanded = !expanded\"\r\n        ></vdr-order-history-entry-host>\r\n        <ng-template #defaultComponents>\r\n            <vdr-timeline-entry\r\n                [displayType]=\"getDisplayType(entry)\"\r\n                [iconShape]=\"getTimelineIcon(entry)\"\r\n                [createdAt]=\"entry.createdAt\"\r\n                [name]=\"getName(entry)\"\r\n                [featured]=\"isFeatured(entry)\"\r\n                [collapsed]=\"!expanded && !isFeatured(entry)\"\r\n                (expandClick)=\"expanded = !expanded\"\r\n            >\r\n                <ng-container [ngSwitch]=\"entry.type\">\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_STATE_TRANSITION\">\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            {{ 'order.history-order-fulfilled' | translate }}\r\n                        </div>\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Cancelled'\">\r\n                            {{ 'order.history-order-cancelled' | translate }}\r\n                        </div>\r\n                        <ng-template [ngIf]=\"entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'\">\r\n                            {{\r\n                                'order.history-order-transition'\r\n                                    | translate : { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_MODIFIED\">\r\n                        <div class=\"title\">\r\n                            {{ 'order.history-order-modified' | translate }}\r\n                        </div>\r\n                        <div\r\n                            class=\"flex items-center\"\r\n                            *ngIf=\"getModification(entry.data.modificationId) as modification\"\r\n                        >\r\n                            {{ 'order.modify-order-price-difference' | translate }}:\r\n                            <strong>{{\r\n                                modification.priceChange | localeCurrency : order.currencyCode\r\n                            }}</strong>\r\n                            <vdr-chip colorType=\"success\" class=\"mx-1\" *ngIf=\"modification.isSettled\">{{\r\n                                'order.modification-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-chip colorType=\"error\" class=\"mx-1\" *ngIf=\"!modification.isSettled\">{{\r\n                                'order.modification-not-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-modification-detail\r\n                                    [order]=\"order\"\r\n                                    [modification]=\"modification\"\r\n                                ></vdr-modification-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_PAYMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularPaymentTransition\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-payment-settled' | translate }}\r\n                            </div>\r\n                            <div class=\"flex items-center\">\r\n                                <vdr-chip *ngIf=\"getPayment(entry) as payment\" class=\"mr-1\">{{\r\n                                    payment.amount | localeCurrency : order.currencyCode\r\n                                }}</vdr-chip>\r\n                                <vdr-history-entry-detail *ngIf=\"getPayment(entry) as payment\">\r\n                                    <vdr-payment-detail\r\n                                        [payment]=\"payment\"\r\n                                        [currencyCode]=\"order.currencyCode\"\r\n                                    ></vdr-payment-detail>\r\n                                </vdr-history-entry-detail>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-template #regularPaymentTransition>\r\n                            {{\r\n                                'order.history-payment-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: getPayment(entry)?.transactionId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_REFUND_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularRefundTransition\">\r\n                            <ng-container *ngIf=\"getRefund(entry) as refund\">\r\n                                <div class=\"title\">{{ 'order.refund' | translate }} #{{ refund.id }}</div>\r\n                                <div class=\"flex items-center\">\r\n                                    <vdr-chip colorType=\"warning\" class=\"mr-1\">{{\r\n                                        refund.total | localeCurrency : order.currencyCode\r\n                                    }}</vdr-chip>\r\n                                    <vdr-history-entry-detail>\r\n                                        <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                            {{ entry.data.reason }}\r\n                                        </vdr-labeled-data>\r\n                                        <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                            <vdr-simple-item-list\r\n                                                [items]=\"getCancelledItems(refund.lines)\"\r\n                                            ></vdr-simple-item-list>\r\n                                        </vdr-labeled-data>\r\n                                    </vdr-history-entry-detail>\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #regularRefundTransition>\r\n                            {{\r\n                                'order.history-refund-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: entry.data.refundId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CANCELLATION\">\r\n                        {{\r\n                            'order.history-items-cancelled'\r\n                                | translate : { count: getCancelledQuantity(entry) }\r\n                        }}\r\n                        <vdr-history-entry-detail *ngIf=\"getCancelledItems(entry.data.lines) as items\">\r\n                            <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                {{ entry.data.reason }}\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.shipping-cancelled' | translate\">\r\n                                {{ entry.data.shippingCancelled }}\r\n                            </vdr-labeled-data>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT\">\r\n                        {{ 'order.history-fulfillment-created' | translate }}\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-delivered' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to === 'Shipped'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-shipped' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'\">\r\n                            {{\r\n                                'order.history-fulfillment-transition'\r\n                                    | translate : { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-container>\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_NOTE\">\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                <span *ngIf=\"entry.isPublic\" class=\"note-visibility public\">{{\r\n                                    'common.public' | translate\r\n                                }}</span>\r\n                                <span *ngIf=\"!entry.isPublic\" class=\"note-visibility private\">{{\r\n                                    'common.private' | translate\r\n                                }}</span>\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-dropdown>\r\n                                <button class=\"button-small ml-1\" vdrDropdownTrigger>\r\n                                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n                                </button>\r\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"updateNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"edit\"></clr-icon>\r\n                                        {{ 'common.edit' | translate }}\r\n                                    </button>\r\n                                    <div class=\"dropdown-divider\"></div>\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"deleteNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                        {{ 'common.delete' | translate }}\r\n                                    </button>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_APPLIED\">\r\n                        {{ 'order.history-coupon-code-applied' | translate }}:\r\n                        <vdr-chip>\r\n                            <a [routerLink]=\"['/marketing', 'promotions', entry.data.promotionId]\">{{\r\n                                entry.data.couponCode\r\n                            }}</a>\r\n                        </vdr-chip>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_REMOVED\">\r\n                        {{ 'order.history-coupon-code-removed' | translate }}:\r\n                        <vdr-chip\r\n                            ><span class=\"cancelled-coupon-code\">{{ entry.data.couponCode }}</span></vdr-chip\r\n                        >\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CUSTOMER_UPDATED\">\r\n                        <div class=\"title\">\r\n                            {{\r\n                                'order.history-customer-updated'\r\n                                    | translate : { newCustomerName: entry.data.newCustomerName }\r\n                            }}\r\n                        </div>\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-labeled-data [label]=\"'order.previous-customer' | translate\">\r\n                                    <a\r\n                                        *ngIf=\"entry.data.previousCustomerId\"\r\n                                        class=\"button-ghost\"\r\n                                        [routerLink]=\"[\r\n                                            '/customer',\r\n                                            'customers',\r\n                                            entry.data.previousCustomerId\r\n                                        ]\"\r\n                                    >\r\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\r\n                                        <span>{{ entry.data.previousCustomerName }}</span>\r\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                                    </a>\r\n                                </vdr-labeled-data>\r\n                                <vdr-labeled-data [label]=\"'order.new-customer' | translate\">\r\n                                    <a\r\n                                        *ngIf=\"entry.data.newCustomerId\"\r\n                                        class=\"button-ghost\"\r\n                                        [routerLink]=\"['/customer', 'customers', entry.data.newCustomerId]\"\r\n                                    >\r\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\r\n                                        <span>{{ entry.data.newCustomerName }}</span>\r\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                                    </a>\r\n                                </vdr-labeled-data>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"title\">\r\n                            {{ entry.type | translate }}\r\n                        </div>\r\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\r\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </vdr-timeline-entry>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <vdr-timeline-entry [isLast]=\"true\" [createdAt]=\"order.createdAt\" [featured]=\"true\">\r\n        <div class=\"title\">\r\n            {{ 'order.history-order-created' | translate }}\r\n        </div>\r\n    </vdr-timeline-entry>\r\n</div>\r\n", styles: [":host{display:block}.entry-list{margin-inline-start:calc(var(--space-unit) * 2)}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}.visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-700)}.visibility-select .private{color:var(--color-success-700)}textarea.note{flex:1;height:36px;border-radius:3px;margin-inline-end:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap;max-width:580px}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-700)}.note-visibility.private{color:var(--color-success-700)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.HistoryEntryComponentService }]; }, propDecorators: { order: [{
                 type: Input
             }], history: [{
@@ -1877,13 +1984,13 @@ class SellerOrdersCardComponent {
     navigateToSellerOrder(order) {
         this.router.navigate(['/orders', order.id]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SellerOrdersCardComponent, deps: [{ token: i1$2.Router }, { token: i1.DataService }, { token: i1.ChannelService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: SellerOrdersCardComponent, selector: "vdr-seller-orders-card", inputs: { orderId: "orderId" }, ngImport: i0, template: "<vdr-card [title]=\"'order.seller-orders' | translate\">\r\n    <div class=\"form-grid\">\r\n        <div *ngFor=\"let order of sellerOrders$ | async\">\r\n            <a [routerLink]=\"['seller-orders', order.id]\" class=\"button-ghost mb-1\"\r\n                >{{ order.code }} <clr-icon shape=\"arrow right\"></clr-icon\r\n            ></a>\r\n            <vdr-labeled-data [label]=\"'order.state' | translate\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"getSeller(order) as seller\" [label]=\"'common.seller' | translate\">\r\n                {{ seller.name }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"getSeller(order) as seller\" [label]=\"'order.total' | translate\">\r\n                {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n            </vdr-labeled-data>\r\n        </div>\r\n    </div>\r\n</vdr-card>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.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$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SellerOrdersCardComponent, deps: [{ token: i1$1.Router }, { token: i1.DataService }, { token: i1.ChannelService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: SellerOrdersCardComponent, selector: "vdr-seller-orders-card", inputs: { orderId: "orderId" }, ngImport: i0, template: "<vdr-card [title]=\"'order.seller-orders' | translate\">\r\n    <div class=\"form-grid\">\r\n        <div *ngFor=\"let order of sellerOrders$ | async\">\r\n            <a [routerLink]=\"['seller-orders', order.id]\" class=\"button-ghost mb-1\"\r\n                >{{ order.code }} <clr-icon shape=\"arrow right\"></clr-icon\r\n            ></a>\r\n            <vdr-labeled-data [label]=\"'order.state' | translate\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"getSeller(order) as seller\" [label]=\"'common.seller' | translate\">\r\n                {{ seller.name }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"getSeller(order) as seller\" [label]=\"'order.total' | translate\">\r\n                {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n            </vdr-labeled-data>\r\n        </div>\r\n    </div>\r\n</vdr-card>\r\n", styles: [":host{display:block}\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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SellerOrdersCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-seller-orders-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-card [title]=\"'order.seller-orders' | translate\">\r\n    <div class=\"form-grid\">\r\n        <div *ngFor=\"let order of sellerOrders$ | async\">\r\n            <a [routerLink]=\"['seller-orders', order.id]\" class=\"button-ghost mb-1\"\r\n                >{{ order.code }} <clr-icon shape=\"arrow right\"></clr-icon\r\n            ></a>\r\n            <vdr-labeled-data [label]=\"'order.state' | translate\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"getSeller(order) as seller\" [label]=\"'common.seller' | translate\">\r\n                {{ seller.name }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"getSeller(order) as seller\" [label]=\"'order.total' | translate\">\r\n                {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n            </vdr-labeled-data>\r\n        </div>\r\n    </div>\r\n</vdr-card>\r\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i1.DataService }, { type: i1.ChannelService }]; }, propDecorators: { orderId: [{
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1.DataService }, { type: i1.ChannelService }]; }, propDecorators: { orderId: [{
                 type: Input
             }] } });
@@ -1895,6 +2002,19 @@ const ORDER_DETAIL_QUERY = gql `
     }
     ${ORDER_DETAIL_FRAGMENT}
 `;
+const SET_ORDER_CUSTOMER_MUTATION = gql `
+    mutation SetOrderCustomer($input: SetOrderCustomerInput!) {
+        setOrderCustomer(input: $input) {
+            id
+            customer {
+                id
+                firstName
+                lastName
+                emailAddress
+            }
+        }
+    }
+`;
 class OrderDetailComponent extends TypedBaseDetailComponent {
     constructor(changeDetector, dataService, notificationService, modalService, orderTransitionService, formBuilder) {
         super();
@@ -1958,6 +2078,38 @@ class OrderDetailComponent extends TypedBaseDetailComponent {
         })))
             .subscribe();
     }
+    setOrderCustomer() {
+        this.modalService
+            .fromComponent(SelectCustomerDialogComponent, {
+            locals: {
+                canCreateNew: false,
+                includeNoteInput: true,
+                title: marker('order.assign-order-to-another-customer'),
+            },
+        })
+            .pipe(switchMap(result => {
+            function isExisting(input) {
+                return typeof input === 'object' && !!input.id;
+            }
+            if (isExisting(result)) {
+                return this.dataService.mutate(SetOrderCustomerDocument, {
+                    input: {
+                        customerId: result.id,
+                        orderId: this.id,
+                        note: result.note,
+                    },
+                });
+            }
+            else {
+                return EMPTY;
+            }
+        }), switchMap(result => this.refetchOrder(result)))
+            .subscribe(result => {
+            if (result) {
+                this.notificationService.success(marker('order.set-customer-success'));
+            }
+        });
+    }
     transitionToState(state) {
         this.dataService.order.transitionToState(this.id, state).subscribe(({ transitionOrderToState }) => {
             switch (transitionOrderToState?.__typename) {
@@ -2342,7 +2494,9 @@ class OrderDetailComponent extends TypedBaseDetailComponent {
                     switch (result.__typename) {
                         case 'Order':
                             this.refetchOrder(result).subscribe();
-                            this.notificationService.success(marker('order.cancelled-order-success'));
+                            this.notificationService.success(marker('order.cancelled-order-items-success'), {
+                                count: summate(input.cancel.lines, 'quantity'),
+                            });
                             return input;
                         case 'CancelActiveOrderError':
                         case 'QuantityTooGreatError':
@@ -2361,36 +2515,36 @@ class OrderDetailComponent extends TypedBaseDetailComponent {
             if (!input) {
                 return of(undefined);
             }
-            if (input.refund.lines.length) {
-                return this.dataService.order
-                    .refundOrder(input.refund)
-                    .pipe(map(res => res.refundOrder));
+            if (input.refunds.length) {
+                return forkJoin(input.refunds.map(refund => this.dataService.order.refundOrder(refund).pipe(map(res => res.refundOrder))));
             }
             else {
                 return [undefined];
             }
         }))
-            .subscribe(result => {
-            if (result) {
-                switch (result.__typename) {
-                    case 'Refund':
-                        this.refetchOrder(result).subscribe();
-                        if (result.state === 'Failed') {
-                            this.notificationService.error(marker('order.refund-order-failed'));
-                        }
-                        else {
-                            this.notificationService.success(marker('order.refund-order-success'));
-                        }
-                        break;
-                    case 'AlreadyRefundedError':
-                    case 'NothingToRefundError':
-                    case 'PaymentOrderMismatchError':
-                    case 'RefundOrderStateError':
-                    case 'RefundStateTransitionError':
-                        this.notificationService.error(result.message);
-                        break;
+            .subscribe(results => {
+            for (const result of results ?? []) {
+                if (result) {
+                    switch (result.__typename) {
+                        case 'Refund':
+                            if (result.state === 'Failed') {
+                                this.notificationService.error(marker('order.refund-order-failed'));
+                            }
+                            else {
+                                this.notificationService.success(marker('order.refund-order-success'));
+                            }
+                            break;
+                        case 'AlreadyRefundedError':
+                        case 'NothingToRefundError':
+                        case 'PaymentOrderMismatchError':
+                        case 'RefundOrderStateError':
+                        case 'RefundStateTransitionError':
+                            this.notificationService.error(result.message);
+                            break;
+                    }
                 }
             }
+            this.refetchOrder(results?.[0]).subscribe();
         });
     }
     refetchOrder(result) {
@@ -2408,13 +2562,83 @@ class OrderDetailComponent extends TypedBaseDetailComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: OrderTransitionService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderDetailComponent, selector: "vdr-order-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left> </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"order-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    (order.state === 'ArrangingPayment' || order.state === 'ArrangingAdditionalPayment') &&\r\n                    (hasUnsettledModifications(order) || 0 < outstandingPaymentAmount(order))\r\n                \"\r\n                (click)=\"addManualPayment(order)\"\r\n            >\r\n                {{ 'order.add-payment-to-order' | translate }}\r\n                ({{ outstandingPaymentAmount(order) | localeCurrency : order.currencyCode }})\r\n            </button>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    order.active === false &&\r\n                    order.state !== 'ArrangingAdditionalPayment' &&\r\n                    order.state !== 'ArrangingPayment' &&\r\n                    0 < outstandingPaymentAmount(order)\r\n                \"\r\n                (click)=\"transitionToState('ArrangingAdditionalPayment')\"\r\n            >\r\n                {{ 'order.arrange-additional-payment' | translate }}\r\n            </button>\r\n            <button\r\n                *ngIf=\"order.type !== 'Aggregate'\"\r\n                class=\"button primary mr-1\"\r\n                (click)=\"fulfillOrder()\"\r\n                [disabled]=\"!canAddFulfillment(order)\"\r\n            >\r\n                {{ 'order.fulfill-order' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <ng-container\r\n                        *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Modifying')\"\r\n                    >\r\n                        <button type=\"button\" vdrDropdownItem (click)=\"transitionToModifying()\">\r\n                            <clr-icon shape=\"pencil\"></clr-icon>\r\n                            {{ 'order.modify-order' | translate }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                    </ng-container>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Cancelled')\"\r\n                        (click)=\"cancelOrRefund(order)\"\r\n                    >\r\n                        <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                        <ng-container *ngIf=\"orderHasSettledPayments(order); else cancelOnly\">\r\n                            {{ 'order.refund-and-cancel-order' | translate }}\r\n                        </ng-container>\r\n                        <ng-template #cancelOnly>\r\n                            {{ 'order.cancel-order' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n\r\n                    <ng-container *ngIf=\"(nextStates$ | async)?.length\">\r\n                        <div class=\"dropdown-divider\"></div>\r\n                        <button\r\n                            *ngFor=\"let nextState of nextStates$ | async\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"transitionToState(nextState)\"\r\n                        >\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate : { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </button>\r\n                    </ng-container>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"manuallyTransitionToState(order)\">\r\n                        <clr-icon shape=\"step-forward-2\" class=\"is-warning\"></clr-icon>\r\n                        {{ 'order.manually-transition-to-state' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\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$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <vdr-order-state-label [state]=\"order.state\">\r\n                <button\r\n                    class=\"icon-button\"\r\n                    (click)=\"openStateDiagram()\"\r\n                    [title]=\"'order.order-state-diagram' | translate\"\r\n                >\r\n                    <clr-icon shape=\"list\"></clr-icon>\r\n                </button>\r\n            </vdr-order-state-label>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n            <vdr-labeled-data\r\n                class=\"mt-2\"\r\n                [label]=\"'order.shipping-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.shippingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.shippingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data\r\n                [label]=\"'order.billing-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.billingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.billingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.payments' | translate\" *ngIf=\"order.payments?.length\">\r\n            <vdr-order-payment-card\r\n                *ngFor=\"let payment of order.payments\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                [payment]=\"payment\"\r\n                (settlePayment)=\"settlePayment($event)\"\r\n                (transitionPaymentState)=\"transitionPaymentState($event)\"\r\n                (settleRefund)=\"settleRefund($event)\"\r\n            ></vdr-order-payment-card>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"order.fulfillments?.length\">\r\n            <vdr-fulfillment-card\r\n                *ngFor=\"let fulfillment of order.fulfillments\"\r\n                [fulfillment]=\"fulfillment\"\r\n                [order]=\"order\"\r\n                (transitionState)=\"transitionFulfillment(fulfillment.id, $event)\"\r\n            ></vdr-fulfillment-card>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n\r\n    <vdr-page-block>\r\n        <vdr-seller-orders-card\r\n            class=\"mb-2\"\r\n            *ngIf=\"order.sellerOrders.length\"\r\n            [orderId]=\"order.id\"\r\n        ></vdr-seller-orders-card>\r\n        <vdr-card [paddingX]=\"false\">\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\" [paddingX]=\"false\">\r\n            <table class=\"table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>{{ 'common.description' | translate }}</th>\r\n                        <th>{{ 'order.tax-rate' | translate }}</th>\r\n                        <th>{{ 'order.tax-base' | translate }}</th>\r\n                        <th>{{ 'order.tax-total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let row of order.taxSummary\">\r\n                        <td>{{ row.description }}</td>\r\n                        <td>{{ row.taxRate / 100 | percent:'0.0-2' }}</td>\r\n                        <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                        <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Order\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                [readonly]=\"!('UpdateOrder' | hasPermission)\"\r\n            />\r\n            <button\r\n                class=\"button primary\"\r\n                (click)=\"updateCustomFields()\"\r\n                [disabled]=\"\r\n                    detailForm.get('customFields')?.pristine || detailForm.get('customFields')?.invalid\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"order-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n\r\n        <vdr-card [title]=\"'order.order-history' | translate\">\r\n            <vdr-order-history\r\n                [order]=\"order\"\r\n                [history]=\"history$ | async\"\r\n                (addNote)=\"addNote($event)\"\r\n                (updateNote)=\"updateNote($event)\"\r\n                (deleteNote)=\"deleteNote($event)\"\r\n            ></vdr-order-history>\r\n        </vdr-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".shipping-address{list-style-type:none;line-height:1.3em}.order-cards h6{margin-top:6px;color:var(--color-text-200)}\n"], dependencies: [{ kind: "directive", type: i1$1.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: "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.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { 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: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: OrderPaymentCardComponent, selector: "vdr-order-payment-card", inputs: ["payment", "currencyCode"], outputs: ["settlePayment", "transitionPaymentState", "settleRefund"] }, { kind: "component", type: OrderHistoryComponent, selector: "vdr-order-history", inputs: ["order", "history"], outputs: ["addNote", "updateNote", "deleteNote"] }, { kind: "component", type: FulfillmentCardComponent, selector: "vdr-fulfillment-card", inputs: ["fulfillment", "order"], outputs: ["transitionState"] }, { kind: "component", type: OrderTableComponent, selector: "vdr-order-table", inputs: ["order", "orderLineCustomFields", "isDraft"], outputs: ["adjust", "remove"] }, { kind: "component", type: SellerOrdersCardComponent, selector: "vdr-seller-orders-card", inputs: ["orderId"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderDetailComponent, selector: "vdr-order-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left> </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"order-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    (order.state === 'ArrangingPayment' || order.state === 'ArrangingAdditionalPayment') &&\r\n                    (hasUnsettledModifications(order) || 0 < outstandingPaymentAmount(order))\r\n                \"\r\n                (click)=\"addManualPayment(order)\"\r\n            >\r\n                {{ 'order.add-payment-to-order' | translate }}\r\n                ({{ outstandingPaymentAmount(order) | localeCurrency : order.currencyCode }})\r\n            </button>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    order.active === false &&\r\n                    order.state !== 'ArrangingAdditionalPayment' &&\r\n                    order.state !== 'ArrangingPayment' &&\r\n                    0 < outstandingPaymentAmount(order)\r\n                \"\r\n                (click)=\"transitionToState('ArrangingAdditionalPayment')\"\r\n            >\r\n                {{ 'order.arrange-additional-payment' | translate }}\r\n            </button>\r\n            <button\r\n                *ngIf=\"order.type !== 'Aggregate'\"\r\n                class=\"button primary mr-1\"\r\n                (click)=\"fulfillOrder()\"\r\n                [disabled]=\"!canAddFulfillment(order)\"\r\n            >\r\n                {{ 'order.fulfill-order' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <ng-container\r\n                        *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Modifying')\"\r\n                    >\r\n                        <button type=\"button\" vdrDropdownItem (click)=\"transitionToModifying()\">\r\n                            <clr-icon shape=\"pencil\"></clr-icon>\r\n                            {{ 'order.modify-order' | translate }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                    </ng-container>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Cancelled')\"\r\n                        (click)=\"cancelOrRefund(order)\"\r\n                    >\r\n                        <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                        <ng-container *ngIf=\"orderHasSettledPayments(order); else cancelOnly\">\r\n                            {{ 'order.refund-and-cancel-order' | translate }}\r\n                        </ng-container>\r\n                        <ng-template #cancelOnly>\r\n                            {{ 'order.cancel-order' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n\r\n                    <ng-container *ngIf=\"(nextStates$ | async)?.length\">\r\n                        <div class=\"dropdown-divider\"></div>\r\n                        <button\r\n                            *ngFor=\"let nextState of nextStates$ | async\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"transitionToState(nextState)\"\r\n                        >\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate : { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </button>\r\n                    </ng-container>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"manuallyTransitionToState(order)\">\r\n                        <clr-icon shape=\"step-forward-2\" class=\"is-warning\"></clr-icon>\r\n                        {{ 'order.manually-transition-to-state' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\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$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card [title]=\"'order.state' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <button\r\n                    class=\"button-small\"\r\n                    (click)=\"openStateDiagram()\"\r\n                    [title]=\"'order.order-state-diagram' | translate\"\r\n                >\r\n                    <clr-icon shape=\"list\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <button\r\n                    *vdrIfPermissions=\"['UpdateOrder', 'ReadCustomer']\"\r\n                    class=\"button-small\"\r\n                    (click)=\"setOrderCustomer()\"\r\n                    [title]=\"'order.assign-order-to-another-customer' | translate\"\r\n                >\r\n                    <clr-icon shape=\"switch\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n            <vdr-labeled-data\r\n                class=\"mt-2\"\r\n                [label]=\"'order.shipping-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.shippingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.shippingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data\r\n                [label]=\"'order.billing-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.billingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.billingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.payments' | translate\" *ngIf=\"order.payments?.length\">\r\n            <vdr-order-payment-card\r\n                *ngFor=\"let payment of order.payments\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                [payment]=\"payment\"\r\n                (settlePayment)=\"settlePayment($event)\"\r\n                (transitionPaymentState)=\"transitionPaymentState($event)\"\r\n                (settleRefund)=\"settleRefund($event)\"\r\n            ></vdr-order-payment-card>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"order.fulfillments?.length\">\r\n            <vdr-fulfillment-card\r\n                *ngFor=\"let fulfillment of order.fulfillments\"\r\n                [fulfillment]=\"fulfillment\"\r\n                [order]=\"order\"\r\n                (transitionState)=\"transitionFulfillment(fulfillment.id, $event)\"\r\n            ></vdr-fulfillment-card>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n\r\n    <vdr-page-block>\r\n        <vdr-seller-orders-card\r\n            class=\"mb-2\"\r\n            *ngIf=\"order.sellerOrders.length\"\r\n            [orderId]=\"order.id\"\r\n        ></vdr-seller-orders-card>\r\n        <vdr-card [paddingX]=\"false\">\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\" [paddingX]=\"false\">\r\n            <table class=\"table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>{{ 'common.description' | translate }}</th>\r\n                        <th>{{ 'order.tax-rate' | translate }}</th>\r\n                        <th>{{ 'order.tax-base' | translate }}</th>\r\n                        <th>{{ 'order.tax-total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let row of order.taxSummary\">\r\n                        <td>{{ row.description }}</td>\r\n                        <td>{{ row.taxRate / 100 | percent : '0.0-2' }}</td>\r\n                        <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                        <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Order\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                [readonly]=\"!('UpdateOrder' | hasPermission)\"\r\n            />\r\n            <button\r\n                class=\"button primary\"\r\n                (click)=\"updateCustomFields()\"\r\n                [disabled]=\"\r\n                    detailForm.get('customFields')?.pristine || detailForm.get('customFields')?.invalid\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"order-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n\r\n        <vdr-card [title]=\"'order.order-history' | translate\">\r\n            <vdr-order-history\r\n                [order]=\"order\"\r\n                [history]=\"history$ | async\"\r\n                (addNote)=\"addNote($event)\"\r\n                (updateNote)=\"updateNote($event)\"\r\n                (deleteNote)=\"deleteNote($event)\"\r\n            ></vdr-order-history>\r\n        </vdr-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".shipping-address{list-style-type:none;line-height:1.3em}.order-cards h6{margin-top:6px;color:var(--color-text-200)}vdr-order-payment-card+vdr-order-payment-card{margin-top:calc(var(--space-unit) * 2)}\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: "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.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { 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: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "component", type: OrderPaymentCardComponent, selector: "vdr-order-payment-card", inputs: ["payment", "currencyCode"], outputs: ["settlePayment", "transitionPaymentState", "settleRefund"] }, { kind: "component", type: OrderHistoryComponent, selector: "vdr-order-history", inputs: ["order", "history"], outputs: ["addNote", "updateNote", "deleteNote"] }, { kind: "component", type: FulfillmentCardComponent, selector: "vdr-fulfillment-card", inputs: ["fulfillment", "order"], outputs: ["transitionState"] }, { kind: "component", type: OrderTableComponent, selector: "vdr-order-table", inputs: ["order", "orderLineCustomFields", "isDraft"], outputs: ["adjust", "remove"] }, { kind: "component", type: SellerOrdersCardComponent, selector: "vdr-seller-orders-card", inputs: ["orderId"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left> </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"order-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    (order.state === 'ArrangingPayment' || order.state === 'ArrangingAdditionalPayment') &&\r\n                    (hasUnsettledModifications(order) || 0 < outstandingPaymentAmount(order))\r\n                \"\r\n                (click)=\"addManualPayment(order)\"\r\n            >\r\n                {{ 'order.add-payment-to-order' | translate }}\r\n                ({{ outstandingPaymentAmount(order) | localeCurrency : order.currencyCode }})\r\n            </button>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    order.active === false &&\r\n                    order.state !== 'ArrangingAdditionalPayment' &&\r\n                    order.state !== 'ArrangingPayment' &&\r\n                    0 < outstandingPaymentAmount(order)\r\n                \"\r\n                (click)=\"transitionToState('ArrangingAdditionalPayment')\"\r\n            >\r\n                {{ 'order.arrange-additional-payment' | translate }}\r\n            </button>\r\n            <button\r\n                *ngIf=\"order.type !== 'Aggregate'\"\r\n                class=\"button primary mr-1\"\r\n                (click)=\"fulfillOrder()\"\r\n                [disabled]=\"!canAddFulfillment(order)\"\r\n            >\r\n                {{ 'order.fulfill-order' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <ng-container\r\n                        *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Modifying')\"\r\n                    >\r\n                        <button type=\"button\" vdrDropdownItem (click)=\"transitionToModifying()\">\r\n                            <clr-icon shape=\"pencil\"></clr-icon>\r\n                            {{ 'order.modify-order' | translate }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                    </ng-container>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Cancelled')\"\r\n                        (click)=\"cancelOrRefund(order)\"\r\n                    >\r\n                        <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                        <ng-container *ngIf=\"orderHasSettledPayments(order); else cancelOnly\">\r\n                            {{ 'order.refund-and-cancel-order' | translate }}\r\n                        </ng-container>\r\n                        <ng-template #cancelOnly>\r\n                            {{ 'order.cancel-order' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n\r\n                    <ng-container *ngIf=\"(nextStates$ | async)?.length\">\r\n                        <div class=\"dropdown-divider\"></div>\r\n                        <button\r\n                            *ngFor=\"let nextState of nextStates$ | async\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"transitionToState(nextState)\"\r\n                        >\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate : { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </button>\r\n                    </ng-container>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"manuallyTransitionToState(order)\">\r\n                        <clr-icon shape=\"step-forward-2\" class=\"is-warning\"></clr-icon>\r\n                        {{ 'order.manually-transition-to-state' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\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$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <vdr-order-state-label [state]=\"order.state\">\r\n                <button\r\n                    class=\"icon-button\"\r\n                    (click)=\"openStateDiagram()\"\r\n                    [title]=\"'order.order-state-diagram' | translate\"\r\n                >\r\n                    <clr-icon shape=\"list\"></clr-icon>\r\n                </button>\r\n            </vdr-order-state-label>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n            <vdr-labeled-data\r\n                class=\"mt-2\"\r\n                [label]=\"'order.shipping-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.shippingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.shippingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data\r\n                [label]=\"'order.billing-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.billingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.billingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.payments' | translate\" *ngIf=\"order.payments?.length\">\r\n            <vdr-order-payment-card\r\n                *ngFor=\"let payment of order.payments\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                [payment]=\"payment\"\r\n                (settlePayment)=\"settlePayment($event)\"\r\n                (transitionPaymentState)=\"transitionPaymentState($event)\"\r\n                (settleRefund)=\"settleRefund($event)\"\r\n            ></vdr-order-payment-card>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"order.fulfillments?.length\">\r\n            <vdr-fulfillment-card\r\n                *ngFor=\"let fulfillment of order.fulfillments\"\r\n                [fulfillment]=\"fulfillment\"\r\n                [order]=\"order\"\r\n                (transitionState)=\"transitionFulfillment(fulfillment.id, $event)\"\r\n            ></vdr-fulfillment-card>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n\r\n    <vdr-page-block>\r\n        <vdr-seller-orders-card\r\n            class=\"mb-2\"\r\n            *ngIf=\"order.sellerOrders.length\"\r\n            [orderId]=\"order.id\"\r\n        ></vdr-seller-orders-card>\r\n        <vdr-card [paddingX]=\"false\">\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\" [paddingX]=\"false\">\r\n            <table class=\"table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>{{ 'common.description' | translate }}</th>\r\n                        <th>{{ 'order.tax-rate' | translate }}</th>\r\n                        <th>{{ 'order.tax-base' | translate }}</th>\r\n                        <th>{{ 'order.tax-total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let row of order.taxSummary\">\r\n                        <td>{{ row.description }}</td>\r\n                        <td>{{ row.taxRate / 100 | percent:'0.0-2' }}</td>\r\n                        <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                        <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Order\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                [readonly]=\"!('UpdateOrder' | hasPermission)\"\r\n            />\r\n            <button\r\n                class=\"button primary\"\r\n                (click)=\"updateCustomFields()\"\r\n                [disabled]=\"\r\n                    detailForm.get('customFields')?.pristine || detailForm.get('customFields')?.invalid\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"order-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n\r\n        <vdr-card [title]=\"'order.order-history' | translate\">\r\n            <vdr-order-history\r\n                [order]=\"order\"\r\n                [history]=\"history$ | async\"\r\n                (addNote)=\"addNote($event)\"\r\n                (updateNote)=\"updateNote($event)\"\r\n                (deleteNote)=\"deleteNote($event)\"\r\n            ></vdr-order-history>\r\n        </vdr-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".shipping-address{list-style-type:none;line-height:1.3em}.order-cards h6{margin-top:6px;color:var(--color-text-200)}\n"] }]
+            args: [{ selector: 'vdr-order-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left> </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"order-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    (order.state === 'ArrangingPayment' || order.state === 'ArrangingAdditionalPayment') &&\r\n                    (hasUnsettledModifications(order) || 0 < outstandingPaymentAmount(order))\r\n                \"\r\n                (click)=\"addManualPayment(order)\"\r\n            >\r\n                {{ 'order.add-payment-to-order' | translate }}\r\n                ({{ outstandingPaymentAmount(order) | localeCurrency : order.currencyCode }})\r\n            </button>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    order.active === false &&\r\n                    order.state !== 'ArrangingAdditionalPayment' &&\r\n                    order.state !== 'ArrangingPayment' &&\r\n                    0 < outstandingPaymentAmount(order)\r\n                \"\r\n                (click)=\"transitionToState('ArrangingAdditionalPayment')\"\r\n            >\r\n                {{ 'order.arrange-additional-payment' | translate }}\r\n            </button>\r\n            <button\r\n                *ngIf=\"order.type !== 'Aggregate'\"\r\n                class=\"button primary mr-1\"\r\n                (click)=\"fulfillOrder()\"\r\n                [disabled]=\"!canAddFulfillment(order)\"\r\n            >\r\n                {{ 'order.fulfill-order' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <ng-container\r\n                        *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Modifying')\"\r\n                    >\r\n                        <button type=\"button\" vdrDropdownItem (click)=\"transitionToModifying()\">\r\n                            <clr-icon shape=\"pencil\"></clr-icon>\r\n                            {{ 'order.modify-order' | translate }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                    </ng-container>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Cancelled')\"\r\n                        (click)=\"cancelOrRefund(order)\"\r\n                    >\r\n                        <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                        <ng-container *ngIf=\"orderHasSettledPayments(order); else cancelOnly\">\r\n                            {{ 'order.refund-and-cancel-order' | translate }}\r\n                        </ng-container>\r\n                        <ng-template #cancelOnly>\r\n                            {{ 'order.cancel-order' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n\r\n                    <ng-container *ngIf=\"(nextStates$ | async)?.length\">\r\n                        <div class=\"dropdown-divider\"></div>\r\n                        <button\r\n                            *ngFor=\"let nextState of nextStates$ | async\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"transitionToState(nextState)\"\r\n                        >\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate : { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </button>\r\n                    </ng-container>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"manuallyTransitionToState(order)\">\r\n                        <clr-icon shape=\"step-forward-2\" class=\"is-warning\"></clr-icon>\r\n                        {{ 'order.manually-transition-to-state' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\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$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card [title]=\"'order.state' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <button\r\n                    class=\"button-small\"\r\n                    (click)=\"openStateDiagram()\"\r\n                    [title]=\"'order.order-state-diagram' | translate\"\r\n                >\r\n                    <clr-icon shape=\"list\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <button\r\n                    *vdrIfPermissions=\"['UpdateOrder', 'ReadCustomer']\"\r\n                    class=\"button-small\"\r\n                    (click)=\"setOrderCustomer()\"\r\n                    [title]=\"'order.assign-order-to-another-customer' | translate\"\r\n                >\r\n                    <clr-icon shape=\"switch\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n            <vdr-labeled-data\r\n                class=\"mt-2\"\r\n                [label]=\"'order.shipping-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.shippingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.shippingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data\r\n                [label]=\"'order.billing-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.billingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.billingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.payments' | translate\" *ngIf=\"order.payments?.length\">\r\n            <vdr-order-payment-card\r\n                *ngFor=\"let payment of order.payments\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                [payment]=\"payment\"\r\n                (settlePayment)=\"settlePayment($event)\"\r\n                (transitionPaymentState)=\"transitionPaymentState($event)\"\r\n                (settleRefund)=\"settleRefund($event)\"\r\n            ></vdr-order-payment-card>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"order.fulfillments?.length\">\r\n            <vdr-fulfillment-card\r\n                *ngFor=\"let fulfillment of order.fulfillments\"\r\n                [fulfillment]=\"fulfillment\"\r\n                [order]=\"order\"\r\n                (transitionState)=\"transitionFulfillment(fulfillment.id, $event)\"\r\n            ></vdr-fulfillment-card>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n\r\n    <vdr-page-block>\r\n        <vdr-seller-orders-card\r\n            class=\"mb-2\"\r\n            *ngIf=\"order.sellerOrders.length\"\r\n            [orderId]=\"order.id\"\r\n        ></vdr-seller-orders-card>\r\n        <vdr-card [paddingX]=\"false\">\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\" [paddingX]=\"false\">\r\n            <table class=\"table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>{{ 'common.description' | translate }}</th>\r\n                        <th>{{ 'order.tax-rate' | translate }}</th>\r\n                        <th>{{ 'order.tax-base' | translate }}</th>\r\n                        <th>{{ 'order.tax-total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let row of order.taxSummary\">\r\n                        <td>{{ row.description }}</td>\r\n                        <td>{{ row.taxRate / 100 | percent : '0.0-2' }}</td>\r\n                        <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                        <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Order\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                [readonly]=\"!('UpdateOrder' | hasPermission)\"\r\n            />\r\n            <button\r\n                class=\"button primary\"\r\n                (click)=\"updateCustomFields()\"\r\n                [disabled]=\"\r\n                    detailForm.get('customFields')?.pristine || detailForm.get('customFields')?.invalid\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"order-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n\r\n        <vdr-card [title]=\"'order.order-history' | translate\">\r\n            <vdr-order-history\r\n                [order]=\"order\"\r\n                [history]=\"history$ | async\"\r\n                (addNote)=\"addNote($event)\"\r\n                (updateNote)=\"updateNote($event)\"\r\n                (deleteNote)=\"deleteNote($event)\"\r\n            ></vdr-order-history>\r\n        </vdr-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".shipping-address{list-style-type:none;line-height:1.3em}.order-cards h6{margin-top:6px;color:var(--color-text-200)}vdr-order-payment-card+vdr-order-payment-card{margin-top:calc(var(--space-unit) * 2)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i1.NotificationService }, { type: i1.ModalService }, { type: OrderTransitionService }, { type: i2.FormBuilder }]; } });
+class OrderModificationSummaryComponent {
+    get adjustedLines() {
+        return (this.modifyOrderInput.adjustOrderLines || [])
+            .map(l => {
+            const line = this.orderSnapshot.lines.find(line => line.id === l.orderLineId);
+            if (line) {
+                const delta = l.quantity - line.quantity;
+                const sign = delta === 0 ? '' : delta > 0 ? '+' : '-';
+                return delta
+                    ? `${sign}${Math.abs(delta)} ${line.productVariant.name}`
+                    : line.productVariant.name;
+            }
+        })
+            .filter(notNullOrUndefined);
+    }
+    getModifiedFields(formGroup) {
+        if (!formGroup.dirty) {
+            return '';
+        }
+        return Object.entries(formGroup.controls)
+            .map(([key, control]) => {
+            if (control.dirty) {
+                return key;
+            }
+        })
+            .filter(notNullOrUndefined)
+            .join(', ');
+    }
+    getUpdatedShippingMethodLines() {
+        return Object.entries(this.updatedShippingMethods || {})
+            .map(([lineId, shippingMethod]) => {
+            const previousMethod = this.orderSnapshot.shippingLines.find(l => l.id === lineId);
+            if (!previousMethod) {
+                return;
+            }
+            const previousName = previousMethod.shippingMethod.name || previousMethod.shippingMethod.code;
+            const newName = shippingMethod.name || shippingMethod.code;
+            return `${previousName} -> ${newName}`;
+        })
+            .filter(notNullOrUndefined);
+    }
+    get couponCodeChanges() {
+        const originalCodes = this.orderSnapshot.couponCodes || [];
+        const newCodes = this.couponCodesControl.value || [];
+        const addedCodes = newCodes.filter(c => !originalCodes.includes(c)).map(c => `+ ${c}`);
+        const removedCodes = originalCodes.filter(c => !newCodes.includes(c)).map(c => `- ${c}`);
+        return [...addedCodes, ...removedCodes];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderModificationSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderModificationSummaryComponent, selector: "vdr-order-modification-summary", inputs: { orderSnapshot: "orderSnapshot", modifyOrderInput: "modifyOrderInput", addedLines: "addedLines", shippingAddressForm: "shippingAddressForm", billingAddressForm: "billingAddressForm", updatedShippingMethods: "updatedShippingMethods", couponCodesControl: "couponCodesControl" }, ngImport: i0, template: "<vdr-labeled-data\r\n        *ngIf=\"modifyOrderInput.adjustOrderLines?.length\"\r\n        [label]=\"\r\n                    'order.modification-adjusting-lines'\r\n                        | translate : { count: modifyOrderInput.adjustOrderLines?.length }\r\n                \"\r\n>\r\n    <div *ngFor=\"let line of adjustedLines\" class=\"mb-1\">\r\n        {{ line }}\r\n    </div>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data\r\n        *ngIf=\"modifyOrderInput.addItems?.length\"\r\n        [label]=\"\r\n                    'order.modification-adding-items'\r\n                        | translate : { count: modifyOrderInput.addItems?.length }\r\n                \"\r\n>\r\n    <div *ngFor=\"let item of addedLines\">\r\n        {{ item.productVariant.name }} x {{ item.quantity }}\r\n    </div>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data\r\n        *ngIf=\"modifyOrderInput.surcharges?.length\"\r\n        [label]=\"\r\n                    'order.modification-adding-surcharges'\r\n                        | translate : { count: modifyOrderInput.surcharges?.length }\r\n                \"\r\n>\r\n    <div *ngFor=\"let surcharge of modifyOrderInput.surcharges\" class=\"mb-1\">\r\n        {{ surcharge.description }}: {{ surcharge.price | localeCurrency : orderSnapshot.currencyCode }}\r\n    </div>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data\r\n        *ngIf=\"getModifiedFields(shippingAddressForm) as updatedShippingFields\"\r\n        [label]=\"'order.modification-updating-shipping-address' | translate\"\r\n>\r\n    {{ updatedShippingFields }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data\r\n        *ngIf=\"getModifiedFields(billingAddressForm) as updatedBillingFields\"\r\n        [label]=\"'order.modification-updating-billing-address' | translate\"\r\n>\r\n    {{ updatedBillingFields }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"couponCodeChanges.length\" [label]=\"'order.set-coupon-codes' | translate\">\r\n    <div *ngFor=\"let change of couponCodeChanges\" class=\"mb-1\">{{ change }}</div>\r\n</vdr-labeled-data>\r\n<ng-container *ngIf=\"getUpdatedShippingMethodLines() as updatedShippingMethods\">\r\n    <vdr-labeled-data *ngIf=\"updatedShippingMethods.length\" [label]=\"'order.shipping-method' | translate\">\r\n        <div *ngFor=\"let change of updatedShippingMethods\" class=\"mb-1\">{{ change }}</div>\r\n    </vdr-labeled-data>\r\n</ng-container>", styles: [""], dependencies: [{ 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: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderModificationSummaryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-order-modification-summary', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-labeled-data\r\n        *ngIf=\"modifyOrderInput.adjustOrderLines?.length\"\r\n        [label]=\"\r\n                    'order.modification-adjusting-lines'\r\n                        | translate : { count: modifyOrderInput.adjustOrderLines?.length }\r\n                \"\r\n>\r\n    <div *ngFor=\"let line of adjustedLines\" class=\"mb-1\">\r\n        {{ line }}\r\n    </div>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data\r\n        *ngIf=\"modifyOrderInput.addItems?.length\"\r\n        [label]=\"\r\n                    'order.modification-adding-items'\r\n                        | translate : { count: modifyOrderInput.addItems?.length }\r\n                \"\r\n>\r\n    <div *ngFor=\"let item of addedLines\">\r\n        {{ item.productVariant.name }} x {{ item.quantity }}\r\n    </div>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data\r\n        *ngIf=\"modifyOrderInput.surcharges?.length\"\r\n        [label]=\"\r\n                    'order.modification-adding-surcharges'\r\n                        | translate : { count: modifyOrderInput.surcharges?.length }\r\n                \"\r\n>\r\n    <div *ngFor=\"let surcharge of modifyOrderInput.surcharges\" class=\"mb-1\">\r\n        {{ surcharge.description }}: {{ surcharge.price | localeCurrency : orderSnapshot.currencyCode }}\r\n    </div>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data\r\n        *ngIf=\"getModifiedFields(shippingAddressForm) as updatedShippingFields\"\r\n        [label]=\"'order.modification-updating-shipping-address' | translate\"\r\n>\r\n    {{ updatedShippingFields }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data\r\n        *ngIf=\"getModifiedFields(billingAddressForm) as updatedBillingFields\"\r\n        [label]=\"'order.modification-updating-billing-address' | translate\"\r\n>\r\n    {{ updatedBillingFields }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"couponCodeChanges.length\" [label]=\"'order.set-coupon-codes' | translate\">\r\n    <div *ngFor=\"let change of couponCodeChanges\" class=\"mb-1\">{{ change }}</div>\r\n</vdr-labeled-data>\r\n<ng-container *ngIf=\"getUpdatedShippingMethodLines() as updatedShippingMethods\">\r\n    <vdr-labeled-data *ngIf=\"updatedShippingMethods.length\" [label]=\"'order.shipping-method' | translate\">\r\n        <div *ngFor=\"let change of updatedShippingMethods\" class=\"mb-1\">{{ change }}</div>\r\n    </vdr-labeled-data>\r\n</ng-container>" }]
+        }], propDecorators: { orderSnapshot: [{
+                type: Input
+            }], modifyOrderInput: [{
+                type: Input
+            }], addedLines: [{
+                type: Input
+            }], shippingAddressForm: [{
+                type: Input
+            }], billingAddressForm: [{
+                type: Input
+            }], updatedShippingMethods: [{
+                type: Input
+            }], couponCodesControl: [{
+                type: Input
+            }] } });
 var OrderEditResultType;
 (function (OrderEditResultType) {
     OrderEditResultType[OrderEditResultType["Refund"] = 0] = "Refund";
@@ -2424,10 +2648,37 @@ var OrderEditResultType;
 })(OrderEditResultType || (OrderEditResultType = {}));
 class OrderEditsPreviewDialogComponent {
     get priceDifference() {
-        return this.order.totalWithTax - this.originalTotalWithTax;
+        return this.order.totalWithTax - this.orderSnapshot.totalWithTax;
+    }
+    get amountToRefundTotal() {
+        return this.refundablePayments.reduce((total, payment) => total + payment.amountToRefundControl.value, 0);
     }
     ngOnInit() {
         this.refundNote = this.modifyOrderInput.note || '';
+        this.refundablePayments = getRefundablePayments(this.order.payments || []);
+        this.refundablePayments.forEach(rp => {
+            rp.amountToRefundControl.addValidators(Validators.max(this.priceDifference * -1));
+        });
+        if (this.priceDifference < 0 && this.refundablePayments.length) {
+            this.onPaymentSelected(this.refundablePayments[0], true);
+        }
+    }
+    onPaymentSelected(payment, selected) {
+        if (selected) {
+            const outstandingRefundAmount = this.priceDifference * -1 -
+                this.refundablePayments
+                    .filter(p => p.id !== payment.id)
+                    .reduce((total, p) => total + p.amountToRefundControl.value, 0);
+            if (0 < outstandingRefundAmount) {
+                payment.amountToRefundControl.setValue(Math.min(outstandingRefundAmount, payment.refundableAmount));
+            }
+        }
+        else {
+            payment.amountToRefundControl.setValue(0);
+        }
+    }
+    refundsCoverDifference() {
+        return this.priceDifference * -1 === this.amountToRefundTotal;
     }
     cancel() {
         this.resolveWith({
@@ -2444,8 +2695,15 @@ class OrderEditsPreviewDialogComponent {
             this.resolveWith({
                 result: OrderEditResultType.Refund,
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                refundPaymentId: this.selectedPayment.id,
-                refundNote: this.refundNote,
+                refunds: this.refundablePayments
+                    .filter(rp => rp.selected && 0 < rp.amountToRefundControl.value)
+                    .map(payment => {
+                    return {
+                        reason: this.refundNote || this.modifyOrderInput.note,
+                        paymentId: payment.id,
+                        amount: payment.amountToRefundControl.value,
+                    };
+                }),
             });
         }
         else {
@@ -2455,23 +2713,23 @@ class OrderEditsPreviewDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderEditsPreviewDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderEditsPreviewDialogComponent, selector: "vdr-order-edits-preview-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.confirm-modifications' | translate }}</ng-template>\r\n<vdr-order-table [order]=\"order\" [orderLineCustomFields]=\"orderLineCustomFields\"></vdr-order-table>\r\n\r\n<h4 class=\"h4\">\r\n    {{ 'order.modify-order-price-difference' | translate }}:\r\n    <strong>{{ priceDifference | localeCurrency: order.currencyCode }}</strong>\r\n</h4>\r\n<div *ngIf=\"priceDifference < 0\">\r\n<clr-select-container>\r\n    <label>{{ 'order.payment-to-refund' | translate }}</label>\r\n    <select clrSelect name=\"options\" [(ngModel)]=\"selectedPayment\">\r\n        <option\r\n            *ngFor=\"let payment of order.payments\"\r\n            [ngValue]=\"payment\"\r\n        >\r\n            #{{ payment.id }} {{ payment.method }}:\r\n            {{ payment.amount | localeCurrency: order.currencyCode }}\r\n        </option>\r\n    </select>\r\n</clr-select-container>\r\n    <label class=\"clr-control-label\">{{ 'order.refund-cancellation-reason' | translate }}</label>\r\n    <textarea [(ngModel)]=\"refundNote\" name=\"refundNote\" clrTextarea required></textarea>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"submit()\" [disabled]=\"priceDifference < 0 && !selectedPayment\" class=\"btn btn-primary\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.ClrSelect, selector: "[clrSelect]" }, { kind: "component", type: i1$1.ClrSelectContainer, selector: "clr-select-container" }, { kind: "directive", type: i1$1.ClrTextarea, selector: "[clrTextarea]" }, { 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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: OrderTableComponent, selector: "vdr-order-table", inputs: ["order", "orderLineCustomFields", "isDraft"], outputs: ["adjust", "remove"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderEditsPreviewDialogComponent, selector: "vdr-order-edits-preview-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.confirm-modifications' | translate }}</ng-template>\r\n<vdr-order-table\r\n    [order]=\"order\"\r\n    [orderLineCustomFields]=\"orderLineCustomFields\"\r\n    class=\"order-edits-preview-table\"\r\n></vdr-order-table>\r\n<div class=\"payments-wrapper mb-2\">\r\n    <div class=\"flex-spacer\">\r\n        <vdr-payment-for-refund-selector\r\n            *ngIf=\"priceDifference < 0\"\r\n            class=\"\"\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 class=\"flex-spacer\">\r\n        <vdr-card [title]=\"'order.modify-order' | 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            <vdr-labeled-data [label]=\"'order.note' | translate\">\r\n                {{ modifyOrderInput.note || '-' }}\r\n            </vdr-labeled-data>\r\n            <vdr-form-field\r\n                [label]=\"'order.refund-cancellation-reason' | translate\"\r\n                *ngIf=\"priceDifference < 0\"\r\n            >\r\n                <textarea [(ngModel)]=\"refundNote\" name=\"refundNote\" required></textarea>\r\n            </vdr-form-field>\r\n        </vdr-card>\r\n    </div>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <div>\r\n        <div class=\"errors\">\r\n            <clr-alert\r\n                class=\"mb-1\"\r\n                *ngIf=\"priceDifference < 0 && !refundsCoverDifference()\"\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        </div>\r\n        <div class=\"modal-buttons\">\r\n            <clr-alert class=\"\" [clrAlertType]=\"'primary'\" [clrAlertClosable]=\"false\">\r\n                <clr-alert-item>\r\n                    {{ 'order.modify-order-price-difference' | translate }}\r\n                    {{ 0 < priceDifference ? '+' : ''\r\n                    }}{{ priceDifference | localeCurrency : order.currencyCode }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n            <button type=\"button\" class=\"btn\" (click)=\"cancel()\">\r\n                {{ 'common.cancel' | translate }}\r\n            </button>\r\n            <button\r\n                type=\"submit\"\r\n                (click)=\"submit()\"\r\n                [disabled]=\"priceDifference < 0 ? !refundsCoverDifference() : false\"\r\n                class=\"btn btn-primary\"\r\n            >\r\n                {{ 'common.confirm' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: ["::ng-deep .order-edits-preview-table .table-wrapper{max-width:initial!important}.payments-wrapper{display:flex;gap:calc(var(--space-unit) * 2)}.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", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i3.ClrAlertItem, selector: "clr-alert-item" }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: OrderTableComponent, selector: "vdr-order-table", inputs: ["order", "orderLineCustomFields", "isDraft"], outputs: ["adjust", "remove"] }, { kind: "component", type: PaymentForRefundSelectorComponent, selector: "vdr-payment-for-refund-selector", inputs: ["refundablePayments", "order"], outputs: ["paymentSelected"] }, { kind: "component", type: OrderModificationSummaryComponent, selector: "vdr-order-modification-summary", inputs: ["orderSnapshot", "modifyOrderInput", "addedLines", "shippingAddressForm", "billingAddressForm", "updatedShippingMethods", "couponCodesControl"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderEditsPreviewDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-edits-preview-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.confirm-modifications' | translate }}</ng-template>\r\n<vdr-order-table [order]=\"order\" [orderLineCustomFields]=\"orderLineCustomFields\"></vdr-order-table>\r\n\r\n<h4 class=\"h4\">\r\n    {{ 'order.modify-order-price-difference' | translate }}:\r\n    <strong>{{ priceDifference | localeCurrency: order.currencyCode }}</strong>\r\n</h4>\r\n<div *ngIf=\"priceDifference < 0\">\r\n<clr-select-container>\r\n    <label>{{ 'order.payment-to-refund' | translate }}</label>\r\n    <select clrSelect name=\"options\" [(ngModel)]=\"selectedPayment\">\r\n        <option\r\n            *ngFor=\"let payment of order.payments\"\r\n            [ngValue]=\"payment\"\r\n        >\r\n            #{{ payment.id }} {{ payment.method }}:\r\n            {{ payment.amount | localeCurrency: order.currencyCode }}\r\n        </option>\r\n    </select>\r\n</clr-select-container>\r\n    <label class=\"clr-control-label\">{{ 'order.refund-cancellation-reason' | translate }}</label>\r\n    <textarea [(ngModel)]=\"refundNote\" name=\"refundNote\" clrTextarea required></textarea>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"submit()\" [disabled]=\"priceDifference < 0 && !selectedPayment\" class=\"btn btn-primary\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n" }]
+            args: [{ selector: 'vdr-order-edits-preview-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.confirm-modifications' | translate }}</ng-template>\r\n<vdr-order-table\r\n    [order]=\"order\"\r\n    [orderLineCustomFields]=\"orderLineCustomFields\"\r\n    class=\"order-edits-preview-table\"\r\n></vdr-order-table>\r\n<div class=\"payments-wrapper mb-2\">\r\n    <div class=\"flex-spacer\">\r\n        <vdr-payment-for-refund-selector\r\n            *ngIf=\"priceDifference < 0\"\r\n            class=\"\"\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 class=\"flex-spacer\">\r\n        <vdr-card [title]=\"'order.modify-order' | 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            <vdr-labeled-data [label]=\"'order.note' | translate\">\r\n                {{ modifyOrderInput.note || '-' }}\r\n            </vdr-labeled-data>\r\n            <vdr-form-field\r\n                [label]=\"'order.refund-cancellation-reason' | translate\"\r\n                *ngIf=\"priceDifference < 0\"\r\n            >\r\n                <textarea [(ngModel)]=\"refundNote\" name=\"refundNote\" required></textarea>\r\n            </vdr-form-field>\r\n        </vdr-card>\r\n    </div>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <div>\r\n        <div class=\"errors\">\r\n            <clr-alert\r\n                class=\"mb-1\"\r\n                *ngIf=\"priceDifference < 0 && !refundsCoverDifference()\"\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        </div>\r\n        <div class=\"modal-buttons\">\r\n            <clr-alert class=\"\" [clrAlertType]=\"'primary'\" [clrAlertClosable]=\"false\">\r\n                <clr-alert-item>\r\n                    {{ 'order.modify-order-price-difference' | translate }}\r\n                    {{ 0 < priceDifference ? '+' : ''\r\n                    }}{{ priceDifference | localeCurrency : order.currencyCode }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n            <button type=\"button\" class=\"btn\" (click)=\"cancel()\">\r\n                {{ 'common.cancel' | translate }}\r\n            </button>\r\n            <button\r\n                type=\"submit\"\r\n                (click)=\"submit()\"\r\n                [disabled]=\"priceDifference < 0 ? !refundsCoverDifference() : false\"\r\n                class=\"btn btn-primary\"\r\n            >\r\n                {{ 'common.confirm' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: ["::ng-deep .order-edits-preview-table .table-wrapper{max-width:initial!important}.payments-wrapper{display:flex;gap:calc(var(--space-unit) * 2)}.modal-buttons{display:flex;justify-content:flex-end;gap:.6rem;gap:var(--clr-modal-footer-gap, .6rem)}\n"] }]
         }] });
-class OrderEditorComponent extends BaseDetailComponent {
-    constructor(router, route, serverConfigService, changeDetector, dataService, notificationService, modalService, orderTransitionService) {
-        super(route, router, serverConfigService, dataService);
-        this.changeDetector = changeDetector;
+class OrderEditorComponent extends TypedBaseDetailComponent {
+    constructor(dataService, notificationService, modalService, orderTransitionService, changeDetectorRef) {
+        super();
         this.dataService = dataService;
         this.notificationService = notificationService;
         this.modalService = modalService;
         this.orderTransitionService = orderTransitionService;
+        this.changeDetectorRef = changeDetectorRef;
         this.detailForm = new UntypedFormGroup({});
-        this.couponCodesControl = new UntypedFormControl();
+        this.couponCodesControl = new FormControl([]);
         this.modifyOrderInput = {
             dryRun: true,
             orderId: '',
@@ -2479,74 +2737,66 @@ class OrderEditorComponent extends BaseDetailComponent {
             adjustOrderLines: [],
             surcharges: [],
             note: '',
+            refunds: [],
             updateShippingAddress: {},
             updateBillingAddress: {},
         };
+        this.surchargeForm = new FormGroup({
+            description: new FormControl('', Validators.minLength(1)),
+            sku: new FormControl(''),
+            price: new FormControl(0),
+            priceIncludesTax: new FormControl(true),
+            taxRate: new FormControl(0),
+            taxDescription: new FormControl(''),
+        });
+        this.shippingAddressForm = new FormGroup({
+            fullName: new FormControl(''),
+            company: new FormControl(''),
+            streetLine1: new FormControl(''),
+            streetLine2: new FormControl(''),
+            city: new FormControl(''),
+            province: new FormControl(''),
+            postalCode: new FormControl(''),
+            countryCode: new FormControl(''),
+            phoneNumber: new FormControl(''),
+        });
+        this.billingAddressForm = new FormGroup({
+            fullName: new FormControl(''),
+            company: new FormControl(''),
+            streetLine1: new FormControl(''),
+            streetLine2: new FormControl(''),
+            city: new FormControl(''),
+            province: new FormControl(''),
+            postalCode: new FormControl(''),
+            countryCode: new FormControl(''),
+            phoneNumber: new FormControl(''),
+        });
         this.note = '';
         this.recalculateShipping = true;
+        this.editingShippingAddress = false;
+        this.editingBillingAddress = false;
+        this.updatedShippingMethods = {};
         this.addedVariants = new Map();
     }
-    get addedLines() {
-        const getSinglePriceValue = (price) => price.__typename === 'SinglePrice' ? price.value : 0;
-        return (this.modifyOrderInput.addItems || [])
-            .map(row => {
-            const variantInfo = this.addedVariants.get(row.productVariantId);
-            if (variantInfo) {
-                return {
-                    ...variantInfo,
-                    price: getSinglePriceValue(variantInfo.price),
-                    priceWithTax: getSinglePriceValue(variantInfo.priceWithTax),
-                    quantity: row.quantity,
-                };
-            }
-        })
-            .filter(notNullOrUndefined);
-    }
     ngOnInit() {
         this.init();
         this.addressCustomFields = this.getCustomFieldConfig('Address');
         this.modifyOrderInput.orderId = this.route.snapshot.paramMap.get('id');
         this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
-        this.entity$.pipe(takeUntil(this.destroy$)).subscribe(order => {
+        this.entity$.pipe(take(1)).subscribe(order => {
+            this.orderSnapshot = this.createOrderSnapshot(order);
             if (order.couponCodes.length) {
                 this.couponCodesControl.setValue(order.couponCodes);
             }
-            this.surchargeForm = new UntypedFormGroup({
-                description: new UntypedFormControl('', Validators.required),
-                sku: new UntypedFormControl(''),
-                price: new UntypedFormControl(0, Validators.required),
-                priceIncludesTax: new UntypedFormControl(true),
-                taxRate: new UntypedFormControl(0),
-                taxDescription: new UntypedFormControl(''),
-            });
-            if (!this.shippingAddressForm) {
-                this.shippingAddressForm = new UntypedFormGroup({
-                    fullName: new UntypedFormControl(order.shippingAddress?.fullName),
-                    company: new UntypedFormControl(order.shippingAddress?.company),
-                    streetLine1: new UntypedFormControl(order.shippingAddress?.streetLine1),
-                    streetLine2: new UntypedFormControl(order.shippingAddress?.streetLine2),
-                    city: new UntypedFormControl(order.shippingAddress?.city),
-                    province: new UntypedFormControl(order.shippingAddress?.province),
-                    postalCode: new UntypedFormControl(order.shippingAddress?.postalCode),
-                    countryCode: new UntypedFormControl(order.shippingAddress?.countryCode),
-                    phoneNumber: new UntypedFormControl(order.shippingAddress?.phoneNumber),
-                });
-                this.addAddressCustomFieldsFormGroup(this.shippingAddressForm, order.shippingAddress);
-            }
-            if (!this.billingAddressForm) {
-                this.billingAddressForm = new UntypedFormGroup({
-                    fullName: new UntypedFormControl(order.billingAddress?.fullName),
-                    company: new UntypedFormControl(order.billingAddress?.company),
-                    streetLine1: new UntypedFormControl(order.billingAddress?.streetLine1),
-                    streetLine2: new UntypedFormControl(order.billingAddress?.streetLine2),
-                    city: new UntypedFormControl(order.billingAddress?.city),
-                    province: new UntypedFormControl(order.billingAddress?.province),
-                    postalCode: new UntypedFormControl(order.billingAddress?.postalCode),
-                    countryCode: new UntypedFormControl(order.billingAddress?.countryCode),
-                    phoneNumber: new UntypedFormControl(order.billingAddress?.phoneNumber),
-                });
-                this.addAddressCustomFieldsFormGroup(this.billingAddressForm, order.billingAddress);
+            this.surchargeForm.reset();
+            for (const [name, control] of Object.entries(this.shippingAddressForm.controls)) {
+                control.setValue(order.shippingAddress?.[name]);
             }
+            this.addAddressCustomFieldsFormGroup(this.shippingAddressForm, order.shippingAddress);
+            for (const [name, control] of Object.entries(this.billingAddressForm.controls)) {
+                control.setValue(order.billingAddress?.[name]);
+            }
+            this.addAddressCustomFieldsFormGroup(this.billingAddressForm, order.billingAddress);
             this.orderLineCustomFieldsFormArray = new UntypedFormArray([]);
             for (const line of order.lines) {
                 const formGroup = new UntypedFormGroup({});
@@ -2589,10 +2839,38 @@ class OrderEditorComponent extends BaseDetailComponent {
             .single$.subscribe(({ order }) => {
             this.previousState = order?.history.items[0].data.from;
         });
+        this.uiLanguage$ = this.dataService.client
+            .uiState()
+            .stream$.pipe(map(({ uiState }) => uiState.language));
     }
     ngOnDestroy() {
         this.destroy();
     }
+    get addedLines() {
+        const getSinglePriceValue = (price) => price.__typename === 'SinglePrice' ? price.value : 0;
+        return (this.modifyOrderInput.addItems || [])
+            .map(row => {
+            const variantInfo = this.addedVariants.get(row.productVariantId);
+            if (variantInfo) {
+                return {
+                    id: this.getIdForAddedItem(row),
+                    featuredAsset: variantInfo.productAsset,
+                    productVariant: {
+                        id: variantInfo.productVariantId,
+                        name: variantInfo.productVariantName,
+                        sku: variantInfo.sku,
+                    },
+                    unitPrice: getSinglePriceValue(variantInfo.price),
+                    unitPriceWithTax: getSinglePriceValue(variantInfo.priceWithTax),
+                    quantity: row.quantity,
+                };
+            }
+        })
+            .filter(notNullOrUndefined);
+    }
+    getIdForAddedItem(row) {
+        return `added-${row.productVariantId}-${JSON.stringify(row.customFields || {})}`;
+    }
     transitionToPriorState(order) {
         this.orderTransitionService
             .transitionToPreModifyingState(order.id, order.nextStates)
@@ -2600,40 +2878,62 @@ class OrderEditorComponent extends BaseDetailComponent {
             this.router.navigate(['..'], { relativeTo: this.route });
         });
     }
-    canPreviewChanges() {
+    hasModifications() {
         const { addItems, adjustOrderLines, surcharges } = this.modifyOrderInput;
         return (!!addItems?.length ||
             !!surcharges?.length ||
             !!adjustOrderLines?.length ||
             (this.shippingAddressForm.dirty && this.shippingAddressForm.valid) ||
             (this.billingAddressForm.dirty && this.billingAddressForm.valid) ||
-            this.couponCodesControl.dirty);
+            this.couponCodesControl.dirty ||
+            Object.entries(this.updatedShippingMethods).length > 0);
     }
     isLineModified(line) {
         return !!this.modifyOrderInput.adjustOrderLines?.find(l => l.orderLineId === line.id && l.quantity !== line.quantity);
     }
+    getInitialLineQuantity(lineId) {
+        const adjustedLine = this.modifyOrderInput.adjustOrderLines?.find(l => l.orderLineId === lineId);
+        if (adjustedLine) {
+            return adjustedLine.quantity;
+        }
+        else {
+            const line = this.orderSnapshot.lines.find(l => l.id === lineId);
+            return line ? line.quantity : 0;
+        }
+    }
     updateLineQuantity(line, quantity) {
         const { adjustOrderLines } = this.modifyOrderInput;
-        let row = adjustOrderLines?.find(l => l.orderLineId === line.id);
-        if (row && +quantity === line.quantity) {
-            // Remove the modification if the quantity is the same as
-            // the original order
-            adjustOrderLines?.splice(adjustOrderLines?.indexOf(row), 1);
+        if (this.isAddedLine(line)) {
+            const row = this.modifyOrderInput.addItems?.find(l => l.productVariantId === line.productVariant.id);
+            if (row) {
+                row.quantity = +quantity;
+            }
         }
-        if (!row) {
-            row = { orderLineId: line.id, quantity: +quantity };
-            adjustOrderLines?.push(row);
+        else {
+            let row = adjustOrderLines?.find(l => l.orderLineId === line.id);
+            if (row && +quantity === line.quantity) {
+                // Remove the modification if the quantity is the same as
+                // the original order
+                adjustOrderLines?.splice(adjustOrderLines?.indexOf(row), 1);
+            }
+            if (!row) {
+                row = { orderLineId: line.id, quantity: +quantity };
+                adjustOrderLines?.push(row);
+            }
+            row.quantity = +quantity;
         }
-        row.quantity = +quantity;
+    }
+    isAddedLine(line) {
+        return line.id.startsWith('added-');
     }
     updateAddedItemQuantity(item, quantity) {
-        const row = this.modifyOrderInput.addItems?.find(l => l.productVariantId === item.productVariantId);
+        const row = this.modifyOrderInput.addItems?.find(l => l.productVariantId === item.productVariant.id);
         if (row) {
             row.quantity = +quantity;
         }
     }
     trackByProductVariantId(index, item) {
-        return item.productVariantId;
+        return item.productVariant.id;
     }
     getSelectedItemPrice(result) {
         switch (result?.priceWithTax.__typename) {
@@ -2677,15 +2977,59 @@ class OrderEditorComponent extends BaseDetailComponent {
         this.addItemSelectedVariant = undefined;
         this.addedVariants.set(result.productVariantId, result);
     }
+    getShippingLineDetails(shippingLine) {
+        const updatedMethod = this.updatedShippingMethods[shippingLine.id];
+        if (updatedMethod) {
+            return {
+                name: updatedMethod.name || updatedMethod.code,
+                price: updatedMethod.priceWithTax,
+            };
+        }
+        else {
+            return {
+                name: shippingLine.shippingMethod.name || shippingLine.shippingMethod.code,
+                price: shippingLine.discountedPriceWithTax,
+            };
+        }
+    }
+    setShippingMethod(shippingLineId) {
+        const currentShippingMethod = this.updatedShippingMethods[shippingLineId] ??
+            this.entity?.shippingLines.find(l => l.id === shippingLineId)?.shippingMethod;
+        if (!currentShippingMethod) {
+            return;
+        }
+        this.dataService.order
+            .getDraftOrderEligibleShippingMethods(this.id)
+            .mapSingle(({ eligibleShippingMethodsForDraftOrder }) => eligibleShippingMethodsForDraftOrder)
+            .pipe(switchMap(methods => this.modalService
+            .fromComponent(SelectShippingMethodDialogComponent, {
+            locals: {
+                eligibleShippingMethods: methods,
+                currencyCode: this.entity?.currencyCode,
+                currentSelectionId: currentShippingMethod.id,
+            },
+        })
+            .pipe(map(result => {
+            if (result) {
+                return methods.find(method => method.id === result);
+            }
+        }))))
+            .subscribe(result => {
+            if (result) {
+                this.updatedShippingMethods[shippingLineId] = result;
+                this.changeDetectorRef.markForCheck();
+            }
+        });
+    }
     isMatchingAddItemRow(row, result, customFields) {
         return (row.productVariantId === result.productVariantId &&
             JSON.stringify(row.customFields) === JSON.stringify(customFields));
     }
-    removeAddedItem(index) {
-        this.modifyOrderInput.addItems.splice(index, 1);
-        if (-1 < index) {
-            this.addItemCustomFieldsFormArray.removeAt(index);
-        }
+    removeAddedItem(id) {
+        this.modifyOrderInput.addItems = this.modifyOrderInput.addItems?.filter(l => {
+            const itemId = this.getIdForAddedItem(l);
+            return itemId !== id;
+        });
     }
     getSurchargePrices(surcharge) {
         const priceWithTax = surcharge.priceIncludesTax
@@ -2728,7 +3072,11 @@ class OrderEditorComponent extends BaseDetailComponent {
                 recalculateShipping: this.recalculateShipping,
             },
         };
-        const originalTotalWithTax = order.totalWithTax;
+        if (Object.entries(this.updatedShippingMethods).length) {
+            input.shippingMethodIds = order.shippingLines.map(l => this.updatedShippingMethods[l.id]
+                ? this.updatedShippingMethods[l.id].id
+                : l.shippingMethod.id);
+        }
         this.dataService.order
             .modifyOrder(input)
             .pipe(switchMap(({ modifyOrder }) => {
@@ -2738,10 +3086,15 @@ class OrderEditorComponent extends BaseDetailComponent {
                         size: 'xl',
                         closable: false,
                         locals: {
-                            originalTotalWithTax,
                             order: modifyOrder,
+                            orderSnapshot: this.orderSnapshot,
                             orderLineCustomFields: this.orderLineCustomFields,
                             modifyOrderInput: input,
+                            addedLines: this.addedLines,
+                            shippingAddressForm: this.shippingAddressForm,
+                            billingAddressForm: this.billingAddressForm,
+                            couponCodesControl: this.couponCodesControl,
+                            updatedShippingMethods: this.updatedShippingMethods,
                         },
                     });
                 case 'InsufficientStockError':
@@ -2753,6 +3106,7 @@ class OrderEditorComponent extends BaseDetailComponent {
                 case 'RefundPaymentIdMissingError':
                 case 'CouponCodeLimitError':
                 case 'CouponCodeExpiredError':
+                case 'IneligibleShippingMethodError':
                 case 'CouponCodeInvalidError': {
                     this.notificationService.error(modifyOrder.message);
                     return of(false);
@@ -2775,14 +3129,11 @@ class OrderEditorComponent extends BaseDetailComponent {
                     dryRun: false,
                 };
                 if (result.result === OrderEditResultType.Refund) {
-                    wetRunInput.refund = {
-                        paymentId: result.refundPaymentId,
-                        reason: result.refundNote,
-                    };
+                    wetRunInput.refunds = result.refunds;
                 }
                 return this.dataService.order.modifyOrder(wetRunInput).pipe(switchMap(({ modifyOrder }) => {
                     if (modifyOrder.__typename === 'Order') {
-                        const priceDelta = modifyOrder.totalWithTax - originalTotalWithTax;
+                        const priceDelta = modifyOrder.totalWithTax - this.orderSnapshot.totalWithTax;
                         const nextState = 0 < priceDelta ? 'ArrangingAdditionalPayment' : this.previousState;
                         return this.dataService.order
                             .transitionToState(order.id, nextState)
@@ -2812,16 +3163,25 @@ class OrderEditorComponent extends BaseDetailComponent {
             parentFormGroup.addControl('customFields', addressCustomFieldsFormGroup);
         }
     }
+    createOrderSnapshot(order) {
+        return {
+            totalWithTax: order.totalWithTax,
+            currencyCode: order.currencyCode,
+            couponCodes: order.couponCodes,
+            lines: [...order.lines].map(line => ({ ...line })),
+            shippingLines: [...order.shippingLines].map(line => ({ ...line })),
+        };
+    }
     setFormValues(entity, languageCode) {
         /* not used */
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderEditorComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: i1.ServerConfigService }, { token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: OrderTransitionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", 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\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </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-block>\r\n    <div *ngIf=\"entity$ | async as order\">\r\n        <div class=\"clr-row\">\r\n            <div class=\"clr-col-lg-8\">\r\n                <table class=\"order-table table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th></th>\r\n                            <th>{{ 'order.product-name' | translate }}</th>\r\n                            <th>{{ 'order.product-sku' | translate }}</th>\r\n                            <th>{{ 'order.unit-price' | translate }}</th>\r\n                            <th>{{ 'order.quantity' | translate }}</th>\r\n                            <th *ngIf=\"orderLineCustomFields.length\">\r\n                                {{ 'common.custom-fields' | translate }}\r\n                            </th>\r\n                            <th>{{ 'order.total' | translate }}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr\r\n                            *ngFor=\"let line of order.lines; let i = index\"\r\n                            class=\"order-line\"\r\n                            [class.is-cancelled]=\"line.quantity === 0\"\r\n                            [class.modified]=\"isLineModified(line)\"\r\n                        >\r\n                            <td class=\"align-middle thumb\">\r\n                                <img\r\n                                    *ngIf=\"line.featuredAsset\"\r\n                                    [src]=\"line.featuredAsset | assetPreview : 'tiny'\"\r\n                                />\r\n                            </td>\r\n                            <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                            <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                            <td class=\"align-middle unit-price\">\r\n                                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ line.unitPrice | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                            <td class=\"align-middle quantity\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    min=\"0\"\r\n                                    [value]=\"line.quantity\"\r\n                                    (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n                                />\r\n                                <vdr-line-refunds\r\n                                    [line]=\"line\"\r\n                                    [payments]=\"order.payments\"\r\n                                ></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                            </td>\r\n                            <td\r\n                                *ngIf=\"orderLineCustomFields.length\"\r\n                                class=\"order-line-custom-field align-middle\"\r\n                            >\r\n                                <vdr-tabbed-custom-fields\r\n                                    entityName=\"OrderLine\"\r\n                                    [customFields]=\"orderLineCustomFields\"\r\n                                    [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.get([i])\"\r\n                                    [compact]=\"true\"\r\n                                ></vdr-tabbed-custom-fields>\r\n                            </td>\r\n                            <td class=\"align-middle total\">\r\n                                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ line.linePrice | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                        <tr\r\n                            *ngFor=\"\r\n                                let addedLine of addedLines;\r\n                                trackBy: trackByProductVariantId;\r\n                                let i = index\r\n                            \"\r\n                            class=\"modified\"\r\n                        >\r\n                            <td class=\"align-middle thumb\">\r\n                                <img\r\n                                    *ngIf=\"addedLine.productAsset\"\r\n                                    [src]=\"addedLine.productAsset | assetPreview : 'tiny'\"\r\n                                />\r\n                            </td>\r\n                            <td class=\"align-middle name\">{{ addedLine.productVariantName }}</td>\r\n                            <td class=\"align-middle sku\">{{ addedLine.sku }}</td>\r\n                            <td class=\"align-middle unit-price\">\r\n                                {{ addedLine.priceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ addedLine.price | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                            <td class=\"align-middle quantity\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    min=\"0\"\r\n                                    [value]=\"addedLine.quantity\"\r\n                                    (input)=\"updateAddedItemQuantity(addedLine, $event.target.value)\"\r\n                                />\r\n                                <button class=\"icon-button\" (click)=\"removeAddedItem(i)\">\r\n                                    <clr-icon shape=\"trash\"></clr-icon>\r\n                                </button>\r\n                            </td>\r\n                            <td\r\n                                *ngIf=\"orderLineCustomFields.length\"\r\n                                class=\"order-line-custom-field align-middle\"\r\n                            >\r\n                                <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                                    <vdr-custom-field-control\r\n                                        [customField]=\"customField\"\r\n                                        [customFieldsFormGroup]=\"addItemCustomFieldsFormArray.get([i])\"\r\n                                        entityName=\"OrderLine\"\r\n                                        [compact]=\"true\"\r\n                                    ></vdr-custom-field-control>\r\n                                </ng-container>\r\n                            </td>\r\n                            <td class=\"align-middle total\">\r\n                                {{\r\n                                    (addedLine.priceWithTax * addedLine.quantity) / 100\r\n                                        | currency : order.currencyCode\r\n                                }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{\r\n                                        (addedLine.price * addedLine.quantity) / 100\r\n                                            | currency : order.currencyCode\r\n                                    }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                        <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n                            <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n                            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                            <td class=\"align-middle\"></td>\r\n                            <td></td>\r\n                            <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                            <td class=\"align-middle total\">\r\n                                {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ surcharge.price | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                        <tr\r\n                            class=\"surcharge modified\"\r\n                            *ngFor=\"let surcharge of modifyOrderInput.surcharges; let i = index\"\r\n                        >\r\n                            <td class=\"align-middle name left\" colspan=\"2\">\r\n                                {{ surcharge.description }}\r\n                                <button class=\"icon-button\" (click)=\"removeSurcharge(i)\">\r\n                                    <clr-icon shape=\"trash\"></clr-icon>\r\n                                </button>\r\n                            </td>\r\n                            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                            <td class=\"align-middle\"></td>\r\n                            <td></td>\r\n                            <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                            <td class=\"align-middle total\">\r\n                                <ng-container *ngIf=\"getSurchargePrices(surcharge) as surchargePrice\">\r\n                                    {{ surchargePrice.priceWithTax | localeCurrency : order.currencyCode }}\r\n                                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                        {{ surchargePrice.price | localeCurrency : order.currencyCode }}\r\n                                    </div>\r\n                                </ng-container>\r\n                            </td>\r\n                        </tr>\r\n                        <tr class=\"shipping\">\r\n                            <td class=\"left clr-align-middle\">{{ 'order.shipping' | translate }}</td>\r\n                            <td class=\"clr-align-middle\">\r\n                                {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n                            </td>\r\n                            <td colspan=\"3\"></td>\r\n                            <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                            <td class=\"clr-align-middle\">\r\n                                {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ order.shipping | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n\r\n                <h4 class=\"mb-2\">{{ 'order.modifications' | translate }}</h4>\r\n                <clr-accordion>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{ 'order.add-item-to-order' | translate }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-product-variant-selector\r\n                                class=\"mb-4\"\r\n                                (productSelected)=\"addItemSelectedVariant = $event\"\r\n                            >\r\n                            </vdr-product-variant-selector>\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\">{{\r\n                                        addItemSelectedVariant.productVariantName\r\n                                    }}</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                            <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                            <button\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                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{ 'order.set-coupon-codes' | translate }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-coupon-code-selector\r\n                                [control]=\"couponCodesControl\"\r\n                            ></vdr-coupon-code-selector>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{ 'order.add-surcharge' | translate }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\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 }\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\r\n                                            id=\"taxRate\"\r\n                                            type=\"number\"\r\n                                            min=\"0\"\r\n                                            max=\"100\"\r\n                                            formControlName=\"taxRate\"\r\n                                    /></vdr-affixed-input>\r\n                                </vdr-form-field>\r\n                                <vdr-form-field\r\n                                    [label]=\"'order.tax-description' | translate\"\r\n                                    for=\"taxDescription\"\r\n                                    ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\r\n                                /></vdr-form-field>\r\n                                <button\r\n                                    class=\"btn btn-secondary\"\r\n                                    [disabled]=\"\r\n                                        surchargeForm.invalid ||\r\n                                        surchargeForm.pristine ||\r\n                                        surchargeForm.get('price')?.value === 0\r\n                                    \"\r\n                                >\r\n                                    {{ 'order.add-surcharge' | translate }}\r\n                                </button>\r\n                            </form>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{\r\n                            'order.edit-shipping-address' | translate\r\n                        }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-address-form\r\n                                [formGroup]=\"shippingAddressForm\"\r\n                                [availableCountries]=\"availableCountries$ | async\"\r\n                                [customFields]=\"addressCustomFields\"\r\n                            ></vdr-address-form>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{\r\n                            'order.edit-billing-address' | translate\r\n                        }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-address-form\r\n                                [formGroup]=\"billingAddressForm\"\r\n                                [availableCountries]=\"availableCountries$ | async\"\r\n                                [customFields]=\"addressCustomFields\"\r\n                            ></vdr-address-form>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                </clr-accordion>\r\n            </div>\r\n            <div class=\"clr-col-lg-4 order-cards\">\r\n                <div class=\"card\">\r\n                    <div class=\"card-header\">\r\n                        {{ 'order.modification-summary' | translate }}\r\n                    </div>\r\n                    <div class=\"card-block\">\r\n                        <ul>\r\n                            <li *ngIf=\"modifyOrderInput.addItems?.length\">\r\n                                {{\r\n                                    'order.modification-adding-items'\r\n                                        | translate : { count: modifyOrderInput.addItems?.length }\r\n                                }}\r\n                            </li>\r\n                            <li *ngIf=\"modifyOrderInput.adjustOrderLines?.length\">\r\n                                {{\r\n                                    'order.modification-adjusting-lines'\r\n                                        | translate : { count: modifyOrderInput.adjustOrderLines?.length }\r\n                                }}\r\n                            </li>\r\n                            <li *ngIf=\"modifyOrderInput.surcharges?.length\">\r\n                                {{\r\n                                    'order.modification-adding-surcharges'\r\n                                        | translate : { count: modifyOrderInput.surcharges?.length }\r\n                                }}\r\n                            </li>\r\n                            <li *ngIf=\"shippingAddressForm.dirty\">\r\n                                {{ 'order.modification-updating-shipping-address' | translate }}\r\n                            </li>\r\n                            <li *ngIf=\"billingAddressForm.dirty\">\r\n                                {{ 'order.modification-updating-billing-address' | translate }}\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                    <div class=\"card-block\">\r\n                        <label class=\"clr-control-label\">{{ 'order.note' | translate }}</label>\r\n                        <textarea [(ngModel)]=\"note\" name=\"note\" clrTextarea required></textarea>\r\n                        <clr-checkbox-wrapper class=\"\">\r\n                            <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"recalculateShipping\" />\r\n                            <label>{{ 'order.modification-recalculate-shipping' | translate }}</label>\r\n                        </clr-checkbox-wrapper>\r\n                    </div>\r\n                    <div class=\"card-footer\">\r\n                        <button\r\n                            class=\"btn btn-primary\"\r\n                            [disabled]=\"!canPreviewChanges()\"\r\n                            (click)=\"previewAndModify(order)\"\r\n                        >\r\n                            {{ 'order.preview-changes' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <vdr-page-block> </vdr-page-block\r\n></vdr-page-block>\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{-webkit-text-decoration:underline dotted var(--color-text-200);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}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1$1.ÇlrDatagridDetailRegisterer, selector: "[clrIfExpanded]" }, { kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.ClrIfExpanded, selector: "[clrIfExpanded]", inputs: ["clrIfExpanded"], outputs: ["clrIfExpandedChange"] }, { kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1$1.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i1$1.ClrTextarea, selector: "[clrTextarea]" }, { kind: "component", type: i1$1.ClrAccordion, selector: "clr-accordion", inputs: ["clrAccordionMultiPanel"] }, { kind: "component", type: i1$1.ClrAccordionPanel, selector: "clr-accordion-panel", inputs: ["clrAccordionPanelDisabled", "clrAccordionPanelOpen"], outputs: ["clrAccordionPanelOpenChange"] }, { kind: "component", type: i1$1.ClrAccordionTitle, selector: "clr-accordion-title, clr-step-title" }, { kind: "component", type: i1$1.ClrAccordionContent, selector: "clr-accordion-content, clr-step-content" }, { kind: "directive", type: i1$1.ÇlrAccordionOompaLoompa, selector: "clr-accordion-panel" }, { kind: "directive", type: i1$1.ÇlrAccordionWillyWonka, selector: "clr-accordion" }, { 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"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "component", type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { 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: "pipe", type: i2$1.AsyncPipe, name: "async" }, { 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.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", 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: "16.2.2", 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{-webkit-text-decoration:underline dotted var(--color-text-200);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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-editor', changeDetection: ChangeDetectionStrategy.OnPush, 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\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </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-block>\r\n    <div *ngIf=\"entity$ | async as order\">\r\n        <div class=\"clr-row\">\r\n            <div class=\"clr-col-lg-8\">\r\n                <table class=\"order-table table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th></th>\r\n                            <th>{{ 'order.product-name' | translate }}</th>\r\n                            <th>{{ 'order.product-sku' | translate }}</th>\r\n                            <th>{{ 'order.unit-price' | translate }}</th>\r\n                            <th>{{ 'order.quantity' | translate }}</th>\r\n                            <th *ngIf=\"orderLineCustomFields.length\">\r\n                                {{ 'common.custom-fields' | translate }}\r\n                            </th>\r\n                            <th>{{ 'order.total' | translate }}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr\r\n                            *ngFor=\"let line of order.lines; let i = index\"\r\n                            class=\"order-line\"\r\n                            [class.is-cancelled]=\"line.quantity === 0\"\r\n                            [class.modified]=\"isLineModified(line)\"\r\n                        >\r\n                            <td class=\"align-middle thumb\">\r\n                                <img\r\n                                    *ngIf=\"line.featuredAsset\"\r\n                                    [src]=\"line.featuredAsset | assetPreview : 'tiny'\"\r\n                                />\r\n                            </td>\r\n                            <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                            <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                            <td class=\"align-middle unit-price\">\r\n                                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ line.unitPrice | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                            <td class=\"align-middle quantity\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    min=\"0\"\r\n                                    [value]=\"line.quantity\"\r\n                                    (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n                                />\r\n                                <vdr-line-refunds\r\n                                    [line]=\"line\"\r\n                                    [payments]=\"order.payments\"\r\n                                ></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                            </td>\r\n                            <td\r\n                                *ngIf=\"orderLineCustomFields.length\"\r\n                                class=\"order-line-custom-field align-middle\"\r\n                            >\r\n                                <vdr-tabbed-custom-fields\r\n                                    entityName=\"OrderLine\"\r\n                                    [customFields]=\"orderLineCustomFields\"\r\n                                    [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.get([i])\"\r\n                                    [compact]=\"true\"\r\n                                ></vdr-tabbed-custom-fields>\r\n                            </td>\r\n                            <td class=\"align-middle total\">\r\n                                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ line.linePrice | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                        <tr\r\n                            *ngFor=\"\r\n                                let addedLine of addedLines;\r\n                                trackBy: trackByProductVariantId;\r\n                                let i = index\r\n                            \"\r\n                            class=\"modified\"\r\n                        >\r\n                            <td class=\"align-middle thumb\">\r\n                                <img\r\n                                    *ngIf=\"addedLine.productAsset\"\r\n                                    [src]=\"addedLine.productAsset | assetPreview : 'tiny'\"\r\n                                />\r\n                            </td>\r\n                            <td class=\"align-middle name\">{{ addedLine.productVariantName }}</td>\r\n                            <td class=\"align-middle sku\">{{ addedLine.sku }}</td>\r\n                            <td class=\"align-middle unit-price\">\r\n                                {{ addedLine.priceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ addedLine.price | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                            <td class=\"align-middle quantity\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    min=\"0\"\r\n                                    [value]=\"addedLine.quantity\"\r\n                                    (input)=\"updateAddedItemQuantity(addedLine, $event.target.value)\"\r\n                                />\r\n                                <button class=\"icon-button\" (click)=\"removeAddedItem(i)\">\r\n                                    <clr-icon shape=\"trash\"></clr-icon>\r\n                                </button>\r\n                            </td>\r\n                            <td\r\n                                *ngIf=\"orderLineCustomFields.length\"\r\n                                class=\"order-line-custom-field align-middle\"\r\n                            >\r\n                                <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                                    <vdr-custom-field-control\r\n                                        [customField]=\"customField\"\r\n                                        [customFieldsFormGroup]=\"addItemCustomFieldsFormArray.get([i])\"\r\n                                        entityName=\"OrderLine\"\r\n                                        [compact]=\"true\"\r\n                                    ></vdr-custom-field-control>\r\n                                </ng-container>\r\n                            </td>\r\n                            <td class=\"align-middle total\">\r\n                                {{\r\n                                    (addedLine.priceWithTax * addedLine.quantity) / 100\r\n                                        | currency : order.currencyCode\r\n                                }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{\r\n                                        (addedLine.price * addedLine.quantity) / 100\r\n                                            | currency : order.currencyCode\r\n                                    }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                        <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n                            <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n                            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                            <td class=\"align-middle\"></td>\r\n                            <td></td>\r\n                            <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                            <td class=\"align-middle total\">\r\n                                {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ surcharge.price | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                        <tr\r\n                            class=\"surcharge modified\"\r\n                            *ngFor=\"let surcharge of modifyOrderInput.surcharges; let i = index\"\r\n                        >\r\n                            <td class=\"align-middle name left\" colspan=\"2\">\r\n                                {{ surcharge.description }}\r\n                                <button class=\"icon-button\" (click)=\"removeSurcharge(i)\">\r\n                                    <clr-icon shape=\"trash\"></clr-icon>\r\n                                </button>\r\n                            </td>\r\n                            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                            <td class=\"align-middle\"></td>\r\n                            <td></td>\r\n                            <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                            <td class=\"align-middle total\">\r\n                                <ng-container *ngIf=\"getSurchargePrices(surcharge) as surchargePrice\">\r\n                                    {{ surchargePrice.priceWithTax | localeCurrency : order.currencyCode }}\r\n                                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                        {{ surchargePrice.price | localeCurrency : order.currencyCode }}\r\n                                    </div>\r\n                                </ng-container>\r\n                            </td>\r\n                        </tr>\r\n                        <tr class=\"shipping\">\r\n                            <td class=\"left clr-align-middle\">{{ 'order.shipping' | translate }}</td>\r\n                            <td class=\"clr-align-middle\">\r\n                                {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n                            </td>\r\n                            <td colspan=\"3\"></td>\r\n                            <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                            <td class=\"clr-align-middle\">\r\n                                {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ order.shipping | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n\r\n                <h4 class=\"mb-2\">{{ 'order.modifications' | translate }}</h4>\r\n                <clr-accordion>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{ 'order.add-item-to-order' | translate }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-product-variant-selector\r\n                                class=\"mb-4\"\r\n                                (productSelected)=\"addItemSelectedVariant = $event\"\r\n                            >\r\n                            </vdr-product-variant-selector>\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\">{{\r\n                                        addItemSelectedVariant.productVariantName\r\n                                    }}</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                            <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                            <button\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                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{ 'order.set-coupon-codes' | translate }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-coupon-code-selector\r\n                                [control]=\"couponCodesControl\"\r\n                            ></vdr-coupon-code-selector>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{ 'order.add-surcharge' | translate }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\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 }\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\r\n                                            id=\"taxRate\"\r\n                                            type=\"number\"\r\n                                            min=\"0\"\r\n                                            max=\"100\"\r\n                                            formControlName=\"taxRate\"\r\n                                    /></vdr-affixed-input>\r\n                                </vdr-form-field>\r\n                                <vdr-form-field\r\n                                    [label]=\"'order.tax-description' | translate\"\r\n                                    for=\"taxDescription\"\r\n                                    ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\r\n                                /></vdr-form-field>\r\n                                <button\r\n                                    class=\"btn btn-secondary\"\r\n                                    [disabled]=\"\r\n                                        surchargeForm.invalid ||\r\n                                        surchargeForm.pristine ||\r\n                                        surchargeForm.get('price')?.value === 0\r\n                                    \"\r\n                                >\r\n                                    {{ 'order.add-surcharge' | translate }}\r\n                                </button>\r\n                            </form>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{\r\n                            'order.edit-shipping-address' | translate\r\n                        }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-address-form\r\n                                [formGroup]=\"shippingAddressForm\"\r\n                                [availableCountries]=\"availableCountries$ | async\"\r\n                                [customFields]=\"addressCustomFields\"\r\n                            ></vdr-address-form>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{\r\n                            'order.edit-billing-address' | translate\r\n                        }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-address-form\r\n                                [formGroup]=\"billingAddressForm\"\r\n                                [availableCountries]=\"availableCountries$ | async\"\r\n                                [customFields]=\"addressCustomFields\"\r\n                            ></vdr-address-form>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                </clr-accordion>\r\n            </div>\r\n            <div class=\"clr-col-lg-4 order-cards\">\r\n                <div class=\"card\">\r\n                    <div class=\"card-header\">\r\n                        {{ 'order.modification-summary' | translate }}\r\n                    </div>\r\n                    <div class=\"card-block\">\r\n                        <ul>\r\n                            <li *ngIf=\"modifyOrderInput.addItems?.length\">\r\n                                {{\r\n                                    'order.modification-adding-items'\r\n                                        | translate : { count: modifyOrderInput.addItems?.length }\r\n                                }}\r\n                            </li>\r\n                            <li *ngIf=\"modifyOrderInput.adjustOrderLines?.length\">\r\n                                {{\r\n                                    'order.modification-adjusting-lines'\r\n                                        | translate : { count: modifyOrderInput.adjustOrderLines?.length }\r\n                                }}\r\n                            </li>\r\n                            <li *ngIf=\"modifyOrderInput.surcharges?.length\">\r\n                                {{\r\n                                    'order.modification-adding-surcharges'\r\n                                        | translate : { count: modifyOrderInput.surcharges?.length }\r\n                                }}\r\n                            </li>\r\n                            <li *ngIf=\"shippingAddressForm.dirty\">\r\n                                {{ 'order.modification-updating-shipping-address' | translate }}\r\n                            </li>\r\n                            <li *ngIf=\"billingAddressForm.dirty\">\r\n                                {{ 'order.modification-updating-billing-address' | translate }}\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                    <div class=\"card-block\">\r\n                        <label class=\"clr-control-label\">{{ 'order.note' | translate }}</label>\r\n                        <textarea [(ngModel)]=\"note\" name=\"note\" clrTextarea required></textarea>\r\n                        <clr-checkbox-wrapper class=\"\">\r\n                            <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"recalculateShipping\" />\r\n                            <label>{{ 'order.modification-recalculate-shipping' | translate }}</label>\r\n                        </clr-checkbox-wrapper>\r\n                    </div>\r\n                    <div class=\"card-footer\">\r\n                        <button\r\n                            class=\"btn btn-primary\"\r\n                            [disabled]=\"!canPreviewChanges()\"\r\n                            (click)=\"previewAndModify(order)\"\r\n                        >\r\n                            {{ 'order.preview-changes' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <vdr-page-block> </vdr-page-block\r\n></vdr-page-block>\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{-webkit-text-decoration:underline dotted var(--color-text-200);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}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: i1.ServerConfigService }, { type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i1.NotificationService }, { type: i1.ModalService }, { type: OrderTransitionService }]; } });
+            args: [{ selector: 'vdr-order-editor', changeDetection: ChangeDetectionStrategy.OnPush, 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{-webkit-text-decoration:underline dotted var(--color-text-200);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"] }]
+        }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i1.NotificationService }, { type: i1.ModalService }, { type: OrderTransitionService }, { type: i0.ChangeDetectorRef }]; } });
 class OrderListComponent extends TypedBaseListComponent {
     constructor(serverConfigService, channelService) {
@@ -2960,13 +3320,26 @@ class OrderListComponent extends TypedBaseListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", 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: "16.2.2", 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\"></vdr-action-bar-items>\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-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: i1$1.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$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.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", inputs: ["locationId"] }, { 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: "16.2.2", 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\"></vdr-action-bar-items>\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-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", "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.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", inputs: ["locationId"] }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", 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\"></vdr-action-bar-items>\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-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"] }]
         }], ctorParameters: function () { return [{ type: i1.ServerConfigService }, { type: i1.ChannelService }]; } });
+class RefundDetailComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RefundDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: RefundDetailComponent, selector: "vdr-refund-detail", inputs: { refund: "refund", currencyCode: "currencyCode" }, ngImport: i0, template: "<vdr-labeled-data [label]=\"'order.amount' | translate\">\r\n    {{ refund.total | localeCurrency: currencyCode }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"refund.transactionId\" [label]=\"'order.transaction-id' | translate\">\r\n    {{ refund.transactionId }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.payment-metadata' | translate\">\r\n    <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\r\n</vdr-labeled-data>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RefundDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-refund-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-labeled-data [label]=\"'order.amount' | translate\">\r\n    {{ refund.total | localeCurrency: currencyCode }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"refund.transactionId\" [label]=\"'order.transaction-id' | translate\">\r\n    {{ refund.transactionId }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.payment-metadata' | translate\">\r\n    <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\r\n</vdr-labeled-data>\r\n" }]
+        }], propDecorators: { refund: [{
+                type: Input
+            }], currencyCode: [{
+                type: Input
+            }] } });
 const GET_CUSTOMER_ADDRESSES = gql `
     query GetCustomerAddresses($customerId: ID!) {
         customer(id: $customerId) {
@@ -2979,45 +3352,14 @@ const GET_CUSTOMER_ADDRESSES = gql `
     ${ADDRESS_FRAGMENT}
 `;
-/**
- * Resolves the id from the path into a Customer entity.
- */
-class OrderResolver {
-    constructor(router, dataService) {
-        this.router = router;
-        this.dataService = dataService;
-    }
-    /** @internal */
-    resolve(route, state) {
-        const id = route.paramMap.get('id');
-        // Complete the entity stream upon navigating away
-        const navigateAway$ = this.router.events.pipe(filter(event => event instanceof ActivationStart));
-        const stream = this.dataService.order
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            .getOrder(id)
-            .mapStream(data => data.order)
-            .pipe(switchMap(order => {
-            if (order?.state === 'Draft' && route.component !== DraftOrderDetailComponent) {
-                // Make sure Draft orders only get displayed with the DraftOrderDetailComponent
-                this.router.navigate(['/orders/draft', id]);
-                return EMPTY;
-            }
-            else {
-                return [order];
-            }
-        }), takeUntil(navigateAway$), filter(notNullOrUndefined), shareReplay(1));
-        return stream.pipe(take(1), map(() => stream));
+const GET_ORDER_STATE = gql `
+    query GetOrderState($id: ID!) {
+        order(id: $id) {
+            id
+            state
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderResolver, deps: [{ token: i1$2.Router }, { token: i1.DataService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderResolver, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderResolver, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i1.DataService }]; } });
+`;
 class OrderGuard {
     constructor(dataService, router) {
         this.dataService = dataService;
@@ -3025,6 +3367,7 @@ class OrderGuard {
     }
     canActivate(route, state) {
         const isDraft = state.url.includes('orders/draft');
+        const isModifying = state.url.includes('/modify');
         const id = route.paramMap.get('id');
         if (isDraft) {
             if (id === 'create') {
@@ -3037,10 +3380,20 @@ class OrderGuard {
             }
         }
         else {
-            return true;
+            return (this.dataService
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                .query(GET_ORDER_STATE, { id: id })
+                .single$.pipe(map(({ order }) => {
+                if (order?.state === 'Modifying' && !isModifying) {
+                    return this.router.parseUrl(`/orders/${id}/modify`);
+                }
+                else {
+                    return true;
+                }
+            })));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderGuard, deps: [{ token: i1.DataService }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderGuard, deps: [{ token: i1.DataService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderGuard, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderGuard, decorators: [{
@@ -3048,7 +3401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i1$2.Router }]; } });
+        }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i1$1.Router }]; } });
 const createRoutes = (pageService) => [
     {
@@ -3093,58 +3446,15 @@ const createRoutes = (pageService) => [
     },
     {
         path: ':id/modify',
-        component: OrderEditorComponent,
-        resolve: {
-            entity: OrderResolver,
-        },
+        component: PageComponent,
+        canActivate: [OrderGuard],
         data: {
-            breadcrumb: modifyingOrderBreadcrumb,
+            locationId: 'modify-order',
+            breadcrumb: { label: marker('breadcrumb.orders'), link: ['../'] },
         },
+        children: pageService.getPageTabRoutes('modify-order'),
     },
-];
-function orderBreadcrumb(data, params) {
-    return data.entity.pipe(map((entity) => {
-        if (entity.aggregateOrder) {
-            return [
-                {
-                    label: 'breadcrumb.orders',
-                    link: ['../'],
-                },
-                {
-                    label: entity.aggregateOrder.code,
-                    link: ['../', entity.aggregateOrder.id],
-                },
-                {
-                    label: marker('breadcrumb.seller-orders'),
-                    link: ['../', entity.aggregateOrder.id],
-                },
-                {
-                    label: entity.code,
-                    link: [entity.id],
-                },
-            ];
-        }
-        else {
-            return [
-                {
-                    label: 'breadcrumb.orders',
-                    link: ['../'],
-                },
-                {
-                    label: entity.code,
-                    link: [entity.id],
-                },
-            ];
-        }
-    }));
-}
-function modifyingOrderBreadcrumb(data, params) {
-    return orderBreadcrumb(data, params).pipe(map((breadcrumbs) => {
-        const modifiedBreadcrumbs = breadcrumbs.slice();
-        modifiedBreadcrumbs[1].link = ['../', breadcrumbs[1].link[0]];
-        return modifiedBreadcrumbs.concat({ label: marker('breadcrumb.modifying'), link: [''] });
-    }));
-}
+];
 class OrderModule {
     static { this.hasRegisteredTabsAndBulkActions = false; }
@@ -3208,6 +3518,27 @@ class OrderModule {
                 ],
             }),
         });
+        pageService.registerPageTab({
+            priority: 0,
+            location: 'modify-order',
+            tab: marker('order.order'),
+            route: '',
+            component: detailComponentWithResolver({
+                component: OrderEditorComponent,
+                query: OrderDetailQueryDocument,
+                entityKey: 'order',
+                getBreadcrumbs: entity => [
+                    {
+                        label: entity?.code || 'order',
+                        link: ['/orders/', entity?.id],
+                    },
+                    {
+                        label: marker('breadcrumb.modifying-order'),
+                        link: [entity?.id],
+                    },
+                ],
+            }),
+        });
         OrderModule.hasRegisteredTabsAndBulkActions = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderModule, deps: [{ token: i1.PageService }], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -3248,7 +3579,10 @@ class OrderModule {
             OrderHistoryEntryHostComponent,
             SellerOrdersCardComponent,
             OrderDataTableComponent,
-            OrderTotalColumnComponent], imports: [SharedModule, i1$2.RouterModule], exports: [OrderCustomFieldsCardComponent] }); }
+            OrderTotalColumnComponent,
+            PaymentForRefundSelectorComponent,
+            OrderModificationSummaryComponent,
+            RefundDetailComponent], imports: [SharedModule, i1$1.RouterModule], exports: [OrderCustomFieldsCardComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderModule, providers: [
             {
                 provide: ROUTES,
@@ -3309,6 +3643,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
                         SellerOrdersCardComponent,
                         OrderDataTableComponent,
                         OrderTotalColumnComponent,
+                        PaymentForRefundSelectorComponent,
+                        OrderModificationSummaryComponent,
+                        RefundDetailComponent,
                     ],
                     exports: [OrderCustomFieldsCardComponent],
                 }]
@@ -3320,5 +3657,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
-export { AddManualPaymentDialogComponent, CancelOrderDialogComponent, CouponCodeSelectorComponent, DraftOrderDetailComponent, DraftOrderVariantSelectorComponent, FulfillOrderDialogComponent, FulfillmentCardComponent, FulfillmentDetailComponent, FulfillmentStateLabelComponent, GET_COUPON_CODE_SELECTOR_PROMOTION_LIST, GET_CUSTOMER_ADDRESSES, GET_SELLER_ORDERS, LineFulfillmentComponent, LineRefundsComponent, ModificationDetailComponent, NODE_HEIGHT, ORDER_DETAIL_QUERY, OrderCustomFieldsCardComponent, OrderDataTableComponent, OrderDetailComponent, OrderEditResultType, OrderEditorComponent, OrderEditsPreviewDialogComponent, OrderGuard, OrderHistoryComponent, OrderHistoryEntryHostComponent, OrderListComponent, OrderModule, OrderPaymentCardComponent, OrderProcessEdgeComponent, OrderProcessGraphComponent, OrderProcessGraphDialogComponent, OrderProcessNodeComponent, OrderResolver, OrderStateSelectDialogComponent, OrderTableComponent, OrderTotalColumnComponent, OrderTransitionService, PaymentDetailComponent, PaymentStateLabelComponent, RefundOrderDialogComponent, RefundStateLabelComponent, SelectAddressDialogComponent, SelectCustomerDialogComponent, SelectShippingMethodDialogComponent, SellerOrdersCardComponent, SettleRefundDialogComponent, SimpleItemListComponent, createRoutes, modifyingOrderBreadcrumb, orderBreadcrumb };
+export { AddManualPaymentDialogComponent, CancelOrderDialogComponent, CouponCodeSelectorComponent, DraftOrderDetailComponent, DraftOrderVariantSelectorComponent, FulfillOrderDialogComponent, FulfillmentCardComponent, FulfillmentDetailComponent, FulfillmentStateLabelComponent, GET_COUPON_CODE_SELECTOR_PROMOTION_LIST, GET_CUSTOMER_ADDRESSES, GET_ORDER_STATE, GET_SELLER_ORDERS, LineFulfillmentComponent, LineRefundsComponent, ModificationDetailComponent, NODE_HEIGHT, ORDER_DETAIL_QUERY, OrderCustomFieldsCardComponent, OrderDataTableComponent, OrderDetailComponent, OrderEditResultType, OrderEditorComponent, OrderEditsPreviewDialogComponent, OrderGuard, OrderHistoryComponent, OrderHistoryEntryHostComponent, OrderListComponent, OrderModificationSummaryComponent, OrderModule, OrderPaymentCardComponent, OrderProcessEdgeComponent, OrderProcessGraphComponent, OrderProcessGraphDialogComponent, OrderProcessNodeComponent, OrderStateSelectDialogComponent, OrderTableComponent, OrderTotalColumnComponent, OrderTransitionService, PaymentDetailComponent, PaymentForRefundSelectorComponent, PaymentStateLabelComponent, RefundDetailComponent, RefundOrderDialogComponent, RefundStateLabelComponent, SET_ORDER_CUSTOMER_MUTATION, SelectAddressDialogComponent, SelectCustomerDialogComponent, SelectShippingMethodDialogComponent, SellerOrdersCardComponent, SettleRefundDialogComponent, SimpleItemListComponent, createRoutes, getRefundablePayments };
 //# sourceMappingURL=vendure-admin-ui-order.mjs.map