npm - @vendure/admin-ui - Versions diffs - 2.0.0-next.0 → 2.0.0-next.11 - Mend

@vendure/admin-ui 2.0.0-next.0 → 2.0.0-next.11

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

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

@@ -3,7 +3,7 @@ import { Component, ChangeDetectionStrategy, Input, EventEmitter, Output, ViewCh
 import * as i3$1 from '@angular/forms';
 import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms';
 import * as i1 from '@vendure/admin-ui/core';
-import { configurableDefinitionToInstance, GlobalFlag, configurableOperationValueIsValid, toConfigurableOperationInput, HistoryEntryType, SortOrder, AdjustmentType, BaseDetailComponent, EditNoteDialogComponent, BaseListComponent, BaseEntityResolver, createResolveData, CanDeactivateDetailGuard, detailBreadcrumb, SharedModule } from '@vendure/admin-ui/core';
+import { getAppConfig, configurableDefinitionToInstance, GlobalFlag, configurableOperationValueIsValid, toConfigurableOperationInput, HistoryEntryType, SortOrder, AdjustmentType, BaseDetailComponent, EditNoteDialogComponent, BaseListComponent, LogicalOperator, BaseEntityResolver, createResolveData, CanDeactivateDetailGuard, detailBreadcrumb, SharedModule } from '@vendure/admin-ui/core';
 import * as i3 from '@ng-select/ng-select';
 import * as i4 from '@ngx-translate/core';
 import * as i4$1 from '@angular/common';
@@ -11,8 +11,8 @@ import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import * as i2 from '@clr/angular';
 import { isObject, summate, assertNever, notNullOrUndefined } from '@vendure/common/lib/shared-utils';
 import * as i3$2 from '@angular/cdk/bidi';
-import { BehaviorSubject, EMPTY, Subject, of, merge } from 'rxjs';
-import { tap, debounceTime, switchMap, catchError, retryWhen, delay, take, map, startWith, mapTo, takeUntil, shareReplay, distinctUntilChanged, filter } from 'rxjs/operators';
+import { BehaviorSubject, EMPTY, Subject, of, concat, merge } from 'rxjs';
+import { tap, debounceTime, switchMap, catchError, retryWhen, delay, take, map, startWith, mapTo, takeUntil, distinctUntilChanged, shareReplay, filter } from 'rxjs/operators';
 import * as i1$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
@@ -49,10 +49,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
 class CancelOrderDialogComponent {
     constructor(i18nService) {
+        var _a;
         this.i18nService = i18nService;
         this.cancelAll = true;
         this.lineQuantities = {};
-        this.reasons = [marker('order.cancel-reason-customer-request'), marker('order.cancel-reason-not-available')];
+        this.reasons = (_a = getAppConfig().cancellationReasons) !== null && _a !== void 0 ? _a : [
+            marker('order.cancel-reason-customer-request'),
+            marker('order.cancel-reason-not-available'),
+        ];
         this.reasons = this.reasons.map(r => this.i18nService.translate(r));
     }
     get selectionCount() {
@@ -111,10 +115,10 @@ class CancelOrderDialogComponent {
     }
 }
 CancelOrderDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CancelOrderDialogComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component });
-CancelOrderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", 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        <clr-radio-wrapper>\r\n          <input type=\"radio\" clrRadio [value]=\"true\" [(ngModel)]=\"cancelAll\" name=\"options\" (ngModelChange)=\"radioChanged()\" />\r\n          <label>{{ 'order.cancel-entire-order' | translate }}</label>\r\n        </clr-radio-wrapper>\r\n        <clr-radio-wrapper>\r\n          <input type=\"radio\" clrRadio [value]=\"false\" [(ngModel)]=\"cancelAll\" name=\"options\" (ngModelChange)=\"radioChanged()\" />\r\n          <label>{{ 'order.cancel-specified-items' | translate }}</label>\r\n        </clr-radio-wrapper>\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-left: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"], components: [{ type: i2.ClrRadioWrapper, selector: "clr-radio-wrapper" }, { 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"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i2.ClrRadio, selector: "[clrRadio]" }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i4.TranslatePipe, "assetPreview": i1.AssetPreviewPipe, "localeCurrency": i1.LocaleCurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CancelOrderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", 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-left: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"], components: [{ type: i2.ClrRadioWrapper, selector: "clr-radio-wrapper" }, { 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"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i2.ClrRadio, selector: "[clrRadio]" }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i4.TranslatePipe, "assetPreview": i1.AssetPreviewPipe, "localeCurrency": i1.LocaleCurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CancelOrderDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-cancel-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, 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        <clr-radio-wrapper>\r\n          <input type=\"radio\" clrRadio [value]=\"true\" [(ngModel)]=\"cancelAll\" name=\"options\" (ngModelChange)=\"radioChanged()\" />\r\n          <label>{{ 'order.cancel-entire-order' | translate }}</label>\r\n        </clr-radio-wrapper>\r\n        <clr-radio-wrapper>\r\n          <input type=\"radio\" clrRadio [value]=\"false\" [(ngModel)]=\"cancelAll\" name=\"options\" (ngModelChange)=\"radioChanged()\" />\r\n          <label>{{ 'order.cancel-specified-items' | translate }}</label>\r\n        </clr-radio-wrapper>\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-left: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"] }]
+            args: [{ selector: 'vdr-cancel-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, 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-left: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"] }]
         }], ctorParameters: function () { return [{ type: i1.I18nService }]; } });
 class FulfillOrderDialogComponent {
@@ -173,7 +177,7 @@ class FulfillOrderDialogComponent {
     }
 }
 FulfillOrderDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FulfillOrderDialogComponent, deps: [{ token: i1.DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FulfillOrderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", 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}.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-left: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"], components: [{ type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable"], outputs: ["remove"] }], directives: [{ type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i4.TranslatePipe, "assetPreview": i1.AssetPreviewPipe, "localeCurrency": i1.LocaleCurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FulfillOrderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", 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}.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-left: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"], components: [{ type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position"], outputs: ["remove"] }], directives: [{ type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i4.TranslatePipe, "assetPreview": i1.AssetPreviewPipe, "localeCurrency": i1.LocaleCurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FulfillOrderDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-fulfill-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, 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}.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-left: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"] }]
@@ -466,8 +470,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
             }] } });
 class OrderCustomFieldsCardComponent {
-    constructor(formBuilder) {
+    constructor(formBuilder, modalService) {
         this.formBuilder = formBuilder;
+        this.modalService = modalService;
         this.customFieldsConfig = [];
         this.customFieldValues = {};
         this.updateClick = new EventEmitter();
@@ -484,13 +489,35 @@ class OrderCustomFieldsCardComponent {
         this.customFieldForm.markAsPristine();
         this.editable = false;
     }
+    onCancelClick() {
+        if (this.customFieldForm.dirty) {
+            this.modalService
+                .dialog({
+                title: marker('catalog.confirm-cancel'),
+                buttons: [
+                    { type: 'secondary', label: marker('common.keep-editing') },
+                    { type: 'danger', label: marker('common.discard-changes'), returnValue: true },
+                ],
+            })
+                .subscribe(result => {
+                if (result) {
+                    this.customFieldForm.reset();
+                    this.customFieldForm.markAsPristine();
+                    this.editable = false;
+                }
+            });
+        }
+        else {
+            this.editable = false;
+        }
+    }
 }
-OrderCustomFieldsCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OrderCustomFieldsCardComponent, deps: [{ token: i3$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-OrderCustomFieldsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", 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            <ng-container *ngFor=\"let customField of customFieldsConfig\">\r\n                <vdr-custom-field-control\r\n                    entityName=\"Order\"\r\n                    [customFieldsFormGroup]=\"customFieldForm\"\r\n                    [compact]=\"true\"\r\n                    [readonly]=\"customField.readonly || !editable\"\r\n                    [customField]=\"customField\"\r\n                ></vdr-custom-field-control>\r\n            </ng-container>\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    </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"], components: [{ type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OrderCustomFieldsCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OrderCustomFieldsCardComponent, deps: [{ token: i3$1.FormBuilder }, { token: i1.ModalService }], target: i0.ɵɵFactoryTarget.Component });
+OrderCustomFieldsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", 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"], components: [{ type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OrderCustomFieldsCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-custom-fields-card', changeDetection: ChangeDetectionStrategy.OnPush, 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            <ng-container *ngFor=\"let customField of customFieldsConfig\">\r\n                <vdr-custom-field-control\r\n                    entityName=\"Order\"\r\n                    [customFieldsFormGroup]=\"customFieldForm\"\r\n                    [compact]=\"true\"\r\n                    [readonly]=\"customField.readonly || !editable\"\r\n                    [customField]=\"customField\"\r\n                ></vdr-custom-field-control>\r\n            </ng-container>\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    </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"] }]
-        }], ctorParameters: function () { return [{ type: i3$1.FormBuilder }]; }, propDecorators: { customFieldsConfig: [{
+            args: [{ selector: 'vdr-order-custom-fields-card', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], ctorParameters: function () { return [{ type: i3$1.FormBuilder }, { type: i1.ModalService }]; }, propDecorators: { customFieldsConfig: [{
                 type: Input
             }], customFieldValues: [{
                 type: Input
@@ -686,11 +713,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
 class RefundOrderDialogComponent {
     constructor(i18nService) {
+        var _a;
         this.i18nService = i18nService;
         this.lineQuantities = {};
         this.refundShipping = false;
         this.adjustment = 0;
-        this.reasons = [marker('order.refund-reason-customer-request'), marker('order.refund-reason-not-available')];
+        this.reasons = (_a = getAppConfig().cancellationReasons) !== null && _a !== void 0 ? _a : [
+            marker('order.refund-reason-customer-request'),
+            marker('order.refund-reason-not-available'),
+        ];
         this.reasons = this.reasons.map(r => this.i18nService.translate(r));
     }
     get refundTotal() {
@@ -803,10 +834,10 @@ class RefundOrderDialogComponent {
     }
 }
 RefundOrderDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RefundOrderDialogComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component });
-RefundOrderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", 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 fulfil\">\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 mt4\">\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)}.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}.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-left:12px}\n"], components: [{ type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }, { 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"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: i2.ClrSelectContainer, selector: "clr-select-container" }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i2.ClrInputContainer, selector: "clr-input-container" }, { type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }], directives: [{ type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.ClrSelect, selector: "[clrSelect]" }, { type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ClrInput, selector: "[clrInput]" }, { type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i4.TranslatePipe, "assetPreview": i1.AssetPreviewPipe, "localeCurrency": i1.LocaleCurrencyPipe, "currency": i4$1.CurrencyPipe, "number": i4$1.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RefundOrderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", 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 mt4\" [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-left:12px}\n"], components: [{ type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }, { 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"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: i2.ClrSelectContainer, selector: "clr-select-container" }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i2.ClrInputContainer, selector: "clr-input-container" }, { type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }], directives: [{ type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.ClrSelect, selector: "[clrSelect]" }, { type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ClrInput, selector: "[clrInput]" }, { type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i4.TranslatePipe, "assetPreview": i1.AssetPreviewPipe, "localeCurrency": i1.LocaleCurrencyPipe, "currency": i4$1.CurrencyPipe, "number": i4$1.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", 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 fulfil\">\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 mt4\">\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)}.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}.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-left: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    <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 mt4\" [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-left:12px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.I18nService }]; } });
 class SettleRefundDialogComponent {
@@ -1004,12 +1035,20 @@ class OrderTableComponent {
             return promotion.couponCode || undefined;
         }
     }
+    getShippingNames(order) {
+        if (order.shippingLines.length) {
+            return order.shippingLines.map(shippingLine => shippingLine.shippingMethod.name).join(', ');
+        }
+        else {
+            return '';
+        }
+    }
 }
 OrderTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OrderTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OrderTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: OrderTableComponent, selector: "vdr-order-table", inputs: { order: "order", orderLineCustomFields: "orderLineCustomFields" }, ngImport: i0, template: "<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>{{ 'order.total' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <ng-container *ngFor=\"let line of order.lines\">\r\n            <tr class=\"order-line\" [class.is-cancelled]=\"line.quantity === 0\">\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 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                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                    <vdr-line-fulfillment [line]=\"line\" [orderState]=\"order.state\"></vdr-line-fulfillment>\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\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                </td>\r\n            </tr>\r\n            <ng-container *ngIf=\"customFieldsForLine[line.id] as customFields\">\r\n                <tr *ngIf=\"customFields.length\">\r\n                    <td colspan=\"6\" class=\"custom-fields-row\">\r\n                        <div class=\"order-line-custom-fields\">\r\n                            <div class=\"custom-field\" *ngFor=\"let field of customFields\">\r\n                                <vdr-custom-field-control\r\n                                    [compact]=\"true\"\r\n                                    [readonly]=\"true\"\r\n                                    [customField]=\"field.config\"\r\n                                    [customFieldsFormGroup]=\"field.formGroup\"\r\n                                ></vdr-custom-field-control>\r\n                            </div>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\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\" colspan=\"2\"></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        <ng-container *ngFor=\"let discount of order.discounts\">\r\n            <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\r\n            <td colspan=\"5\" class=\"left clr-align-middle\">\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=\"clr-align-middle\">\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            </tr>\r\n        </ng-container>\r\n        <tr class=\"sub-total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.sub-total' | translate }}</td>\r\n            <td colspan=\"4\"></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        </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\">{{ order.shippingLines[0]?.shippingMethod?.name }}</td>\r\n            <td colspan=\"3\"></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        <tr class=\"total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.total' | translate }}</td>\r\n            <td colspan=\"4\"></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        </tr>\r\n    </tbody>\r\n</table>\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 .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-right:18px}.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)}.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}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-left:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"], components: [{ type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "orderState"] }, { type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }, { type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "translate": i4.TranslatePipe, "assetPreview": i1.AssetPreviewPipe, "localeCurrency": i1.LocaleCurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OrderTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: OrderTableComponent, selector: "vdr-order-table", inputs: { order: "order", orderLineCustomFields: "orderLineCustomFields" }, ngImport: i0, template: "<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>{{ 'order.total' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <ng-container *ngFor=\"let line of order.lines\">\r\n            <tr class=\"order-line\" [class.is-cancelled]=\"line.quantity === 0\">\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 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                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                    <vdr-line-fulfillment [line]=\"line\" [orderState]=\"order.state\"></vdr-line-fulfillment>\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\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                </td>\r\n            </tr>\r\n            <ng-container *ngIf=\"customFieldsForLine[line.id] as customFields\">\r\n                <tr *ngIf=\"customFields.length\">\r\n                    <td colspan=\"6\" class=\"custom-fields-row\">\r\n                        <div class=\"order-line-custom-fields\">\r\n                            <div class=\"custom-field\" *ngFor=\"let field of customFields\">\r\n                                <vdr-custom-field-control\r\n                                    [compact]=\"true\"\r\n                                    [readonly]=\"true\"\r\n                                    [customField]=\"field.config\"\r\n                                    [customFieldsFormGroup]=\"field.formGroup\"\r\n                                ></vdr-custom-field-control>\r\n                            </div>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\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\" colspan=\"2\"></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        <ng-container *ngFor=\"let discount of order.discounts\">\r\n            <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\r\n            <td colspan=\"5\" class=\"left clr-align-middle\">\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=\"clr-align-middle\">\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            </tr>\r\n        </ng-container>\r\n        <tr class=\"sub-total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.sub-total' | translate }}</td>\r\n            <td colspan=\"4\"></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        </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\">{{ getShippingNames(order) }}</td>\r\n            <td colspan=\"3\"></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        <tr class=\"total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.total' | translate }}</td>\r\n            <td colspan=\"4\"></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        </tr>\r\n    </tbody>\r\n</table>\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 .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-right:18px}.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)}.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}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-left:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"], components: [{ type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "orderState"] }, { type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }, { type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "translate": i4.TranslatePipe, "assetPreview": i1.AssetPreviewPipe, "localeCurrency": i1.LocaleCurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OrderTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<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>{{ 'order.total' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <ng-container *ngFor=\"let line of order.lines\">\r\n            <tr class=\"order-line\" [class.is-cancelled]=\"line.quantity === 0\">\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 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                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                    <vdr-line-fulfillment [line]=\"line\" [orderState]=\"order.state\"></vdr-line-fulfillment>\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\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                </td>\r\n            </tr>\r\n            <ng-container *ngIf=\"customFieldsForLine[line.id] as customFields\">\r\n                <tr *ngIf=\"customFields.length\">\r\n                    <td colspan=\"6\" class=\"custom-fields-row\">\r\n                        <div class=\"order-line-custom-fields\">\r\n                            <div class=\"custom-field\" *ngFor=\"let field of customFields\">\r\n                                <vdr-custom-field-control\r\n                                    [compact]=\"true\"\r\n                                    [readonly]=\"true\"\r\n                                    [customField]=\"field.config\"\r\n                                    [customFieldsFormGroup]=\"field.formGroup\"\r\n                                ></vdr-custom-field-control>\r\n                            </div>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\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\" colspan=\"2\"></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        <ng-container *ngFor=\"let discount of order.discounts\">\r\n            <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\r\n            <td colspan=\"5\" class=\"left clr-align-middle\">\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=\"clr-align-middle\">\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            </tr>\r\n        </ng-container>\r\n        <tr class=\"sub-total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.sub-total' | translate }}</td>\r\n            <td colspan=\"4\"></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        </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\">{{ order.shippingLines[0]?.shippingMethod?.name }}</td>\r\n            <td colspan=\"3\"></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        <tr class=\"total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.total' | translate }}</td>\r\n            <td colspan=\"4\"></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        </tr>\r\n    </tbody>\r\n</table>\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 .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-right:18px}.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)}.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}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-left: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: "<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>{{ 'order.total' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <ng-container *ngFor=\"let line of order.lines\">\r\n            <tr class=\"order-line\" [class.is-cancelled]=\"line.quantity === 0\">\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 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                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                    <vdr-line-fulfillment [line]=\"line\" [orderState]=\"order.state\"></vdr-line-fulfillment>\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\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                </td>\r\n            </tr>\r\n            <ng-container *ngIf=\"customFieldsForLine[line.id] as customFields\">\r\n                <tr *ngIf=\"customFields.length\">\r\n                    <td colspan=\"6\" class=\"custom-fields-row\">\r\n                        <div class=\"order-line-custom-fields\">\r\n                            <div class=\"custom-field\" *ngFor=\"let field of customFields\">\r\n                                <vdr-custom-field-control\r\n                                    [compact]=\"true\"\r\n                                    [readonly]=\"true\"\r\n                                    [customField]=\"field.config\"\r\n                                    [customFieldsFormGroup]=\"field.formGroup\"\r\n                                ></vdr-custom-field-control>\r\n                            </div>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\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\" colspan=\"2\"></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        <ng-container *ngFor=\"let discount of order.discounts\">\r\n            <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\r\n            <td colspan=\"5\" class=\"left clr-align-middle\">\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=\"clr-align-middle\">\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            </tr>\r\n        </ng-container>\r\n        <tr class=\"sub-total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.sub-total' | translate }}</td>\r\n            <td colspan=\"4\"></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        </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\">{{ getShippingNames(order) }}</td>\r\n            <td colspan=\"3\"></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        <tr class=\"total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.total' | translate }}</td>\r\n            <td colspan=\"4\"></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        </tr>\r\n    </tbody>\r\n</table>\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 .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-right:18px}.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)}.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}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-left:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"] }]
         }], propDecorators: { order: [{
                 type: Input
             }], orderLineCustomFields: [{
@@ -1675,26 +1714,43 @@ class OrderDetailComponent extends BaseDetailComponent {
             if (!input) {
                 return of(undefined);
             }
-            const operations = [];
+            if ((_a = input.cancel.lines) === null || _a === void 0 ? void 0 : _a.length) {
+                return this.dataService.order.cancelOrder(input.cancel).pipe(map(res => {
+                    const result = res.cancelOrder;
+                    switch (result.__typename) {
+                        case 'Order':
+                            this.refetchOrder(result).subscribe();
+                            this.notificationService.success(marker('order.cancelled-order-success'));
+                            return input;
+                        case 'CancelActiveOrderError':
+                        case 'QuantityTooGreatError':
+                        case 'MultipleOrderError':
+                        case 'OrderStateTransitionError':
+                        case 'EmptyOrderLineSelectionError':
+                            this.notificationService.error(result.message);
+                            return undefined;
+                    }
+                }));
+            }
+            else {
+                return [input];
+            }
+        }), switchMap(input => {
+            if (!input) {
+                return of(undefined);
+            }
             if (input.refund.lines.length) {
-                operations.push(this.dataService.order
+                return this.dataService.order
                     .refundOrder(input.refund)
-                    .pipe(map(res => res.refundOrder)));
+                    .pipe(map(res => res.refundOrder));
             }
-            if ((_a = input.cancel.lines) === null || _a === void 0 ? void 0 : _a.length) {
-                operations.push(this.dataService.order
-                    .cancelOrder(input.cancel)
-                    .pipe(map(res => res.cancelOrder)));
+            else {
+                return [undefined];
             }
-            return merge(...operations);
         }))
             .subscribe(result => {
             if (result) {
                 switch (result.__typename) {
-                    case 'Order':
-                        this.refetchOrder(result).subscribe();
-                        this.notificationService.success(marker('order.cancelled-order-success'));
-                        break;
                     case 'Refund':
                         this.refetchOrder(result).subscribe();
                         if (result.state === 'Failed') {
@@ -1704,11 +1760,6 @@ class OrderDetailComponent extends BaseDetailComponent {
                             this.notificationService.success(marker('order.refund-order-success'));
                         }
                         break;
-                    case 'QuantityTooGreatError':
-                    case 'MultipleOrderError':
-                    case 'OrderStateTransitionError':
-                    case 'CancelActiveOrderError':
-                    case 'EmptyOrderLineSelectionError':
                     case 'AlreadyRefundedError':
                     case 'NothingToRefundError':
                     case 'PaymentOrderMismatchError':
@@ -1795,7 +1846,9 @@ class OrderEditorComponent extends BaseDetailComponent {
         this.notificationService = notificationService;
         this.modalService = modalService;
         this.orderTransitionService = orderTransitionService;
+        this.couponCodeInput$ = new Subject();
         this.detailForm = new FormGroup({});
+        this.couponCodesControl = new FormControl();
         this.modifyOrderInput = {
             dryRun: true,
             orderId: '',
@@ -1828,6 +1881,9 @@ class OrderEditorComponent extends BaseDetailComponent {
         this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
         this.entity$.pipe(takeUntil(this.destroy$)).subscribe(order => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+            if (order.couponCodes.length) {
+                this.couponCodesControl.setValue(order.couponCodes);
+            }
             this.surchargeForm = new FormGroup({
                 description: new FormControl('', Validators.required),
                 sku: new FormControl(''),
@@ -1886,6 +1942,11 @@ class OrderEditorComponent extends BaseDetailComponent {
                 this.orderLineCustomFieldsFormArray.push(formGroup);
             }
         });
+        this.availableCouponCodes$ = concat(this.couponCodeInput$.pipe(distinctUntilChanged(), switchMap(term => this.dataService.promotion.getPromotions(10, 0, {
+            couponCode: { contains: term },
+        }).single$), map(({ promotions }) =>
+        // tslint:disable-next-line:no-non-null-assertion
+        promotions.items.map(p => ({ code: p.couponCode, promotionName: p.name }))), startWith([])));
         this.addItemCustomFieldsFormArray = new FormArray([]);
         this.addItemCustomFieldsForm = new FormGroup({});
         for (const customField of this.orderLineCustomFields) {
@@ -1923,7 +1984,8 @@ class OrderEditorComponent extends BaseDetailComponent {
             !!(surcharges === null || surcharges === void 0 ? void 0 : surcharges.length) ||
             !!(adjustOrderLines === null || adjustOrderLines === void 0 ? void 0 : adjustOrderLines.length) ||
             (this.shippingAddressForm.dirty && this.shippingAddressForm.valid) ||
-            (this.billingAddressForm.dirty && this.billingAddressForm.valid));
+            (this.billingAddressForm.dirty && this.billingAddressForm.valid) ||
+            this.couponCodesControl.dirty);
     }
     isLineModified(line) {
         var _a;
@@ -2035,7 +2097,7 @@ class OrderEditorComponent extends BaseDetailComponent {
         var _a;
         const input = Object.assign(Object.assign(Object.assign(Object.assign({}, this.modifyOrderInput), (this.billingAddressForm.dirty ? { updateBillingAddress: this.billingAddressForm.value } : {})), (this.shippingAddressForm.dirty
             ? { updateShippingAddress: this.shippingAddressForm.value }
-            : {})), { dryRun: true, note: (_a = this.note) !== null && _a !== void 0 ? _a : '', options: {
+            : {})), { dryRun: true, couponCodes: this.couponCodesControl.dirty ? this.couponCodesControl.value : undefined, note: (_a = this.note) !== null && _a !== void 0 ? _a : '', options: {
                 recalculateShipping: this.recalculateShipping,
             } });
         const originalTotalWithTax = order.totalWithTax;
@@ -2060,7 +2122,10 @@ class OrderEditorComponent extends BaseDetailComponent {
                 case 'OrderLimitError':
                 case 'OrderModificationStateError':
                 case 'PaymentMethodMissingError':
-                case 'RefundPaymentIdMissingError': {
+                case 'RefundPaymentIdMissingError':
+                case 'CouponCodeLimitError':
+                case 'CouponCodeExpiredError':
+                case 'CouponCodeInvalidError': {
                     this.notificationService.error(modifyOrder.message);
                     return of(false);
                 }
@@ -2122,10 +2187,10 @@ class OrderEditorComponent extends BaseDetailComponent {
     }
 }
 OrderEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OrderEditorComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i1.ServerConfigService }, { token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: OrderTransitionService }], target: i0.ɵɵFactoryTarget.Component });
-OrderEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: OrderEditorComponent, selector: "vdr-order-editor", usesInheritance: true, ngImport: i0, template: "<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-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\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\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\">{{ 'common.custom-fields' | translate }}</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 [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                            <vdr-line-fulfillment\r\n                                [line]=\"line\"\r\n                                [orderState]=\"order.state\"\r\n                            ></vdr-line-fulfillment>\r\n                        </td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n                            <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                                <vdr-custom-field-control\r\n                                    [customField]=\"customField\"\r\n                                    [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.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                            {{ 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=\"let addedLine of addedLines; trackBy: trackByProductVariantId; let i = index\"\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 *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\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\">{{ order.shippingLines[0]?.shippingMethod?.name }}</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=\"mb2\">{{ '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-selector class=\"mb4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n                        </vdr-product-selector>\r\n                        <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb4\">\r\n                            <img\r\n                                *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n                                [src]=\"asset | assetPreview: 'tiny'\"\r\n                                class=\"mr4\"\r\n                            />\r\n                            <div>\r\n                                <strong class=\"mr4\">{{ 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                        <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\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\" /></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                            <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>{{ 'order.edit-shipping-address' | translate }}</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>{{ 'order.edit-billing-address' | translate }}</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", 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 .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-right:18px}.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)}.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 tr.modified td{background-color:var(--color-warning-100)}\n"], components: [{ type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "orderState"] }, { type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { type: i2.ClrAccordion, selector: "clr-accordion", inputs: ["clrAccordionMultiPanel"] }, { type: i2.ClrAccordionPanel, selector: "clr-accordion-panel", inputs: ["clrAccordionPanelDisabled", "clrAccordionPanelOpen"], outputs: ["clrAccordionPanelOpenChange"] }, { type: i2.ClrAccordionTitle, selector: "clr-accordion-title, clr-step-title" }, { type: i2.ClrAccordionContent, selector: "clr-accordion-content, clr-step-content" }, { type: i1.ProductSelectorComponent, selector: "vdr-product-selector", outputs: ["productSelected"] }, { type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { type: i1.AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i2.ÇlrAccordionWillyWonka, selector: "clr-accordion" }, { type: i2.ÇlrAccordionOompaLoompa, selector: "clr-accordion-panel" }, { type: i2.ÇlrDatagridDetailRegisterer, selector: "[clrIfExpanded]" }, { type: i2.ClrIfExpanded, selector: "[clrIfExpanded]", inputs: ["clrIfExpanded"], outputs: ["clrIfExpandedChange"] }, { type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i2.ClrTextarea, selector: "[clrTextarea]" }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i4.TranslatePipe, "assetPreview": i1.AssetPreviewPipe, "localeCurrency": i1.LocaleCurrencyPipe, "currency": i4$1.CurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OrderEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: OrderEditorComponent, selector: "vdr-order-editor", usesInheritance: true, ngImport: i0, template: "<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-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\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\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\">{{ 'common.custom-fields' | translate }}</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 [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                            <vdr-line-fulfillment\r\n                                [line]=\"line\"\r\n                                [orderState]=\"order.state\"\r\n                            ></vdr-line-fulfillment>\r\n                        </td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n                            <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                                <vdr-custom-field-control\r\n                                    [customField]=\"customField\"\r\n                                    [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.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                            {{ 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=\"let addedLine of addedLines; trackBy: trackByProductVariantId; let i = index\"\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 *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\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\">{{ order.shippingLines[0]?.shippingMethod?.name }}</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=\"mb2\">{{ '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 class=\"mb4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n                        </vdr-product-variant-selector>\r\n                        <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb4\">\r\n                            <img\r\n                                *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n                                [src]=\"asset | assetPreview: 'tiny'\"\r\n                                class=\"mr4\"\r\n                            />\r\n                            <div>\r\n                                <strong class=\"mr4\">{{ 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                        <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                        <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]=\"couponCodesControl\"\r\n                        >\r\n                            <ng-template ng-option-tmp let-item=\"item\">\r\n                                <vdr-chip>{{ item.code }}</vdr-chip> {{ item.promotionName }}\r\n                            </ng-template>\r\n                        </ng-select>\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\" /></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                            <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>{{ 'order.edit-shipping-address' | translate }}</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>{{ 'order.edit-billing-address' | translate }}</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", 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 .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-right:18px}.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)}.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 tr.modified td{background-color:var(--color-warning-100)}\n"], components: [{ type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "orderState"] }, { type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { type: i2.ClrAccordion, selector: "clr-accordion", inputs: ["clrAccordionMultiPanel"] }, { type: i2.ClrAccordionPanel, selector: "clr-accordion-panel", inputs: ["clrAccordionPanelDisabled", "clrAccordionPanelOpen"], outputs: ["clrAccordionPanelOpenChange"] }, { type: i2.ClrAccordionTitle, selector: "clr-accordion-title, clr-step-title" }, { type: i2.ClrAccordionContent, selector: "clr-accordion-content, clr-step-content" }, { type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { 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"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { type: i1.AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i2.ÇlrAccordionWillyWonka, selector: "clr-accordion" }, { type: i2.ÇlrAccordionOompaLoompa, selector: "clr-accordion-panel" }, { type: i2.ÇlrDatagridDetailRegisterer, selector: "[clrIfExpanded]" }, { type: i2.ClrIfExpanded, selector: "[clrIfExpanded]", inputs: ["clrIfExpanded"], outputs: ["clrIfExpandedChange"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i2.ClrTextarea, selector: "[clrTextarea]" }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i4.TranslatePipe, "assetPreview": i1.AssetPreviewPipe, "localeCurrency": i1.LocaleCurrencyPipe, "currency": i4$1.CurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OrderEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<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-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\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\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\">{{ 'common.custom-fields' | translate }}</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 [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                            <vdr-line-fulfillment\r\n                                [line]=\"line\"\r\n                                [orderState]=\"order.state\"\r\n                            ></vdr-line-fulfillment>\r\n                        </td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n                            <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                                <vdr-custom-field-control\r\n                                    [customField]=\"customField\"\r\n                                    [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.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                            {{ 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=\"let addedLine of addedLines; trackBy: trackByProductVariantId; let i = index\"\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 *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\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\">{{ order.shippingLines[0]?.shippingMethod?.name }}</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=\"mb2\">{{ '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-selector class=\"mb4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n                        </vdr-product-selector>\r\n                        <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb4\">\r\n                            <img\r\n                                *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n                                [src]=\"asset | assetPreview: 'tiny'\"\r\n                                class=\"mr4\"\r\n                            />\r\n                            <div>\r\n                                <strong class=\"mr4\">{{ 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                        <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\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\" /></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                            <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>{{ 'order.edit-shipping-address' | translate }}</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>{{ 'order.edit-billing-address' | translate }}</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", 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 .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-right:18px}.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)}.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 tr.modified td{background-color:var(--color-warning-100)}\n"] }]
+            args: [{ selector: 'vdr-order-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<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-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\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\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\">{{ 'common.custom-fields' | translate }}</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 [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                            <vdr-line-fulfillment\r\n                                [line]=\"line\"\r\n                                [orderState]=\"order.state\"\r\n                            ></vdr-line-fulfillment>\r\n                        </td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n                            <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                                <vdr-custom-field-control\r\n                                    [customField]=\"customField\"\r\n                                    [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.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                            {{ 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=\"let addedLine of addedLines; trackBy: trackByProductVariantId; let i = index\"\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 *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\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\">{{ order.shippingLines[0]?.shippingMethod?.name }}</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=\"mb2\">{{ '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 class=\"mb4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n                        </vdr-product-variant-selector>\r\n                        <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb4\">\r\n                            <img\r\n                                *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n                                [src]=\"asset | assetPreview: 'tiny'\"\r\n                                class=\"mr4\"\r\n                            />\r\n                            <div>\r\n                                <strong class=\"mr4\">{{ 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                        <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                        <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]=\"couponCodesControl\"\r\n                        >\r\n                            <ng-template ng-option-tmp let-item=\"item\">\r\n                                <vdr-chip>{{ item.code }}</vdr-chip> {{ item.promotionName }}\r\n                            </ng-template>\r\n                        </ng-select>\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\" /></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                            <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>{{ 'order.edit-shipping-address' | translate }}</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>{{ 'order.edit-billing-address' | translate }}</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", 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 .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-right:18px}.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)}.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 tr.modified td{background-color:var(--color-warning-100)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i1.ServerConfigService }, { type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i1.NotificationService }, { type: i1.ModalService }, { type: OrderTransitionService }]; } });
 class OrderListComponent extends BaseListComponent {
@@ -2134,6 +2199,7 @@ class OrderListComponent extends BaseListComponent {
         this.serverConfigService = serverConfigService;
         this.dataService = dataService;
         this.localStorageService = localStorageService;
+        this.searchControl = new FormControl('');
         this.searchOrderCodeControl = new FormControl('');
         this.searchLastNameControl = new FormControl('');
         this.orderStates = this.serverConfigService.getOrderProcessStates().map(item => item.name);
@@ -2174,7 +2240,7 @@ class OrderListComponent extends BaseListComponent {
         // tslint:disable-next-line:no-shadowed-variable
         (take, skip) => this.dataService.order.getOrders({ take, skip }).refetchOnChannelChange(), data => data.orders,
         // tslint:disable-next-line:no-shadowed-variable
-        (skip, take) => this.createQueryOptions(skip, take, this.searchOrderCodeControl.value, this.searchLastNameControl.value, this.route.snapshot.queryParamMap.get('filter') || 'open'));
+        (skip, take) => this.createQueryOptions(skip, take, this.searchControl.value, this.route.snapshot.queryParamMap.get('filter') || 'open'));
         const lastFilters = this.localStorageService.get('orderListLastCustomFilters');
         if (lastFilters) {
             this.setQueryParam(lastFilters, { replaceUrl: true });
@@ -2184,7 +2250,7 @@ class OrderListComponent extends BaseListComponent {
         var _a;
         super.ngOnInit();
         this.activePreset$ = this.route.queryParamMap.pipe(map(qpm => qpm.get('filter') || 'open'), distinctUntilChanged());
-        const searchTerms$ = merge(this.searchOrderCodeControl.valueChanges, this.searchLastNameControl.valueChanges).pipe(filter(value => 2 < value.length || value.length === 0), debounceTime(250));
+        const searchTerms$ = merge(this.searchControl.valueChanges).pipe(filter(value => 2 < value.length || value.length === 0), debounceTime(250));
         merge(searchTerms$, this.route.queryParamMap)
             .pipe(takeUntil(this.destroy$))
             .subscribe(val => {
@@ -2217,11 +2283,12 @@ class OrderListComponent extends BaseListComponent {
     }
     createQueryOptions(
     // tslint:disable-next-line:no-shadowed-variable
-    skip, take, orderCodeSearchTerm, customerNameSearchTerm, activeFilterPreset) {
+    skip, take, searchTerm, activeFilterPreset) {
         var _a;
         const filterConfig = this.filterPresets.find(p => p.name === activeFilterPreset);
         // tslint:disable-next-line:no-shadowed-variable
-        const filter = {};
+        let filter = {};
+        let filterOperator = LogicalOperator.AND;
         if (filterConfig) {
             if (filterConfig.config.active != null) {
                 filter.active = {
@@ -2263,15 +2330,19 @@ class OrderListComponent extends BaseListComponent {
                 };
             }
         }
-        if (customerNameSearchTerm) {
-            filter.customerLastName = {
-                contains: customerNameSearchTerm,
-            };
-        }
-        if (orderCodeSearchTerm) {
-            filter.code = {
-                contains: orderCodeSearchTerm,
+        if (searchTerm) {
+            filter = {
+                customerLastName: {
+                    contains: searchTerm,
+                },
+                transactionId: {
+                    contains: searchTerm,
+                },
+                code: {
+                    contains: searchTerm,
+                },
             };
+            filterOperator = LogicalOperator.OR;
         }
         return {
             options: {
@@ -2281,6 +2352,7 @@ class OrderListComponent extends BaseListComponent {
                 sort: {
                     updatedAt: SortOrder.DESC,
                 },
+                filterOperator,
             },
         };
     }
@@ -2294,10 +2366,10 @@ class OrderListComponent extends BaseListComponent {
     }
 }
 OrderListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OrderListComponent, deps: [{ token: i1.ServerConfigService }, { token: i1.DataService }, { token: i1.LocalStorageService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-OrderListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: OrderListComponent, selector: "vdr-order-list", usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"search-form\">\r\n            <div class=\"btn-group btn-outline-primary\" *ngIf=\"activePreset$ | async as activePreset\">\r\n                <button\r\n                    class=\"btn\"\r\n                    *ngFor=\"let preset of filterPresets\"\r\n                    [class.btn-primary]=\"activePreset === preset.name\"\r\n                    (click)=\"selectFilterPreset(preset.name)\"\r\n                >\r\n                    {{ preset.label | translate }}\r\n                </button>\r\n                <button\r\n                    class=\"btn\"\r\n                    [class.btn-primary]=\"activePreset === 'custom'\"\r\n                    (click)=\"selectFilterPreset('custom')\"\r\n                >\r\n                    {{ 'order.filter-custom' | translate }}\r\n                    <clr-icon shape=\"angle down\"></clr-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"searchOrderCodeControl\"\r\n                [placeholder]=\"'order.search-by-order-code' | translate\"\r\n                class=\"search-input\"\r\n            />\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"searchLastNameControl\"\r\n                [placeholder]=\"'order.search-by-customer-last-name' | translate\"\r\n                class=\"search-input\"\r\n            />\r\n        </div>\r\n        <div class=\"custom-filters\" [class.expanded]=\"(activePreset$ | async) === 'custom'\">\r\n            <form [formGroup]=\"customFilterForm\">\r\n                <div class=\"flex align-center\">\r\n                    <ng-select\r\n                        [items]=\"orderStates\"\r\n                        appendTo=\"body\"\r\n                        [addTag]=\"false\"\r\n                        [multiple]=\"true\"\r\n                        formControlName=\"states\"\r\n                        [placeholder]=\"'state.all-orders' | translate\"\r\n                        [clearable]=\"true\"\r\n                        [searchable]=\"false\"\r\n                    >\r\n                        <ng-template ng-option-tmp let-item=\"item\">{{ item | stateI18nToken | translate }}</ng-template>\r\n                        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                            <span class=\"ng-value-label\"> {{ item | stateI18nToken | translate }}</span>\r\n                            <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\u00D7</span>\r\n                        </ng-template>\r\n                    </ng-select>\r\n                    <button\r\n                        class=\"btn btn-secondary\"\r\n                        [disabled]=\"customFilterForm.pristine\"\r\n                        (click)=\"applyCustomFilters()\"\r\n                    >\r\n                        {{ 'order.apply-filters' | translate }}\r\n                        <clr-icon shape=\"filter\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n                <div class=\"flex\">\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-start' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtStart\"></vdr-datetime-picker>\r\n                    </div>\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-end' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtEnd\"></vdr-datetime-picker>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"order-list\"></vdr-action-bar-items>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.customer' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.state' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.total' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.placed-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.shipping' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-order=\"item\">\r\n        <td class=\"left align-middle\">{{ order.code }}</td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n        </td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </td>\r\n        <td class=\"left align-middle\">{{ order.total | localeCurrency: order.currencyCode }}</td>\r\n        <td class=\"left align-middle\">{{ order.updatedAt | timeAgo }}</td>\r\n        <td class=\"left align-middle\">{{ order.orderPlacedAt | localeDate: 'medium' }}</td>\r\n        <td class=\"left align-middle\">{{ getShippingNames(order) }}</td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"shopping-cart\"\r\n                [label]=\"'common.open' | translate\"\r\n                [linkTo]=\"order.state === 'Modifying' ? ['./', order.id, 'modify'] : ['./', order.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".search-form{display:flex;flex-direction:column;align-items:baseline;width:100%;margin-bottom:6px}@media screen and (min-width: 768px){.search-form{flex-direction:row}}.search-input{margin-left:6px;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"], components: [{ type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { 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"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: i1.DatetimePickerComponent, selector: "vdr-datetime-picker", inputs: ["yearRange", "weekStartDay", "timeGranularityInterval", "min", "max", "readonly"] }, { type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1.DataTableComponent, selector: "vdr-data-table", inputs: ["items", "itemsPerPage", "currentPage", "totalItems", "allSelected", "isRowSelectedFn", "emptyStateLabel"], outputs: ["allSelectChange", "rowSelectChange", "pageChange", "itemsPerPageChange"] }, { type: i1.DataTableColumnComponent, selector: "vdr-dt-column", inputs: ["expand"] }, { type: i1.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { type: i1.TableRowActionComponent, selector: "vdr-table-row-action", inputs: ["linkTo", "label", "iconShape", "disabled"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i4.TranslatePipe, "stateI18nToken": i1.StateI18nTokenPipe, "localeCurrency": i1.LocaleCurrencyPipe, "timeAgo": i1.TimeAgoPipe, "localeDate": i1.LocaleDatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OrderListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: OrderListComponent, selector: "vdr-order-list", usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"search-form\">\r\n            <div class=\"btn-group btn-outline-primary\" *ngIf=\"activePreset$ | async as activePreset\">\r\n                <button\r\n                    class=\"btn\"\r\n                    *ngFor=\"let preset of filterPresets\"\r\n                    [class.btn-primary]=\"activePreset === preset.name\"\r\n                    (click)=\"selectFilterPreset(preset.name)\"\r\n                >\r\n                    {{ preset.label | translate }}\r\n                </button>\r\n                <button\r\n                    class=\"btn\"\r\n                    [class.btn-primary]=\"activePreset === 'custom'\"\r\n                    (click)=\"selectFilterPreset('custom')\"\r\n                >\r\n                    {{ 'order.filter-custom' | translate }}\r\n                    <clr-icon shape=\"angle down\"></clr-icon>\r\n                </button>\r\n            </div>\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"searchControl\"\r\n                [placeholder]=\"'order.search-by-order-filters' | translate\"\r\n                class=\"search-input\"\r\n            />\r\n        </div>\r\n        <div class=\"custom-filters\" [class.expanded]=\"(activePreset$ | async) === 'custom'\">\r\n            <form [formGroup]=\"customFilterForm\">\r\n                <div class=\"flex align-center\">\r\n                    <ng-select\r\n                        [items]=\"orderStates\"\r\n                        appendTo=\"body\"\r\n                        [addTag]=\"false\"\r\n                        [multiple]=\"true\"\r\n                        formControlName=\"states\"\r\n                        [placeholder]=\"'state.all-orders' | translate\"\r\n                        [clearable]=\"true\"\r\n                        [searchable]=\"false\"\r\n                    >\r\n                        <ng-template ng-option-tmp let-item=\"item\">{{ item | stateI18nToken | translate }}</ng-template>\r\n                        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                            <span class=\"ng-value-label\"> {{ item | stateI18nToken | translate }}</span>\r\n                            <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\u00D7</span>\r\n                        </ng-template>\r\n                    </ng-select>\r\n                    <button\r\n                        class=\"btn btn-secondary\"\r\n                        [disabled]=\"customFilterForm.pristine\"\r\n                        (click)=\"applyCustomFilters()\"\r\n                    >\r\n                        {{ 'order.apply-filters' | translate }}\r\n                        <clr-icon shape=\"filter\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n                <div class=\"flex\">\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-start' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtStart\"></vdr-datetime-picker>\r\n                    </div>\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-end' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtEnd\"></vdr-datetime-picker>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"order-list\"></vdr-action-bar-items>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.customer' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.state' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.total' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.placed-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.shipping' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-order=\"item\">\r\n        <td class=\"left align-middle\">{{ order.code }}</td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n        </td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </td>\r\n        <td class=\"left align-middle\">{{ order.totalWithTax | localeCurrency: order.currencyCode }}</td>\r\n        <td class=\"left align-middle\">{{ order.updatedAt | timeAgo }}</td>\r\n        <td class=\"left align-middle\">{{ order.orderPlacedAt | localeDate: 'medium' }}</td>\r\n        <td class=\"left align-middle\">{{ getShippingNames(order) }}</td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"shopping-cart\"\r\n                [label]=\"'common.open' | translate\"\r\n                [linkTo]=\"order.state === 'Modifying' ? ['./', order.id, 'modify'] : ['./', order.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".search-form{display:flex;flex-direction:column;align-items:baseline;width:100%;margin-bottom:6px}@media screen and (min-width: 768px){.search-form{flex-direction:row}}.search-input{margin-left:6px;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"], components: [{ type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { 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"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: i1.DatetimePickerComponent, selector: "vdr-datetime-picker", inputs: ["yearRange", "weekStartDay", "timeGranularityInterval", "min", "max", "readonly"] }, { type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1.DataTableComponent, selector: "vdr-data-table", inputs: ["items", "itemsPerPage", "currentPage", "totalItems", "allSelected", "isRowSelectedFn", "emptyStateLabel"], outputs: ["allSelectChange", "rowSelectChange", "pageChange", "itemsPerPageChange"] }, { type: i1.DataTableColumnComponent, selector: "vdr-dt-column", inputs: ["expand"] }, { type: i1.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { type: i1.TableRowActionComponent, selector: "vdr-table-row-action", inputs: ["linkTo", "label", "iconShape", "disabled"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i4.TranslatePipe, "stateI18nToken": i1.StateI18nTokenPipe, "localeCurrency": i1.LocaleCurrencyPipe, "timeAgo": i1.TimeAgoPipe, "localeDate": i1.LocaleDatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OrderListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"search-form\">\r\n            <div class=\"btn-group btn-outline-primary\" *ngIf=\"activePreset$ | async as activePreset\">\r\n                <button\r\n                    class=\"btn\"\r\n                    *ngFor=\"let preset of filterPresets\"\r\n                    [class.btn-primary]=\"activePreset === preset.name\"\r\n                    (click)=\"selectFilterPreset(preset.name)\"\r\n                >\r\n                    {{ preset.label | translate }}\r\n                </button>\r\n                <button\r\n                    class=\"btn\"\r\n                    [class.btn-primary]=\"activePreset === 'custom'\"\r\n                    (click)=\"selectFilterPreset('custom')\"\r\n                >\r\n                    {{ 'order.filter-custom' | translate }}\r\n                    <clr-icon shape=\"angle down\"></clr-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"searchOrderCodeControl\"\r\n                [placeholder]=\"'order.search-by-order-code' | translate\"\r\n                class=\"search-input\"\r\n            />\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"searchLastNameControl\"\r\n                [placeholder]=\"'order.search-by-customer-last-name' | translate\"\r\n                class=\"search-input\"\r\n            />\r\n        </div>\r\n        <div class=\"custom-filters\" [class.expanded]=\"(activePreset$ | async) === 'custom'\">\r\n            <form [formGroup]=\"customFilterForm\">\r\n                <div class=\"flex align-center\">\r\n                    <ng-select\r\n                        [items]=\"orderStates\"\r\n                        appendTo=\"body\"\r\n                        [addTag]=\"false\"\r\n                        [multiple]=\"true\"\r\n                        formControlName=\"states\"\r\n                        [placeholder]=\"'state.all-orders' | translate\"\r\n                        [clearable]=\"true\"\r\n                        [searchable]=\"false\"\r\n                    >\r\n                        <ng-template ng-option-tmp let-item=\"item\">{{ item | stateI18nToken | translate }}</ng-template>\r\n                        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                            <span class=\"ng-value-label\"> {{ item | stateI18nToken | translate }}</span>\r\n                            <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\u00D7</span>\r\n                        </ng-template>\r\n                    </ng-select>\r\n                    <button\r\n                        class=\"btn btn-secondary\"\r\n                        [disabled]=\"customFilterForm.pristine\"\r\n                        (click)=\"applyCustomFilters()\"\r\n                    >\r\n                        {{ 'order.apply-filters' | translate }}\r\n                        <clr-icon shape=\"filter\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n                <div class=\"flex\">\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-start' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtStart\"></vdr-datetime-picker>\r\n                    </div>\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-end' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtEnd\"></vdr-datetime-picker>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"order-list\"></vdr-action-bar-items>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.customer' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.state' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.total' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.placed-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.shipping' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-order=\"item\">\r\n        <td class=\"left align-middle\">{{ order.code }}</td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n        </td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </td>\r\n        <td class=\"left align-middle\">{{ order.total | localeCurrency: order.currencyCode }}</td>\r\n        <td class=\"left align-middle\">{{ order.updatedAt | timeAgo }}</td>\r\n        <td class=\"left align-middle\">{{ order.orderPlacedAt | localeDate: 'medium' }}</td>\r\n        <td class=\"left align-middle\">{{ getShippingNames(order) }}</td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"shopping-cart\"\r\n                [label]=\"'common.open' | translate\"\r\n                [linkTo]=\"order.state === 'Modifying' ? ['./', order.id, 'modify'] : ['./', order.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".search-form{display:flex;flex-direction:column;align-items:baseline;width:100%;margin-bottom:6px}@media screen and (min-width: 768px){.search-form{flex-direction:row}}.search-input{margin-left:6px;margin-top:6px;min-width:300px}.custom-filters{overflow:hidden;max-height:0;padding-bottom:6px}.custom-filters.expanded{max-height:initial}.custom-filters>form{display:flex;flex-direction:column;align-items:center}.custom-filters>form>div{width:100%}ng-select{flex:1;min-width:200px;height:36px}ng-select ::ng-deep .ng-select-container{height:36px}\n"] }]
+            args: [{ selector: 'vdr-order-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"search-form\">\r\n            <div class=\"btn-group btn-outline-primary\" *ngIf=\"activePreset$ | async as activePreset\">\r\n                <button\r\n                    class=\"btn\"\r\n                    *ngFor=\"let preset of filterPresets\"\r\n                    [class.btn-primary]=\"activePreset === preset.name\"\r\n                    (click)=\"selectFilterPreset(preset.name)\"\r\n                >\r\n                    {{ preset.label | translate }}\r\n                </button>\r\n                <button\r\n                    class=\"btn\"\r\n                    [class.btn-primary]=\"activePreset === 'custom'\"\r\n                    (click)=\"selectFilterPreset('custom')\"\r\n                >\r\n                    {{ 'order.filter-custom' | translate }}\r\n                    <clr-icon shape=\"angle down\"></clr-icon>\r\n                </button>\r\n            </div>\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"searchControl\"\r\n                [placeholder]=\"'order.search-by-order-filters' | translate\"\r\n                class=\"search-input\"\r\n            />\r\n        </div>\r\n        <div class=\"custom-filters\" [class.expanded]=\"(activePreset$ | async) === 'custom'\">\r\n            <form [formGroup]=\"customFilterForm\">\r\n                <div class=\"flex align-center\">\r\n                    <ng-select\r\n                        [items]=\"orderStates\"\r\n                        appendTo=\"body\"\r\n                        [addTag]=\"false\"\r\n                        [multiple]=\"true\"\r\n                        formControlName=\"states\"\r\n                        [placeholder]=\"'state.all-orders' | translate\"\r\n                        [clearable]=\"true\"\r\n                        [searchable]=\"false\"\r\n                    >\r\n                        <ng-template ng-option-tmp let-item=\"item\">{{ item | stateI18nToken | translate }}</ng-template>\r\n                        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                            <span class=\"ng-value-label\"> {{ item | stateI18nToken | translate }}</span>\r\n                            <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\u00D7</span>\r\n                        </ng-template>\r\n                    </ng-select>\r\n                    <button\r\n                        class=\"btn btn-secondary\"\r\n                        [disabled]=\"customFilterForm.pristine\"\r\n                        (click)=\"applyCustomFilters()\"\r\n                    >\r\n                        {{ 'order.apply-filters' | translate }}\r\n                        <clr-icon shape=\"filter\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n                <div class=\"flex\">\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-start' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtStart\"></vdr-datetime-picker>\r\n                    </div>\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-end' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtEnd\"></vdr-datetime-picker>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"order-list\"></vdr-action-bar-items>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.customer' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.state' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.total' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.placed-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.shipping' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-order=\"item\">\r\n        <td class=\"left align-middle\">{{ order.code }}</td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n        </td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </td>\r\n        <td class=\"left align-middle\">{{ order.totalWithTax | localeCurrency: order.currencyCode }}</td>\r\n        <td class=\"left align-middle\">{{ order.updatedAt | timeAgo }}</td>\r\n        <td class=\"left align-middle\">{{ order.orderPlacedAt | localeDate: 'medium' }}</td>\r\n        <td class=\"left align-middle\">{{ getShippingNames(order) }}</td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"shopping-cart\"\r\n                [label]=\"'common.open' | translate\"\r\n                [linkTo]=\"order.state === 'Modifying' ? ['./', order.id, 'modify'] : ['./', order.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".search-form{display:flex;flex-direction:column;align-items:baseline;width:100%;margin-bottom:6px}@media screen and (min-width: 768px){.search-form{flex-direction:row}}.search-input{margin-left:6px;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.DataService }, { type: i1.LocalStorageService }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }]; } });
 /**