@deenruv/admin-ui 1.0.0

package/fesm2022/deenruv-admin-ui-order.mjs

@@ -0,0 +1,3664 @@
+import * as i2 from '@angular/forms';
+import { FormControl, Validators, UntypedFormGroup, UntypedFormControl, FormGroup, UntypedFormArray } from '@angular/forms';
+import { summate, notNullOrUndefined, isObject, assertNever } from '@deenruv/common/lib/shared-utils';
+import * as i0 from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Output, Input, Injectable, ContentChildren, HostBinding, ViewChildren, ViewContainerRef, ViewChild, NgModule } from '@angular/core';
+import * as i1 from '@deenruv/admin-ui/core';
+import { GetAddManualPaymentMethodListDocument, getAppConfig, GetCouponCodeSelectorPromotionListDocument, GetCustomerAddressesDocument, SortOrder, HistoryEntryType, DataTable2ColumnComponent, DataTable2Component, AdjustmentType, TypedBaseDetailComponent, DeletionResult, configurableDefinitionToInstance, GlobalFlag, configurableOperationValueIsValid, toConfigurableOperationInput, ORDER_DETAIL_FRAGMENT, getCustomFieldsDefaults, SetOrderCustomerDocument, EditNoteDialogComponent, transformRelationCustomFieldInputs, TypedBaseListComponent, OrderType, getOrderStateTranslationToken, GetOrderListDocument, LogicalOperator, ADDRESS_FRAGMENT, PageComponent, detailComponentWithResolver, OrderDetailQueryDocument, SharedModule, PageService } from '@deenruv/admin-ui/core';
+import { gql } from 'apollo-angular';
+import * as i5 from '@ng-select/ng-select';
+import * as i2$1 from '@angular/common';
+import * as i4 from '@ngx-translate/core';
+import { marker } from '@biesbjerg/ngx-translate-extract-marker';
+import * as i3 from '@clr/angular';
+import { Subject, concat, of, EMPTY, combineLatest, BehaviorSubject, forkJoin } from 'rxjs';
+import { debounceTime, distinctUntilChanged, switchMap, map, startWith, tap, catchError, retryWhen, delay, take, mapTo, takeUntil, shareReplay } from 'rxjs/operators';
+import { pick } from '@deenruv/common/lib/pick';
+import * as i1$1 from '@angular/router';
+import { RouterModule, ROUTES } from '@angular/router';
+import * as i3$1 from '@angular/cdk/bidi';
+import * as i5$1 from 'ngx-pagination';
+import { DEFAULT_CHANNEL_CODE } from '@deenruv/common/lib/shared-constants';
+import { simpleDeepClone } from '@deenruv/common/lib/simple-deep-clone';
+
+function getRefundablePayments(payments) {
+    const settledPayments = (payments || []).filter(p => p.state === 'Settled');
+    return settledPayments.map((payment, index) => {
+        const refundableAmount = payment.amount -
+            summate(payment.refunds.filter(r => r.state !== 'Failed'), 'total');
+        return {
+            ...payment,
+            refundableAmount,
+            amountToRefundControl: new FormControl(0, {
+                nonNullable: true,
+                validators: [Validators.min(0), Validators.max(refundableAmount)],
+            }),
+            selected: index === 0,
+        };
+    });
+}
+
+const GET_PAYMENT_METHODS_FOR_MANUAL_ADD = gql `
+    query GetAddManualPaymentMethodList($options: PaymentMethodListOptions!) {
+        paymentMethods(options: $options) {
+            items {
+                id
+                createdAt
+                updatedAt
+                name
+                code
+                description
+                enabled
+            }
+            totalItems
+        }
+    }
+`;
+class AddManualPaymentDialogComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.form = new UntypedFormGroup({
+            method: new UntypedFormControl('', Validators.required),
+            transactionId: new UntypedFormControl('', Validators.required),
+        });
+    }
+    ngOnInit() {
+        this.paymentMethods$ = this.dataService
+            .query(GetAddManualPaymentMethodListDocument, {
+            options: {
+                take: 999,
+            },
+        })
+            .mapSingle(data => data.paymentMethods.items);
+    }
+    submit() {
+        const formValue = this.form.value;
+        this.resolveWith({
+            method: formValue.method,
+            transactionId: formValue.transactionId,
+        });
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddManualPaymentDialogComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AddManualPaymentDialogComponent, selector: "vdr-add-manual-payment-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.add-payment-to-order' | translate }}</ng-template>\n<form [formGroup]=\"form\">\n    <vdr-form-field [label]=\"'order.payment-method' | translate\" for=\"method\">\n        <ng-select\n            [items]=\"paymentMethods$ | async\"\n            bindLabel=\"code\"\n            appendTo=\"body\"\n            autofocus\n            bindValue=\"code\"\n            [addTag]=\"true\"\n            formControlName=\"method\"\n        ></ng-select>\n    </vdr-form-field>\n    <vdr-form-field [label]=\"'order.transaction-id' | translate\" for=\"transactionId\">\n        <input id=\"transactionId\" type=\"text\" formControlName=\"transactionId\" />\n    </vdr-form-field>\n</form>\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button type=\"submit\" (click)=\"submit()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || form.pristine\">\n        {{ 'order.add-payment' | translate }}  ({{ outstandingAmount | localeCurrency: currencyCode }})\n    </button>\n</ng-template>\n", styles: [".ng-select{min-width:100%}\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AddManualPaymentDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-add-manual-payment-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.add-payment-to-order' | translate }}</ng-template>\n<form [formGroup]=\"form\">\n    <vdr-form-field [label]=\"'order.payment-method' | translate\" for=\"method\">\n        <ng-select\n            [items]=\"paymentMethods$ | async\"\n            bindLabel=\"code\"\n            appendTo=\"body\"\n            autofocus\n            bindValue=\"code\"\n            [addTag]=\"true\"\n            formControlName=\"method\"\n        ></ng-select>\n    </vdr-form-field>\n    <vdr-form-field [label]=\"'order.transaction-id' | translate\" for=\"transactionId\">\n        <input id=\"transactionId\" type=\"text\" formControlName=\"transactionId\" />\n    </vdr-form-field>\n</form>\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button type=\"submit\" (click)=\"submit()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || form.pristine\">\n        {{ 'order.add-payment' | translate }}  ({{ outstandingAmount | localeCurrency: currencyCode }})\n    </button>\n</ng-template>\n", styles: [".ng-select{min-width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DataService }] });
+
+class CancelOrderDialogComponent {
+    get selectionCount() {
+        return Object.values(this.lineQuantities).reduce((sum, n) => sum + n, 0);
+    }
+    constructor(i18nService) {
+        this.i18nService = i18nService;
+        this.cancelAll = true;
+        this.lineQuantities = {};
+        this.reasons = getAppConfig().cancellationReasons ?? [
+            marker('order.cancel-reason-customer-request'),
+            marker('order.cancel-reason-not-available'),
+        ];
+        this.reasons = this.reasons.map(r => this.i18nService.translate(r));
+    }
+    ngOnInit() {
+        this.lineQuantities = this.order.lines.reduce((result, line) => ({ ...result, [line.id]: line.quantity }), {});
+    }
+    radioChanged() {
+        if (this.cancelAll) {
+            for (const line of this.order.lines) {
+                this.lineQuantities[line.id] = line.quantity;
+            }
+        }
+        else {
+            for (const line of this.order.lines) {
+                this.lineQuantities[line.id] = 0;
+            }
+        }
+    }
+    checkIfAllSelected() {
+        for (const [lineId, quantity] of Object.entries(this.lineQuantities)) {
+            const quantityInOrder = this.order.lines.find(line => line.id === lineId)?.quantity;
+            if (quantityInOrder && quantity < quantityInOrder) {
+                return;
+            }
+        }
+        // If we got here, all of the selected quantities are equal to the order
+        // line quantities, i.e. everything is selected.
+        this.cancelAll = true;
+    }
+    select() {
+        this.resolveWith({
+            orderId: this.order.id,
+            lines: this.getLineInputs(),
+            reason: this.reason,
+            cancelShipping: this.cancelAll,
+        });
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    getLineInputs() {
+        if (this.order.active) {
+            return;
+        }
+        return Object.entries(this.lineQuantities)
+            .map(([orderLineId, quantity]) => ({
+            orderLineId,
+            quantity,
+        }))
+            .filter(l => 0 < l.quantity);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CancelOrderDialogComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CancelOrderDialogComponent, selector: "vdr-cancel-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.cancel-order' | translate }}</ng-template>\n\n<div class=\"fulfillment-wrapper\">\n    <div class=\"order-lines\">\n        <table class=\"table\">\n            <thead>\n                <tr>\n                    <th></th>\n                    <th>{{ 'order.product-name' | translate }}</th>\n                    <th>{{ 'order.product-sku' | translate }}</th>\n                    <th>{{ 'order.quantity' | translate }}</th>\n                    <th>{{ 'order.unit-price' | translate }}</th>\n                    <th>{{ 'order.cancel' | translate }}</th>\n                </tr>\n            </thead>\n            <tr\n                *ngFor=\"let line of order.lines\"\n                class=\"order-line\"\n                [class.is-disabled]=\"cancelAll\"\n                [class.is-cancelled]=\"line.quantity === 0\"\n            >\n                <td class=\"align-middle thumb\">\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\n                </td>\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\n                <td class=\"align-middle quantity\">{{ line.quantity }}</td>\n                <td class=\"align-middle quantity\">\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\n                </td>\n                <td class=\"align-middle fulfil\">\n                    <input\n                        *ngIf=\"line.quantity > 0 && !order.active; else nonEditable\"\n                        [(ngModel)]=\"lineQuantities[line.id]\"\n                        (input)=\"checkIfAllSelected()\"\n                        [disabled]=\"cancelAll\"\n                        type=\"number\"\n                        [max]=\"line.quantity\"\n                        min=\"0\"\n                    />\n                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>\n                </td>\n            </tr>\n        </table>\n    </div>\n    <div class=\"cancellation-details\">\n        <ng-container *ngIf=\"order.active !== true\">\n            <clr-radio-wrapper>\n                <input\n                    type=\"radio\"\n                    clrRadio\n                    [value]=\"true\"\n                    [(ngModel)]=\"cancelAll\"\n                    name=\"options\"\n                    (ngModelChange)=\"radioChanged()\"\n                />\n                <label>{{ 'order.cancel-entire-order' | translate }}</label>\n            </clr-radio-wrapper>\n            <clr-radio-wrapper>\n                <input\n                    type=\"radio\"\n                    clrRadio\n                    [value]=\"false\"\n                    [(ngModel)]=\"cancelAll\"\n                    name=\"options\"\n                    (ngModelChange)=\"radioChanged()\"\n                />\n                <label>{{ 'order.cancel-specified-items' | translate }}</label>\n            </clr-radio-wrapper>\n        </ng-container>\n        <label class=\"clr-control-label\">{{ 'order.cancellation-reason' | translate }}</label>\n        <ng-select\n            [items]=\"reasons\"\n            bindLabel=\"name\"\n            autofocus\n            bindValue=\"id\"\n            [addTag]=\"true\"\n            [(ngModel)]=\"reason\"\n        ></ng-select>\n    </div>\n</div>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button\n        type=\"submit\"\n        (click)=\"select()\"\n        [disabled]=\"!reason || (!order.active && selectionCount === 0)\"\n        class=\"btn btn-primary\"\n    >\n        <ng-container *ngIf=\"!order.active\">\n            {{ 'order.cancel-selected-items' | translate }}\n        </ng-container>\n        <ng-container *ngIf=\"order.active\">\n            {{ 'order.cancel-order' | translate }}\n        </ng-container>\n    </button>\n</ng-template>\n", styles: [":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}@media screen and (min-width: 768px){.fulfillment-wrapper .cancellation-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .order-lines{flex:1;overflow-y:auto}.fulfillment-wrapper .order-lines table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}.fulfillment-wrapper .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.fulfillment-wrapper .is-disabled td,.fulfillment-wrapper .is-disabled td input{background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i3.ClrRadio, selector: "[clrRadio]" }, { kind: "component", type: i3.ClrRadioWrapper, selector: "clr-radio-wrapper" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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>\n\n<div class=\"fulfillment-wrapper\">\n    <div class=\"order-lines\">\n        <table class=\"table\">\n            <thead>\n                <tr>\n                    <th></th>\n                    <th>{{ 'order.product-name' | translate }}</th>\n                    <th>{{ 'order.product-sku' | translate }}</th>\n                    <th>{{ 'order.quantity' | translate }}</th>\n                    <th>{{ 'order.unit-price' | translate }}</th>\n                    <th>{{ 'order.cancel' | translate }}</th>\n                </tr>\n            </thead>\n            <tr\n                *ngFor=\"let line of order.lines\"\n                class=\"order-line\"\n                [class.is-disabled]=\"cancelAll\"\n                [class.is-cancelled]=\"line.quantity === 0\"\n            >\n                <td class=\"align-middle thumb\">\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\n                </td>\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\n                <td class=\"align-middle quantity\">{{ line.quantity }}</td>\n                <td class=\"align-middle quantity\">\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\n                </td>\n                <td class=\"align-middle fulfil\">\n                    <input\n                        *ngIf=\"line.quantity > 0 && !order.active; else nonEditable\"\n                        [(ngModel)]=\"lineQuantities[line.id]\"\n                        (input)=\"checkIfAllSelected()\"\n                        [disabled]=\"cancelAll\"\n                        type=\"number\"\n                        [max]=\"line.quantity\"\n                        min=\"0\"\n                    />\n                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>\n                </td>\n            </tr>\n        </table>\n    </div>\n    <div class=\"cancellation-details\">\n        <ng-container *ngIf=\"order.active !== true\">\n            <clr-radio-wrapper>\n                <input\n                    type=\"radio\"\n                    clrRadio\n                    [value]=\"true\"\n                    [(ngModel)]=\"cancelAll\"\n                    name=\"options\"\n                    (ngModelChange)=\"radioChanged()\"\n                />\n                <label>{{ 'order.cancel-entire-order' | translate }}</label>\n            </clr-radio-wrapper>\n            <clr-radio-wrapper>\n                <input\n                    type=\"radio\"\n                    clrRadio\n                    [value]=\"false\"\n                    [(ngModel)]=\"cancelAll\"\n                    name=\"options\"\n                    (ngModelChange)=\"radioChanged()\"\n                />\n                <label>{{ 'order.cancel-specified-items' | translate }}</label>\n            </clr-radio-wrapper>\n        </ng-container>\n        <label class=\"clr-control-label\">{{ 'order.cancellation-reason' | translate }}</label>\n        <ng-select\n            [items]=\"reasons\"\n            bindLabel=\"name\"\n            autofocus\n            bindValue=\"id\"\n            [addTag]=\"true\"\n            [(ngModel)]=\"reason\"\n        ></ng-select>\n    </div>\n</div>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button\n        type=\"submit\"\n        (click)=\"select()\"\n        [disabled]=\"!reason || (!order.active && selectionCount === 0)\"\n        class=\"btn btn-primary\"\n    >\n        <ng-container *ngIf=\"!order.active\">\n            {{ 'order.cancel-selected-items' | translate }}\n        </ng-container>\n        <ng-container *ngIf=\"order.active\">\n            {{ 'order.cancel-order' | translate }}\n        </ng-container>\n    </button>\n</ng-template>\n", styles: [":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}@media screen and (min-width: 768px){.fulfillment-wrapper .cancellation-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .order-lines{flex:1;overflow-y:auto}.fulfillment-wrapper .order-lines table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}.fulfillment-wrapper .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.fulfillment-wrapper .is-disabled td,.fulfillment-wrapper .is-disabled td input{background-color:var(--color-component-bg-200)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.I18nService }] });
+
+const GET_COUPON_CODE_SELECTOR_PROMOTION_LIST = gql `
+    query GetCouponCodeSelectorPromotionList($options: PromotionListOptions) {
+        promotions(options: $options) {
+            items {
+                id
+                name
+                couponCode
+            }
+            totalItems
+        }
+    }
+`;
+class CouponCodeSelectorComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.addCouponCode = new EventEmitter();
+        this.removeCouponCode = new EventEmitter();
+        this.couponCodeInput$ = new Subject();
+    }
+    ngOnInit() {
+        this.availableCouponCodes$ = concat(this.couponCodeInput$.pipe(debounceTime(200), distinctUntilChanged(), switchMap(term => this.dataService.query(GetCouponCodeSelectorPromotionListDocument, {
+            options: {
+                take: 10,
+                skip: 0,
+                filter: {
+                    couponCode: { contains: term },
+                },
+            },
+        }).single$), map(({ promotions }) => 
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        promotions.items.map(p => ({ code: p.couponCode, promotionName: p.name }))), startWith([])));
+        if (!this.control) {
+            this.control = new UntypedFormControl(this.couponCodes ?? []);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CouponCodeSelectorComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: { couponCodes: "couponCodes", control: "control" }, outputs: { addCouponCode: "addCouponCode", removeCouponCode: "removeCouponCode" }, ngImport: i0, template: "<ng-select\n    [items]=\"availableCouponCodes$ | async\"\n    appendTo=\"body\"\n    bindLabel=\"code\"\n    bindValue=\"code\"\n    [addTag]=\"false\"\n    [multiple]=\"true\"\n    [hideSelected]=\"true\"\n    [minTermLength]=\"2\"\n    typeToSearchText=\"\"\n    [typeahead]=\"couponCodeInput$\"\n    [formControl]=\"control\"\n    (add)=\"addCouponCode.emit($event.code)\"\n    (remove)=\"removeCouponCode.emit($event.value?.code)\"\n>\n    <ng-template ng-option-tmp let-item=\"item\">\n        <div class=\"flex items-center\">\n            <vdr-chip class=\"mr-1\">{{ item.code }}</vdr-chip>\n            <span>{{ item.promotionName }}</span>\n        </div>\n    </ng-template>\n</ng-select>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CouponCodeSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-coupon-code-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-select\n    [items]=\"availableCouponCodes$ | async\"\n    appendTo=\"body\"\n    bindLabel=\"code\"\n    bindValue=\"code\"\n    [addTag]=\"false\"\n    [multiple]=\"true\"\n    [hideSelected]=\"true\"\n    [minTermLength]=\"2\"\n    typeToSearchText=\"\"\n    [typeahead]=\"couponCodeInput$\"\n    [formControl]=\"control\"\n    (add)=\"addCouponCode.emit($event.code)\"\n    (remove)=\"removeCouponCode.emit($event.value?.code)\"\n>\n    <ng-template ng-option-tmp let-item=\"item\">\n        <div class=\"flex items-center\">\n            <vdr-chip class=\"mr-1\">{{ item.code }}</vdr-chip>\n            <span>{{ item.promotionName }}</span>\n        </div>\n    </ng-template>\n</ng-select>\n" }]
+        }], ctorParameters: () => [{ type: i1.DataService }], propDecorators: { couponCodes: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], addCouponCode: [{
+                type: Output
+            }], removeCouponCode: [{
+                type: Output
+            }] } });
+
+class SelectAddressDialogComponent {
+    constructor(dataService, formBuilder) {
+        this.dataService = dataService;
+        this.formBuilder = formBuilder;
+        this.useExisting = true;
+        this.createNew = false;
+    }
+    ngOnInit() {
+        this.addressForm = this.formBuilder.group({
+            fullName: [this.currentAddress?.fullName ?? ''],
+            company: [this.currentAddress?.company ?? ''],
+            streetLine1: [this.currentAddress?.streetLine1 ?? '', Validators.required],
+            streetLine2: [this.currentAddress?.streetLine2 ?? ''],
+            city: [this.currentAddress?.city ?? '', Validators.required],
+            province: [this.currentAddress?.province ?? ''],
+            postalCode: [this.currentAddress?.postalCode ?? '', Validators.required],
+            countryCode: [this.currentAddress?.countryCode ?? '', Validators.required],
+            phoneNumber: [this.currentAddress?.phoneNumber ?? ''],
+        });
+        this.useExisting = !!this.customerId;
+        this.addresses$ = this.customerId
+            ? this.dataService
+                .query(GetCustomerAddressesDocument, { customerId: this.customerId })
+                .mapSingle(({ customer }) => customer?.addresses ?? [])
+                .pipe(tap(addresses => {
+                if (this.currentAddress) {
+                    this.selectedAddress = addresses.find(a => a.streetLine1 === this.currentAddress?.streetLine1 &&
+                        a.postalCode === this.currentAddress?.postalCode);
+                }
+                if (addresses.length === 0) {
+                    this.createNew = true;
+                    this.useExisting = false;
+                }
+            }))
+            : of([]);
+        this.availableCountries$ = this.dataService.settings
+            .getAvailableCountries()
+            .mapSingle(({ countries }) => countries.items);
+    }
+    trackByFn(item) {
+        return item.id;
+    }
+    addressIdFn(item) {
+        return item.streetLine1 + item.postalCode;
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    select() {
+        if (this.useExisting && this.selectedAddress) {
+            this.resolveWith({
+                ...pick(this.selectedAddress, [
+                    'fullName',
+                    'company',
+                    'streetLine1',
+                    'streetLine2',
+                    'city',
+                    'province',
+                    'phoneNumber',
+                    'postalCode',
+                ]),
+                countryCode: this.selectedAddress.country.code,
+            });
+        }
+        if (this.createNew && this.addressForm.valid) {
+            const formValue = this.addressForm.value;
+            this.resolveWith(formValue);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectAddressDialogComponent, deps: [{ token: i1.DataService }, { token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectAddressDialogComponent, selector: "vdr-select-address-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.select-address' | translate }}</ng-template>\n\n<clr-tabs *ngIf=\"addresses$ | async as addresses\">\n    <clr-tab *ngIf=\"customerId && addresses.length\">\n        <button clrTabLink>{{ 'order.existing-address' | translate }}</button>\n        <ng-template [(clrIfActive)]=\"useExisting\">\n            <clr-tab-content>\n                <vdr-radio-card-fieldset\n                    class=\"block mt-4\"\n                    [idFn]=\"addressIdFn\"\n                    [selectedItemId]=\"selectedAddress && addressIdFn(selectedAddress)\"\n                    (selectItem)=\"selectedAddress = $event\"\n                >\n                    <vdr-radio-card *ngFor=\"let address of addresses\" [item]=\"address\">\n                        <vdr-formatted-address [address]=\"address\"></vdr-formatted-address>\n                    </vdr-radio-card>\n                </vdr-radio-card-fieldset>\n            </clr-tab-content>\n        </ng-template>\n    </clr-tab>\n    <clr-tab>\n        <button clrTabLink>{{ 'customer.create-new-address' | translate }}</button>\n\n        <ng-template [(clrIfActive)]=\"createNew\">\n            <clr-tab-content>\n                <vdr-address-form\n                    [formGroup]=\"addressForm\"\n                    [availableCountries]=\"availableCountries$ | async\"\n                ></vdr-address-form>\n            </clr-tab-content>\n        </ng-template>\n    </clr-tab>\n</clr-tabs>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button\n        type=\"submit\"\n        (click)=\"select()\"\n        [disabled]=\"(useExisting && !selectedAddress) || (createNew && addressForm.invalid)\"\n        class=\"btn btn-primary\"\n    >\n        {{ 'common.okay' | translate }}\n    </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }, { kind: "component", type: i3.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { kind: "component", type: i3.ClrTab, selector: "clr-tab" }, { kind: "component", type: i3.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { kind: "directive", type: i3.ClrTabLink, selector: "[clrTabLink]", inputs: ["id", "clrTabLinkInOverflow"] }, { kind: "directive", type: i3.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { kind: "directive", type: i3.ÇlrActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { kind: "component", type: i1.RadioCardComponent, selector: "vdr-radio-card", inputs: ["item"], exportAs: ["VdrRadioCard"] }, { kind: "component", type: i1.RadioCardFieldsetComponent, selector: "vdr-radio-card-fieldset", inputs: ["selectedItemId", "idFn"], outputs: ["selectItem"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectAddressDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-select-address-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.select-address' | translate }}</ng-template>\n\n<clr-tabs *ngIf=\"addresses$ | async as addresses\">\n    <clr-tab *ngIf=\"customerId && addresses.length\">\n        <button clrTabLink>{{ 'order.existing-address' | translate }}</button>\n        <ng-template [(clrIfActive)]=\"useExisting\">\n            <clr-tab-content>\n                <vdr-radio-card-fieldset\n                    class=\"block mt-4\"\n                    [idFn]=\"addressIdFn\"\n                    [selectedItemId]=\"selectedAddress && addressIdFn(selectedAddress)\"\n                    (selectItem)=\"selectedAddress = $event\"\n                >\n                    <vdr-radio-card *ngFor=\"let address of addresses\" [item]=\"address\">\n                        <vdr-formatted-address [address]=\"address\"></vdr-formatted-address>\n                    </vdr-radio-card>\n                </vdr-radio-card-fieldset>\n            </clr-tab-content>\n        </ng-template>\n    </clr-tab>\n    <clr-tab>\n        <button clrTabLink>{{ 'customer.create-new-address' | translate }}</button>\n\n        <ng-template [(clrIfActive)]=\"createNew\">\n            <clr-tab-content>\n                <vdr-address-form\n                    [formGroup]=\"addressForm\"\n                    [availableCountries]=\"availableCountries$ | async\"\n                ></vdr-address-form>\n            </clr-tab-content>\n        </ng-template>\n    </clr-tab>\n</clr-tabs>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button\n        type=\"submit\"\n        (click)=\"select()\"\n        [disabled]=\"(useExisting && !selectedAddress) || (createNew && addressForm.invalid)\"\n        class=\"btn btn-primary\"\n    >\n        {{ 'common.okay' | translate }}\n    </button>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1.DataService }, { type: i2.UntypedFormBuilder }] });
+
+class SelectCustomerDialogComponent {
+    constructor(dataService, formBuilder) {
+        this.dataService = dataService;
+        this.formBuilder = formBuilder;
+        // populated by the dialog service
+        this.canCreateNew = true;
+        this.includeNoteInput = false;
+        this.title = marker('order.set-customer-for-order');
+        this.isLoading = false;
+        this.input$ = new Subject();
+        this.selectedCustomer = [];
+        this.useExisting = true;
+        this.createNew = false;
+        this.note = '';
+        this.customerForm = this.formBuilder.group({
+            title: '',
+            firstName: ['', Validators.required],
+            lastName: ['', Validators.required],
+            phoneNumber: '',
+            emailAddress: ['', [Validators.required, Validators.email]],
+        });
+    }
+    ngOnInit() {
+        this.customers$ = concat(of([]), // default items
+        this.input$.pipe(debounceTime(200), distinctUntilChanged(), tap(() => (this.isLoading = true)), switchMap(term => this.dataService.customer
+            .getCustomerList(10, 0, term)
+            .mapStream(({ customers }) => customers.items)
+            .pipe(catchError(() => of([])), // empty list on error
+        tap(() => (this.isLoading = false))))));
+    }
+    trackByFn(item) {
+        return item.id;
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    select() {
+        if (this.useExisting && this.selectedCustomer.length === 1) {
+            this.resolveWith({ ...this.selectedCustomer[0], note: this.note });
+        }
+        else if (this.createNew && this.customerForm.valid) {
+            const formValue = this.customerForm.value;
+            this.resolveWith({ ...formValue, note: this.note });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectCustomerDialogComponent, deps: [{ token: i1.DataService }, { token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectCustomerDialogComponent, selector: "vdr-select-customer-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ title | translate }}</ng-template>\n\n<ng-container *ngIf=\"!canCreateNew\">\n    <ng-container *ngTemplateOutlet=\"customerSelect\"></ng-container>\n    <vdr-form-field [label]=\"'common.add-note' | translate\" *ngIf=\"includeNoteInput\" class=\"mt-4\">\n        <textarea [(ngModel)]=\"note\"></textarea>\n    </vdr-form-field>\n</ng-container>\n\n<clr-tabs *ngIf=\"canCreateNew\" class=\"pt-1\">\n    <clr-tab>\n        <button clrTabLink>{{ 'order.existing-customer' | translate }}</button>\n\n        <ng-template [(clrIfActive)]=\"useExisting\">\n            <clr-tab-content>\n                <div class=\"mt-4\">\n                    <ng-container *ngTemplateOutlet=\"customerSelect\"></ng-container>\n                </div>\n            </clr-tab-content>\n        </ng-template>\n    </clr-tab>\n    <clr-tab *ngIf=\"canCreateNew\">\n        <button clrTabLink>{{ 'customer.create-new-customer' | translate }}</button>\n\n        <ng-template [(clrIfActive)]=\"createNew\">\n            <clr-tab-content>\n                <form [formGroup]=\"customerForm\">\n                    <vdr-form-field [label]=\"'customer.title' | translate\" for=\"title\">\n                        <input id=\"title\" type=\"text\" formControlName=\"title\" />\n                    </vdr-form-field>\n                    <vdr-form-field [label]=\"'customer.first-name' | translate\" for=\"firstName\">\n                        <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\n                    </vdr-form-field>\n                    <vdr-form-field [label]=\"'customer.last-name' | translate\" for=\"lastName\">\n                        <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\n                    </vdr-form-field>\n                    <vdr-form-field [label]=\"'customer.email-address' | translate\" for=\"emailAddress\">\n                        <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\n                    </vdr-form-field>\n                    <vdr-form-field [label]=\"'customer.phone-number' | translate\" for=\"phoneNumber\">\n                        <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\n                    </vdr-form-field>\n                </form>\n            </clr-tab-content>\n        </ng-template>\n    </clr-tab>\n</clr-tabs>\n\n<ng-template #customerSelect>\n    <ng-select\n        [items]=\"customers$ | async\"\n        appendTo=\"body\"\n        bindLabel=\"name\"\n        [addTag]=\"false\"\n        [multiple]=\"true\"\n        [hideSelected]=\"true\"\n        [trackByFn]=\"trackByFn\"\n        [minTermLength]=\"2\"\n        [loading]=\"isLoading\"\n        [typeahead]=\"input$\"\n        [(ngModel)]=\"selectedCustomer\"\n    >\n        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n            <span class=\"item-row\">\n                <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\n                ><span class=\"mx-1\">{{ item.firstName }} {{ item.lastName }}</span>\n                <vdr-chip>{{ item.emailAddress }}</vdr-chip>\n            </span>\n        </ng-template>\n        <ng-template ng-option-tmp let-item=\"item\">\n            <span class=\"item-row\">\n                <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\n                ><span class=\"mx-1\">{{ item.firstName }} {{ item.lastName }}</span>\n                <vdr-chip>{{ item.emailAddress }}</vdr-chip>\n            </span>\n        </ng-template>\n    </ng-select>\n</ng-template>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button\n        type=\"submit\"\n        (click)=\"select()\"\n        [disabled]=\"(useExisting && selectedCustomer.length === 0) || (createNew && customerForm.invalid)\"\n        class=\"btn btn-primary\"\n    >\n        {{ 'common.okay' | translate }}\n    </button>\n</ng-template>\n", styles: [".item-row{display:flex;align-items:center}clr-tabs{display:block}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }, { kind: "component", type: i3.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { kind: "component", type: i3.ClrTab, selector: "clr-tab" }, { kind: "component", type: i3.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { kind: "directive", type: i3.ClrTabLink, selector: "[clrTabLink]", inputs: ["id", "clrTabLinkInOverflow"] }, { kind: "directive", type: i3.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { kind: "directive", type: i3.ÇlrActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i5.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectCustomerDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-select-customer-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ title | translate }}</ng-template>\n\n<ng-container *ngIf=\"!canCreateNew\">\n    <ng-container *ngTemplateOutlet=\"customerSelect\"></ng-container>\n    <vdr-form-field [label]=\"'common.add-note' | translate\" *ngIf=\"includeNoteInput\" class=\"mt-4\">\n        <textarea [(ngModel)]=\"note\"></textarea>\n    </vdr-form-field>\n</ng-container>\n\n<clr-tabs *ngIf=\"canCreateNew\" class=\"pt-1\">\n    <clr-tab>\n        <button clrTabLink>{{ 'order.existing-customer' | translate }}</button>\n\n        <ng-template [(clrIfActive)]=\"useExisting\">\n            <clr-tab-content>\n                <div class=\"mt-4\">\n                    <ng-container *ngTemplateOutlet=\"customerSelect\"></ng-container>\n                </div>\n            </clr-tab-content>\n        </ng-template>\n    </clr-tab>\n    <clr-tab *ngIf=\"canCreateNew\">\n        <button clrTabLink>{{ 'customer.create-new-customer' | translate }}</button>\n\n        <ng-template [(clrIfActive)]=\"createNew\">\n            <clr-tab-content>\n                <form [formGroup]=\"customerForm\">\n                    <vdr-form-field [label]=\"'customer.title' | translate\" for=\"title\">\n                        <input id=\"title\" type=\"text\" formControlName=\"title\" />\n                    </vdr-form-field>\n                    <vdr-form-field [label]=\"'customer.first-name' | translate\" for=\"firstName\">\n                        <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\n                    </vdr-form-field>\n                    <vdr-form-field [label]=\"'customer.last-name' | translate\" for=\"lastName\">\n                        <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\n                    </vdr-form-field>\n                    <vdr-form-field [label]=\"'customer.email-address' | translate\" for=\"emailAddress\">\n                        <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\n                    </vdr-form-field>\n                    <vdr-form-field [label]=\"'customer.phone-number' | translate\" for=\"phoneNumber\">\n                        <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\n                    </vdr-form-field>\n                </form>\n            </clr-tab-content>\n        </ng-template>\n    </clr-tab>\n</clr-tabs>\n\n<ng-template #customerSelect>\n    <ng-select\n        [items]=\"customers$ | async\"\n        appendTo=\"body\"\n        bindLabel=\"name\"\n        [addTag]=\"false\"\n        [multiple]=\"true\"\n        [hideSelected]=\"true\"\n        [trackByFn]=\"trackByFn\"\n        [minTermLength]=\"2\"\n        [loading]=\"isLoading\"\n        [typeahead]=\"input$\"\n        [(ngModel)]=\"selectedCustomer\"\n    >\n        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n            <span class=\"item-row\">\n                <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\n                ><span class=\"mx-1\">{{ item.firstName }} {{ item.lastName }}</span>\n                <vdr-chip>{{ item.emailAddress }}</vdr-chip>\n            </span>\n        </ng-template>\n        <ng-template ng-option-tmp let-item=\"item\">\n            <span class=\"item-row\">\n                <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\n                ><span class=\"mx-1\">{{ item.firstName }} {{ item.lastName }}</span>\n                <vdr-chip>{{ item.emailAddress }}</vdr-chip>\n            </span>\n        </ng-template>\n    </ng-select>\n</ng-template>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button\n        type=\"submit\"\n        (click)=\"select()\"\n        [disabled]=\"(useExisting && selectedCustomer.length === 0) || (createNew && customerForm.invalid)\"\n        class=\"btn btn-primary\"\n    >\n        {{ 'common.okay' | translate }}\n    </button>\n</ng-template>\n", styles: [".item-row{display:flex;align-items:center}clr-tabs{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DataService }, { type: i2.UntypedFormBuilder }] });
+
+class SelectShippingMethodDialogComponent {
+    ngOnInit() {
+        if (this.currentSelectionId) {
+            this.selectedMethod = this.eligibleShippingMethods.find(m => m.id === this.currentSelectionId);
+        }
+    }
+    methodIdFn(item) {
+        return item.id;
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    select() {
+        if (this.selectedMethod) {
+            this.resolveWith(this.selectedMethod.id);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectShippingMethodDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectShippingMethodDialogComponent, selector: "vdr-select-shipping-method-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.select-shipping-method' | translate }}</ng-template>\n<vdr-radio-card-fieldset\n    [idFn]=\"methodIdFn\"\n    [selectedItemId]=\"selectedMethod?.id\"\n    (selectItem)=\"selectedMethod = $event\"\n>\n    <vdr-radio-card *ngFor=\"let quote of eligibleShippingMethods\" [item]=\"quote\">\n        <div class=\"result-details\">\n            <vdr-labeled-data [label]=\"'settings.shipping-method' | translate\">\n                {{ quote.name }}\n            </vdr-labeled-data>\n            <div class=\"price-row\">\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\n                    {{ quote.price | localeCurrency: currencyCode }}\n                </vdr-labeled-data>\n                <vdr-labeled-data [label]=\"'common.price-with-tax' | translate\">\n                    {{ quote.priceWithTax | localeCurrency: currencyCode }}\n                </vdr-labeled-data>\n            </div>\n            <vdr-object-tree *ngIf=\"quote.metadata\" [value]=\"quote.metadata\"></vdr-object-tree>\n        </div>\n    </vdr-radio-card>\n</vdr-radio-card-fieldset>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button\n        type=\"submit\"\n        (click)=\"select()\"\n        [disabled]=\"!selectedMethod\"\n        class=\"btn btn-primary\"\n    >\n        {{ 'common.okay' | translate }}\n    </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: i1.RadioCardComponent, selector: "vdr-radio-card", inputs: ["item"], exportAs: ["VdrRadioCard"] }, { kind: "component", type: i1.RadioCardFieldsetComponent, selector: "vdr-radio-card-fieldset", inputs: ["selectedItemId", "idFn"], outputs: ["selectItem"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectShippingMethodDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-select-shipping-method-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.select-shipping-method' | translate }}</ng-template>\n<vdr-radio-card-fieldset\n    [idFn]=\"methodIdFn\"\n    [selectedItemId]=\"selectedMethod?.id\"\n    (selectItem)=\"selectedMethod = $event\"\n>\n    <vdr-radio-card *ngFor=\"let quote of eligibleShippingMethods\" [item]=\"quote\">\n        <div class=\"result-details\">\n            <vdr-labeled-data [label]=\"'settings.shipping-method' | translate\">\n                {{ quote.name }}\n            </vdr-labeled-data>\n            <div class=\"price-row\">\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\n                    {{ quote.price | localeCurrency: currencyCode }}\n                </vdr-labeled-data>\n                <vdr-labeled-data [label]=\"'common.price-with-tax' | translate\">\n                    {{ quote.priceWithTax | localeCurrency: currencyCode }}\n                </vdr-labeled-data>\n            </div>\n            <vdr-object-tree *ngIf=\"quote.metadata\" [value]=\"quote.metadata\"></vdr-object-tree>\n        </div>\n    </vdr-radio-card>\n</vdr-radio-card-fieldset>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button\n        type=\"submit\"\n        (click)=\"select()\"\n        [disabled]=\"!selectedMethod\"\n        class=\"btn btn-primary\"\n    >\n        {{ 'common.okay' | translate }}\n    </button>\n</ng-template>\n" }]
+        }] });
+
+class OrderStateSelectDialogComponent {
+    constructor() {
+        this.nextStates = [];
+        this.message = '';
+        this.selectedState = '';
+    }
+    select() {
+        if (this.selectedState) {
+            this.resolveWith(this.selectedState);
+        }
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderStateSelectDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderStateSelectDialogComponent, selector: "vdr-order-state-select-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.select-state' | translate }}</ng-template>\n<p>{{ message | translate }}</p>\n<vdr-form-field>\n    <select name=\"state\" [(ngModel)]=\"selectedState\">\n        <option *ngFor=\"let state of nextStates\" [value]=\"state\">\n            {{ state | stateI18nToken | translate }}\n        </option>\n    </select>\n</vdr-form-field>\n<ng-template vdrDialogButtons>\n    <button type=\"submit\" *ngIf=\"cancellable\" (click)=\"cancel()\" class=\"btn btn-secondary\">\n        {{ 'common.cancel' | translate }}\n    </button>\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"!selectedState\">\n        {{ 'order.transition-to-state' | translate: { state: (selectedState | stateI18nToken | translate) } }}\n    </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderStateSelectDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-order-state-select-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.select-state' | translate }}</ng-template>\n<p>{{ message | translate }}</p>\n<vdr-form-field>\n    <select name=\"state\" [(ngModel)]=\"selectedState\">\n        <option *ngFor=\"let state of nextStates\" [value]=\"state\">\n            {{ state | stateI18nToken | translate }}\n        </option>\n    </select>\n</vdr-form-field>\n<ng-template vdrDialogButtons>\n    <button type=\"submit\" *ngIf=\"cancellable\" (click)=\"cancel()\" class=\"btn btn-secondary\">\n        {{ 'common.cancel' | translate }}\n    </button>\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"!selectedState\">\n        {{ 'order.transition-to-state' | translate: { state: (selectedState | stateI18nToken | translate) } }}\n    </button>\n</ng-template>\n" }]
+        }] });
+
+class OrderTransitionService {
+    constructor(dataService, modalService, notificationService, i18nService) {
+        this.dataService = dataService;
+        this.modalService = modalService;
+        this.notificationService = notificationService;
+        this.i18nService = i18nService;
+    }
+    /**
+     * Attempts to transition the Order to the last state it was in before it was transitioned
+     * to the "Modifying" state. If this fails, a manual prompt is used.
+     */
+    transitionToPreModifyingState(orderId, nextStates) {
+        return this.getPreModifyingState(orderId).pipe(switchMap(state => {
+            const manualTransitionOptions = {
+                orderId,
+                nextStates,
+                message: this.i18nService.translate(marker('order.unable-to-transition-to-state-try-another'), { state }),
+                cancellable: false,
+                retry: 10,
+            };
+            if (state) {
+                return this.transitionToStateOrThrow(orderId, state).pipe(catchError(err => this.manuallyTransitionToState(manualTransitionOptions)));
+            }
+            else {
+                return this.manuallyTransitionToState(manualTransitionOptions);
+            }
+        }));
+    }
+    /**
+     * Displays a modal for manually selecting the next state.
+     */
+    manuallyTransitionToState(options) {
+        return this.modalService
+            .fromComponent(OrderStateSelectDialogComponent, {
+            locals: {
+                nextStates: options.nextStates,
+                cancellable: options.cancellable,
+                message: options.message,
+            },
+            closable: false,
+            size: 'md',
+        })
+            .pipe(switchMap(result => {
+            if (result) {
+                return this.transitionToStateOrThrow(options.orderId, result);
+            }
+            else {
+                if (!options.cancellable) {
+                    throw new Error(`An order state must be selected`);
+                }
+                else {
+                    return EMPTY;
+                }
+            }
+        }), retryWhen(errors => errors.pipe(delay(2000), take(options.retry))));
+    }
+    /**
+     * Attempts to get the last state the Order was in before it was transitioned
+     * to the "Modifying" state.
+     */
+    getPreModifyingState(orderId) {
+        return this.dataService.order
+            .getOrderHistory(orderId, {
+            filter: {
+                type: {
+                    eq: HistoryEntryType.ORDER_STATE_TRANSITION,
+                },
+            },
+            sort: {
+                createdAt: SortOrder.DESC,
+            },
+        })
+            .mapSingle(result => result.order)
+            .pipe(map(result => {
+            const item = result?.history.items.find(i => i.data.to === 'Modifying');
+            if (item) {
+                return item.data.from;
+            }
+            else {
+                return;
+            }
+        }));
+    }
+    transitionToStateOrThrow(orderId, state) {
+        return this.dataService.order.transitionToState(orderId, state).pipe(map(({ transitionOrderToState }) => {
+            switch (transitionOrderToState?.__typename) {
+                case 'Order':
+                    return transitionOrderToState?.state;
+                case 'OrderStateTransitionError':
+                    this.notificationService.error(transitionOrderToState?.transitionError);
+                    throw new Error(transitionOrderToState?.transitionError);
+            }
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderTransitionService, deps: [{ token: i1.DataService }, { token: i1.ModalService }, { token: i1.NotificationService }, { token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderTransitionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderTransitionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.DataService }, { type: i1.ModalService }, { type: i1.NotificationService }, { type: i1.I18nService }] });
+
+class OrderCustomFieldsCardComponent {
+    constructor(formBuilder, modalService) {
+        this.formBuilder = formBuilder;
+        this.modalService = modalService;
+        this.customFieldsConfig = [];
+        this.customFieldValues = {};
+        this.updateClick = new EventEmitter();
+        this.editable = false;
+    }
+    ngOnInit() {
+        this.customFieldForm = this.formBuilder.group({});
+        for (const field of this.customFieldsConfig) {
+            this.customFieldForm.addControl(field.name, this.formBuilder.control(this.customFieldValues[field.name]));
+        }
+    }
+    onUpdateClick() {
+        this.updateClick.emit(this.customFieldForm.value);
+        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;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderCustomFieldsCardComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: i1.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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\">\n    <div class=\"card-header\">\n        {{ 'common.custom-fields' | translate }}\n    </div>\n    <div class=\"card-block\">\n        <div class=\"card-text custom-field-form\" [class.editable]=\"editable\">\n            <vdr-tabbed-custom-fields\n                entityName=\"Order\"\n                [customFields]=\"customFieldsConfig\"\n                [customFieldsFormGroup]=\"customFieldForm\"\n                [readonly]=\"!editable\"\n                [compact]=\"true\"\n            ></vdr-tabbed-custom-fields>\n        </div>\n    </div>\n    <div class=\"card-footer\">\n        <button class=\"btn btn-sm btn-secondary\" (click)=\"editable = true\" *ngIf=\"!editable\">\n            <clr-icon shape=\"pencil\"></clr-icon>\n            {{ 'common.edit' | translate }}\n        </button>\n        <button\n            class=\"btn btn-sm btn-primary\"\n            (click)=\"onUpdateClick()\"\n            *ngIf=\"editable\"\n            [disabled]=\"customFieldForm.pristine || customFieldForm.invalid\"\n        >\n            <clr-icon shape=\"check\"></clr-icon>\n            {{ 'common.update' | translate }}\n        </button>\n        <button\n            class=\"btn btn-sm btn-secondary\"\n            (click)=\"onCancelClick()\"\n            *ngIf=\"editable\"\n        >\n            <clr-icon shape=\"times\"></clr-icon>\n            {{ 'common.cancel' | translate }}\n        </button>\n    </div>\n</div>\n", styles: ["vdr-custom-field-control{margin-bottom:6px;display:block}.custom-field-form ::ng-deep .clr-control-label{color:var(--color-grey-400)}.custom-field-form.editable ::ng-deep .clr-control-label{color:inherit}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderCustomFieldsCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-order-custom-fields-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card\" *ngIf=\"customFieldsConfig.length\">\n    <div class=\"card-header\">\n        {{ 'common.custom-fields' | translate }}\n    </div>\n    <div class=\"card-block\">\n        <div class=\"card-text custom-field-form\" [class.editable]=\"editable\">\n            <vdr-tabbed-custom-fields\n                entityName=\"Order\"\n                [customFields]=\"customFieldsConfig\"\n                [customFieldsFormGroup]=\"customFieldForm\"\n                [readonly]=\"!editable\"\n                [compact]=\"true\"\n            ></vdr-tabbed-custom-fields>\n        </div>\n    </div>\n    <div class=\"card-footer\">\n        <button class=\"btn btn-sm btn-secondary\" (click)=\"editable = true\" *ngIf=\"!editable\">\n            <clr-icon shape=\"pencil\"></clr-icon>\n            {{ 'common.edit' | translate }}\n        </button>\n        <button\n            class=\"btn btn-sm btn-primary\"\n            (click)=\"onUpdateClick()\"\n            *ngIf=\"editable\"\n            [disabled]=\"customFieldForm.pristine || customFieldForm.invalid\"\n        >\n            <clr-icon shape=\"check\"></clr-icon>\n            {{ 'common.update' | translate }}\n        </button>\n        <button\n            class=\"btn btn-sm btn-secondary\"\n            (click)=\"onCancelClick()\"\n            *ngIf=\"editable\"\n        >\n            <clr-icon shape=\"times\"></clr-icon>\n            {{ 'common.cancel' | translate }}\n        </button>\n    </div>\n</div>\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: () => [{ type: i2.UntypedFormBuilder }, { type: i1.ModalService }], propDecorators: { customFieldsConfig: [{
+                type: Input
+            }], customFieldValues: [{
+                type: Input
+            }], updateClick: [{
+                type: Output
+            }] } });
+
+class LineFulfillmentComponent {
+    constructor() {
+        this.fulfilledCount = 0;
+        this.fulfillments = [];
+    }
+    ngOnChanges(changes) {
+        if (this.line) {
+            this.fulfilledCount = this.getDeliveredCount(this.line);
+            this.fulfillmentStatus = this.getFulfillmentStatus(this.fulfilledCount, this.line.quantity);
+            this.fulfillments = this.getFulfillments(this.line);
+        }
+    }
+    /**
+     * Returns the number of items in an OrderLine which are fulfilled.
+     */
+    getDeliveredCount(line) {
+        return (line.fulfillmentLines?.reduce((sum, fulfillmentLine) => sum + fulfillmentLine.quantity, 0) ?? 0);
+    }
+    getFulfillmentStatus(fulfilledCount, lineQuantity) {
+        if (fulfilledCount === lineQuantity) {
+            return 'full';
+        }
+        if (0 < fulfilledCount && fulfilledCount < lineQuantity) {
+            return 'partial';
+        }
+        return 'none';
+    }
+    getFulfillments(line) {
+        return (line.fulfillmentLines
+            ?.map(fulfillmentLine => {
+            const fulfillment = this.allOrderFulfillments?.find(f => f.id === fulfillmentLine.fulfillmentId);
+            if (!fulfillment) {
+                return;
+            }
+            return {
+                count: fulfillmentLine.quantity,
+                fulfillment,
+            };
+        })
+            .filter(notNullOrUndefined) ?? []);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LineFulfillmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: { line: "line", allOrderFulfillments: "allOrderFulfillments", orderState: "orderState" }, usesOnChanges: true, ngImport: i0, template: "<vdr-dropdown class=\"search-settings-menu\" *ngIf=\"fulfilledCount || orderState === 'PartiallyDelivered'\">\n    <button type=\"button\" class=\"icon-button\" vdrDropdownTrigger>\n        <clr-icon *ngIf=\"fulfillmentStatus === 'full'\" class=\"item-fulfilled\" shape=\"check-circle\"></clr-icon>\n        <clr-icon\n            *ngIf=\"fulfillmentStatus === 'partial'\"\n            class=\"item-partially-fulfilled\"\n            shape=\"check-circle\"\n        ></clr-icon>\n        <clr-icon\n            *ngIf=\"fulfillmentStatus === 'none'\"\n            class=\"item-not-fulfilled\"\n            shape=\"exclamation-circle\"\n        ></clr-icon>\n    </button>\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'full'\">\n            {{ 'order.line-fulfillment-all' | translate }}\n        </label>\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'partial'\">\n            {{\n                'order.line-fulfillment-partial' | translate: { total: line.quantity, count: fulfilledCount }\n            }}\n        </label>\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'none'\">\n            {{ 'order.line-fulfillment-none' | translate }}\n        </label>\n        <div class=\"fulfillment-detail\" *ngFor=\"let item of fulfillments\">\n            <div class=\"fulfillment-title\">\n                {{ 'order.fulfillment' | translate }} #{{ item.fulfillment.id }} ({{\n                    'order.item-count' | translate: { count: item.count }\n                }})\n            </div>\n            <vdr-labeled-data [label]=\"'common.created-at' | translate\">\n                {{ item.fulfillment.createdAt | localeDate: 'medium' }}\n            </vdr-labeled-data>\n            <vdr-labeled-data [label]=\"'order.fulfillment-method' | translate\">\n                {{ item.fulfillment.method }}\n            </vdr-labeled-data>\n            <vdr-labeled-data\n                *ngIf=\"item.fulfillment.trackingCode\"\n                [label]=\"'order.tracking-code' | translate\"\n            >\n                {{ item.fulfillment.trackingCode }}\n            </vdr-labeled-data>\n        </div>\n    </vdr-dropdown-menu>\n</vdr-dropdown>\n", styles: [".item-fulfilled{color:var(--color-success-700)}.item-partially-fulfilled{color:var(--color-warning-700)}.item-not-fulfilled{color:var(--color-error-700)}.fulfillment-detail{margin:6px 12px}.fulfillment-detail:not(:last-of-type){border-bottom:1px dashed var(--color-component-border-200)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LineFulfillmentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-line-fulfillment', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-dropdown class=\"search-settings-menu\" *ngIf=\"fulfilledCount || orderState === 'PartiallyDelivered'\">\n    <button type=\"button\" class=\"icon-button\" vdrDropdownTrigger>\n        <clr-icon *ngIf=\"fulfillmentStatus === 'full'\" class=\"item-fulfilled\" shape=\"check-circle\"></clr-icon>\n        <clr-icon\n            *ngIf=\"fulfillmentStatus === 'partial'\"\n            class=\"item-partially-fulfilled\"\n            shape=\"check-circle\"\n        ></clr-icon>\n        <clr-icon\n            *ngIf=\"fulfillmentStatus === 'none'\"\n            class=\"item-not-fulfilled\"\n            shape=\"exclamation-circle\"\n        ></clr-icon>\n    </button>\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'full'\">\n            {{ 'order.line-fulfillment-all' | translate }}\n        </label>\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'partial'\">\n            {{\n                'order.line-fulfillment-partial' | translate: { total: line.quantity, count: fulfilledCount }\n            }}\n        </label>\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'none'\">\n            {{ 'order.line-fulfillment-none' | translate }}\n        </label>\n        <div class=\"fulfillment-detail\" *ngFor=\"let item of fulfillments\">\n            <div class=\"fulfillment-title\">\n                {{ 'order.fulfillment' | translate }} #{{ item.fulfillment.id }} ({{\n                    'order.item-count' | translate: { count: item.count }\n                }})\n            </div>\n            <vdr-labeled-data [label]=\"'common.created-at' | translate\">\n                {{ item.fulfillment.createdAt | localeDate: 'medium' }}\n            </vdr-labeled-data>\n            <vdr-labeled-data [label]=\"'order.fulfillment-method' | translate\">\n                {{ item.fulfillment.method }}\n            </vdr-labeled-data>\n            <vdr-labeled-data\n                *ngIf=\"item.fulfillment.trackingCode\"\n                [label]=\"'order.tracking-code' | translate\"\n            >\n                {{ item.fulfillment.trackingCode }}\n            </vdr-labeled-data>\n        </div>\n    </vdr-dropdown-menu>\n</vdr-dropdown>\n", styles: [".item-fulfilled{color:var(--color-success-700)}.item-partially-fulfilled{color:var(--color-warning-700)}.item-not-fulfilled{color:var(--color-error-700)}.fulfillment-detail{margin:6px 12px}.fulfillment-detail:not(:last-of-type){border-bottom:1px dashed var(--color-component-border-200)}\n"] }]
+        }], propDecorators: { line: [{
+                type: Input
+            }], allOrderFulfillments: [{
+                type: Input
+            }], orderState: [{
+                type: Input
+            }] } });
+
+class LineRefundsComponent {
+    getRefundedCount() {
+        const refundLines = this.payments
+            ?.reduce((all, payment) => [...all, ...payment.refunds], [])
+            .filter(refund => refund.state !== 'Failed')
+            .reduce((all, refund) => [...all, ...refund.lines], []) ?? [];
+        return refundLines
+            .filter(i => i.orderLineId === this.line.id)
+            .reduce((sum, i) => sum + i.quantity, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LineRefundsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: { line: "line", payments: "payments" }, ngImport: i0, template: "<span *ngIf=\"getRefundedCount()\" [title]=\"'order.refunded-count' | translate: { count: getRefundedCount() }\">\n    <clr-icon shape=\"redo\" class=\"is-solid\" dir=\"down\"></clr-icon>\n</span>\n", styles: [":host{color:var(--color-error-500)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LineRefundsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-line-refunds', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span *ngIf=\"getRefundedCount()\" [title]=\"'order.refunded-count' | translate: { count: getRefundedCount() }\">\n    <clr-icon shape=\"redo\" class=\"is-solid\" dir=\"down\"></clr-icon>\n</span>\n", styles: [":host{color:var(--color-error-500)}\n"] }]
+        }], propDecorators: { line: [{
+                type: Input
+            }], payments: [{
+                type: Input
+            }] } });
+
+class OrderTotalColumnComponent extends DataTable2ColumnComponent {
+    constructor() {
+        super(...arguments);
+        this.orderable = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderTotalColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderTotalColumnComponent, selector: "vdr-order-total-column", exportAs: ["row"], usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderTotalColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vdr-order-total-column',
+                    template: ``,
+                    exportAs: 'row',
+                }]
+        }] });
+
+class OrderDataTableComponent extends DataTable2Component {
+    get allColumns() {
+        return [...(this.columns ?? []), ...(this.customFieldColumns ?? []), ...(this.totalColumns ?? [])];
+    }
+    get sortedColumns() {
+        const columns = this.allColumns;
+        const dataTableConfig = this.getDataTableConfig();
+        for (const [id, index] of Object.entries(dataTableConfig[this.id].order)) {
+            const column = columns.find(c => c.id === id);
+            const currentIndex = columns.findIndex(c => c.id === id);
+            if (currentIndex !== -1 && column) {
+                columns.splice(currentIndex, 1);
+                columns.splice(index, 0, column);
+            }
+        }
+        return columns;
+    }
+    getPromotionLink(promotion) {
+        const id = promotion.adjustmentSource.split(':')[1];
+        return ['/marketing', 'promotions', id];
+    }
+    getCouponCodeForAdjustment(order, promotionAdjustment) {
+        const id = promotionAdjustment.adjustmentSource.split(':')[1];
+        const promotion = order.promotions.find(p => p.id === id);
+        if (promotion) {
+            return promotion.couponCode || undefined;
+        }
+    }
+    getShippingNames(order) {
+        if (order.shippingLines.length) {
+            return order.shippingLines.map(shippingLine => shippingLine.shippingMethod.name).join(', ');
+        }
+        else {
+            return '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: { order: "order" }, queries: [{ propertyName: "totalColumns", predicate: OrderTotalColumnComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"bulk-actions\">\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\n</div>\n<div class=\"table-wrapper\">\n    <table\n        class=\"\"\n        [class.no-select]=\"disableSelect\"\n    >\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\n            <tr class=\"heading-row\">\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\n                    <input\n                        type=\"checkbox\"\n                        clrCheckbox\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\n                        (change)=\"onToggleAllClick()\"\n                    />\n                </th>\n                <th\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\n                    [class.expand]=\"column.expand\"\n                >\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\n                        <vdr-ui-extension-point\n                            [locationId]=\"id\"\n                            [metadata]=\"column.id\"\n                            api=\"dataTable\"\n                            [topPx]=\"-6\"\n                            [leftPx]=\"-24\"\n                            display=\"block\"\n                        >\n                            <span>{{ column.heading }}</span>\n                        </vdr-ui-extension-point>\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\n                            </button>\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\n                        </div>\n                    </div>\n                </th>\n                <th>\n                    <div class=\"column-picker\">\n                        <vdr-data-table-colum-picker\n                            [uiLanguage]=\"uiLanguage$ | async\"\n                            [columns]=\"sortedColumns\"\n                            (reorder)=\"onColumnReorder($event)\"\n                            (resetColumns)=\"onColumnsReset()\"\n                        ></vdr-data-table-colum-picker>\n                    </div>\n                </th>\n            </tr>\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\n                <th\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\n                    class=\"filter-row\"\n                    [class.active]=\"showSearchFilterRow\"\n                >\n                    <button\n                        class=\"button-ghost toggle-search-filter-row\"\n                        [class.active]=\"showSearchFilterRow\"\n                        (click)=\"toggleSearchFilterRow()\"\n                        [title]=\"'common.search-and-filter-list' | translate\"\n                    >\n                        <clr-icon shape=\"search\"></clr-icon>\n                    </button>\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\n                        <ng-container *ngIf=\"filters\">\n                            <div class=\"filters\">\n                                <vdr-data-table-filters\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\n                                    [filterWithValue]=\"activeFilter\"\n                                    [filters]=\"filters\"\n                                    class=\"mt-1\"\n                                ></vdr-data-table-filters>\n                                <vdr-data-table-filters\n                                    *ngIf=\"filters.length\"\n                                    [filters]=\"filters\"\n                                    class=\"mt-1\"\n                                ></vdr-data-table-filters>\n                            </div>\n                        </ng-container>\n                    </div>\n                </th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr\n                *ngFor=\"\n                    let item of items\n                        | paginate\n                            : {\n                                  id: id,\n                                  itemsPerPage: itemsPerPage,\n                                  currentPage: currentPage,\n                                  totalItems: totalItems\n                              };\n                    index as i;\n                    trackBy: trackByFn\n                \"\n            >\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\n                    <input\n                        type=\"checkbox\"\n                        clrCheckbox\n                        [checked]=\"selectionManager?.isSelected(item)\"\n                        (click)=\"onRowClick(item, $event)\"\n                    />\n                </td>\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\n                        <ng-container\n                            *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\n                        >\n                            <ng-container\n                                *ngComponentOutlet=\"\n                                    componentConfig.config.component;\n                                    inputs: { rowItem: item };\n                                    injector: componentConfig.injector\n                                \"\n                            ></ng-container>\n                        </ng-container>\n                        <ng-template #defaultComponent>\n                            <ng-container\n                                *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\n                            ></ng-container>\n                        </ng-template>\n                    </div>\n                </td>\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\n            </tr>\n            <ng-container>\n                <tr *ngIf=\"!items?.length\">\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\n                        <vdr-empty-placeholder [emptyStateLabel]=\"'order.order-is-empty' | translate\"></vdr-empty-placeholder>\n                    </td>\n                </tr>\n            </ng-container>\n            <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\n                <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\n                <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\n                <td class=\"align-middle\" [attr.colspan]=\"visibleSortedColumns.length - 4\"></td>\n                <td class=\"align-middle total\">\n                    {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                        {{ surcharge.price | localeCurrency : order.currencyCode }}\n                    </div>\n                </td>\n                <td><!-- column select --></td>\n            </tr>\n            <ng-container *ngFor=\"let discount of order.discounts\">\n                <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\n                    <td [attr.colspan]=\"visibleSortedColumns.length - 1\" class=\"\">\n                        <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\n                        <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\n                            couponCode\n                        }}</vdr-chip>\n                    </td>\n                    <td class=\"\">\n                        {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\n                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                            {{ discount.amount | localeCurrency : order.currencyCode }}\n                        </div>\n                    </td>\n                    <td><!-- column select --></td>\n                </tr>\n            </ng-container>\n            <tr class=\"sub-total\">\n                <td class=\"\">{{ 'order.sub-total' | translate }}</td>\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\n                <td class=\"clr-align-middle\">\n                    {{ order.subTotalWithTax | localeCurrency : order.currencyCode }}\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                        {{ order.subTotal | localeCurrency : order.currencyCode }}\n                    </div>\n                </td>\n                <td><!-- column select --></td>\n            </tr>\n            <tr class=\"shipping\">\n                <td class=\"\">{{ 'order.shipping' | translate }}</td>\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\">\n                    <vdr-chip *ngFor=\"let shippingLine of order.shippingLines\" class=\"shipping-method-name\">\n                        {{ shippingLine.shippingMethod.name }}\n                    </vdr-chip>\n                </td>\n                <td class=\"clr-align-middle\">\n                    {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                        {{ order.shipping | localeCurrency : order.currencyCode }}\n                    </div>\n                </td>\n                <td><!-- column select --></td>\n            </tr>\n            <tr class=\"total\">\n                <td class=\"\">{{ 'order.total' | translate }}</td>\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\n                <td class=\"clr-align-middle\">\n                    {{ order.totalWithTax | localeCurrency : order.currencyCode }}\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                        {{ order.total | localeCurrency : order.currencyCode }}\n                    </div>\n                </td>\n                <td><!-- column select --></td>\n            </tr>\n        </tbody>\n    </table>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: i1.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { kind: "component", type: i1.DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: i1.DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderDataTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-order-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bulk-actions\">\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\n</div>\n<div class=\"table-wrapper\">\n    <table\n        class=\"\"\n        [class.no-select]=\"disableSelect\"\n    >\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\n            <tr class=\"heading-row\">\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\n                    <input\n                        type=\"checkbox\"\n                        clrCheckbox\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\n                        (change)=\"onToggleAllClick()\"\n                    />\n                </th>\n                <th\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\n                    [class.expand]=\"column.expand\"\n                >\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\n                        <vdr-ui-extension-point\n                            [locationId]=\"id\"\n                            [metadata]=\"column.id\"\n                            api=\"dataTable\"\n                            [topPx]=\"-6\"\n                            [leftPx]=\"-24\"\n                            display=\"block\"\n                        >\n                            <span>{{ column.heading }}</span>\n                        </vdr-ui-extension-point>\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\n                            </button>\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\n                        </div>\n                    </div>\n                </th>\n                <th>\n                    <div class=\"column-picker\">\n                        <vdr-data-table-colum-picker\n                            [uiLanguage]=\"uiLanguage$ | async\"\n                            [columns]=\"sortedColumns\"\n                            (reorder)=\"onColumnReorder($event)\"\n                            (resetColumns)=\"onColumnsReset()\"\n                        ></vdr-data-table-colum-picker>\n                    </div>\n                </th>\n            </tr>\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\n                <th\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\n                    class=\"filter-row\"\n                    [class.active]=\"showSearchFilterRow\"\n                >\n                    <button\n                        class=\"button-ghost toggle-search-filter-row\"\n                        [class.active]=\"showSearchFilterRow\"\n                        (click)=\"toggleSearchFilterRow()\"\n                        [title]=\"'common.search-and-filter-list' | translate\"\n                    >\n                        <clr-icon shape=\"search\"></clr-icon>\n                    </button>\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\n                        <ng-container *ngIf=\"filters\">\n                            <div class=\"filters\">\n                                <vdr-data-table-filters\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\n                                    [filterWithValue]=\"activeFilter\"\n                                    [filters]=\"filters\"\n                                    class=\"mt-1\"\n                                ></vdr-data-table-filters>\n                                <vdr-data-table-filters\n                                    *ngIf=\"filters.length\"\n                                    [filters]=\"filters\"\n                                    class=\"mt-1\"\n                                ></vdr-data-table-filters>\n                            </div>\n                        </ng-container>\n                    </div>\n                </th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr\n                *ngFor=\"\n                    let item of items\n                        | paginate\n                            : {\n                                  id: id,\n                                  itemsPerPage: itemsPerPage,\n                                  currentPage: currentPage,\n                                  totalItems: totalItems\n                              };\n                    index as i;\n                    trackBy: trackByFn\n                \"\n            >\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\n                    <input\n                        type=\"checkbox\"\n                        clrCheckbox\n                        [checked]=\"selectionManager?.isSelected(item)\"\n                        (click)=\"onRowClick(item, $event)\"\n                    />\n                </td>\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\n                        <ng-container\n                            *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\n                        >\n                            <ng-container\n                                *ngComponentOutlet=\"\n                                    componentConfig.config.component;\n                                    inputs: { rowItem: item };\n                                    injector: componentConfig.injector\n                                \"\n                            ></ng-container>\n                        </ng-container>\n                        <ng-template #defaultComponent>\n                            <ng-container\n                                *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\n                            ></ng-container>\n                        </ng-template>\n                    </div>\n                </td>\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\n            </tr>\n            <ng-container>\n                <tr *ngIf=\"!items?.length\">\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\n                        <vdr-empty-placeholder [emptyStateLabel]=\"'order.order-is-empty' | translate\"></vdr-empty-placeholder>\n                    </td>\n                </tr>\n            </ng-container>\n            <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\n                <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\n                <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\n                <td class=\"align-middle\" [attr.colspan]=\"visibleSortedColumns.length - 4\"></td>\n                <td class=\"align-middle total\">\n                    {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                        {{ surcharge.price | localeCurrency : order.currencyCode }}\n                    </div>\n                </td>\n                <td><!-- column select --></td>\n            </tr>\n            <ng-container *ngFor=\"let discount of order.discounts\">\n                <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\n                    <td [attr.colspan]=\"visibleSortedColumns.length - 1\" class=\"\">\n                        <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\n                        <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\n                            couponCode\n                        }}</vdr-chip>\n                    </td>\n                    <td class=\"\">\n                        {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\n                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                            {{ discount.amount | localeCurrency : order.currencyCode }}\n                        </div>\n                    </td>\n                    <td><!-- column select --></td>\n                </tr>\n            </ng-container>\n            <tr class=\"sub-total\">\n                <td class=\"\">{{ 'order.sub-total' | translate }}</td>\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\n                <td class=\"clr-align-middle\">\n                    {{ order.subTotalWithTax | localeCurrency : order.currencyCode }}\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                        {{ order.subTotal | localeCurrency : order.currencyCode }}\n                    </div>\n                </td>\n                <td><!-- column select --></td>\n            </tr>\n            <tr class=\"shipping\">\n                <td class=\"\">{{ 'order.shipping' | translate }}</td>\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\">\n                    <vdr-chip *ngFor=\"let shippingLine of order.shippingLines\" class=\"shipping-method-name\">\n                        {{ shippingLine.shippingMethod.name }}\n                    </vdr-chip>\n                </td>\n                <td class=\"clr-align-middle\">\n                    {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                        {{ order.shipping | localeCurrency : order.currencyCode }}\n                    </div>\n                </td>\n                <td><!-- column select --></td>\n            </tr>\n            <tr class=\"total\">\n                <td class=\"\">{{ 'order.total' | translate }}</td>\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\n                <td class=\"clr-align-middle\">\n                    {{ order.totalWithTax | localeCurrency : order.currencyCode }}\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                        {{ order.total | localeCurrency : order.currencyCode }}\n                    </div>\n                </td>\n                <td><!-- column select --></td>\n            </tr>\n        </tbody>\n    </table>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}\n"] }]
+        }], propDecorators: { totalColumns: [{
+                type: ContentChildren,
+                args: [OrderTotalColumnComponent]
+            }], order: [{
+                type: Input
+            }] } });
+
+class OrderTableComponent {
+    constructor() {
+        this.isDraft = false;
+        this.adjust = new EventEmitter();
+        this.remove = new EventEmitter();
+        this.orderLineCustomFieldsVisible = false;
+        this.customFieldsForLine = {};
+    }
+    get visibleOrderLineCustomFields() {
+        return this.orderLineCustomFieldsVisible ? this.orderLineCustomFields : [];
+    }
+    get showElided() {
+        return !this.orderLineCustomFieldsVisible && 0 < this.orderLineCustomFields.length;
+    }
+    ngOnInit() {
+        this.orderLineCustomFieldsVisible = this.orderLineCustomFields.length < 2;
+        this.getLineCustomFields();
+    }
+    draftInputBlur(line, quantity) {
+        if (line.quantity !== quantity) {
+            this.adjust.emit({ lineId: line.id, quantity });
+        }
+    }
+    toggleOrderLineCustomFields() {
+        this.orderLineCustomFieldsVisible = !this.orderLineCustomFieldsVisible;
+    }
+    getLineDiscounts(line) {
+        return line.discounts.filter(a => a.type === AdjustmentType.PROMOTION);
+    }
+    getLineCustomFields() {
+        for (const line of this.order.lines) {
+            const formGroup = new UntypedFormGroup({});
+            const result = this.orderLineCustomFields
+                .map(config => {
+                const value = line.customFields[config.name];
+                formGroup.addControl(config.name, new UntypedFormControl(value));
+                return {
+                    config,
+                    formGroup,
+                    value,
+                };
+            })
+                .filter(field => (this.orderLineCustomFieldsVisible ? true : field.value != null));
+            this.customFieldsForLine[line.id] = result;
+        }
+    }
+    getPromotionLink(promotion) {
+        const id = promotion.adjustmentSource.split(':')[1];
+        return ['/marketing', 'promotions', id];
+    }
+    getCouponCodeForAdjustment(order, promotionAdjustment) {
+        const id = promotionAdjustment.adjustmentSource.split(':')[1];
+        const promotion = order.promotions.find(p => p.id === id);
+        if (promotion) {
+            return promotion.couponCode || undefined;
+        }
+    }
+    getShippingNames(order) {
+        if (order.shippingLines.length) {
+            return order.shippingLines.map(shippingLine => shippingLine.shippingMethod.name).join(', ');
+        }
+        else {
+            return '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderTableComponent, selector: "vdr-order-table", inputs: { order: "order", orderLineCustomFields: "orderLineCustomFields", isDraft: "isDraft" }, outputs: { adjust: "adjust", remove: "remove" }, ngImport: i0, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\n    <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\n        <ng-template let-line=\"item\">\n            {{ line.id }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n            id=\"created-at\"\n            [heading]=\"'common.created-at' | translate\"\n            [hiddenByDefault]=\"true\"\n    >\n        <ng-template let-line=\"item\">\n            {{ line.createdAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n            id=\"updated-at\"\n            [heading]=\"'common.updated-at' | translate\"\n            [hiddenByDefault]=\"true\"\n    >\n        <ng-template let-line=\"item\">\n            {{ line.updatedAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n        <ng-template let-line=\"item\">\n            <div class=\"image-placeholder\">\n                <img\n                    *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\n                    [src]=\"asset | assetPreview : 'tiny'\"\n                />\n                <ng-template #imagePlaceholder>\n                    <div class=\"placeholder\">\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n                    </div>\n                </ng-template>\n            </div>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.product-name' | translate\" id=\"product-name\">\n        <ng-template let-line=\"item\">\n            {{ line.productVariant.name }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.product-sku' | translate\" id=\"product-sku\" [optional]=\"false\">\n        <ng-template let-line=\"item\">\n            {{ line.productVariant.sku }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.unit-price' | translate\" id=\"unit-price\">\n        <ng-template let-line=\"item\">\n            <div class=\"unit-price\">\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                    {{ line.unitPrice | localeCurrency : order.currencyCode }}\n                </div>\n            </div>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.quantity' | translate\" id=\"quantity\" [optional]=\"false\">\n        <ng-template let-line=\"item\">\n            <ng-container *ngIf=\"!isDraft; else draft\">\n                <div class=\"flex\">\n                    <div\n                        *ngIf=\"line.orderPlacedQuantity && line.quantity !== line.orderPlacedQuantity\"\n                        class=\"order-placed-quantity\"\n                        [title]=\"'order.original-quantity-at-checkout' | translate\"\n                    >\n                        {{ line.orderPlacedQuantity }}\n                    </div>\n                    <div>{{ line.quantity }}</div>\n                </div>\n            </ng-container>\n            <ng-template #draft>\n                <div class=\"flex\">\n                    <input\n                        class=\"draft-qty\"\n                        type=\"number\"\n                        min=\"0\"\n                        #qtyInput\n                        [value]=\"line.quantity\"\n                        (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\n                    />\n                    <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\n                        <clr-icon shape=\"trash\"></clr-icon>\n                    </button>\n                </div>\n            </ng-template>\n            <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\n            <vdr-line-fulfillment\n                [line]=\"line\"\n                [orderState]=\"order.state\"\n                [allOrderFulfillments]=\"order.fulfillments\"\n            ></vdr-line-fulfillment>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-custom-field-column\n        *ngFor=\"let customField of orderLineCustomFields\"\n        [customField]=\"customField\"\n    />\n    <vdr-order-total-column [heading]=\"'order.total' | translate\" id=\"total\" [optional]=\"false\">\n        <ng-template let-line=\"item\">\n            <div class=\"unit-price\">\n                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                    {{ line.linePrice | localeCurrency : order.currencyCode }}\n                </div>\n            </div>\n\n            <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\n                <vdr-dropdown *ngIf=\"discounts.length\">\n                    <div class=\"promotions-label\" vdrDropdownTrigger>\n                        {{ 'order.promotions-applied' | translate }}\n                    </div>\n                    <vdr-dropdown-menu>\n                        <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\n                            <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\n                                discount.description\n                            }}</a>\n                            <div class=\"promotion-amount\">\n                                {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                                    {{ discount.amount | localeCurrency : order.currencyCode }}\n                                </div>\n                            </div>\n                        </div>\n                    </vdr-dropdown-menu>\n                </vdr-dropdown>\n            </ng-container>\n        </ng-template>\n    </vdr-order-total-column>\n</vdr-order-data-table>\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-inline-start:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: ["order"] }, { kind: "component", type: OrderTotalColumnComponent, selector: "vdr-order-total-column", exportAs: ["row"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-order-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\n    <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\n        <ng-template let-line=\"item\">\n            {{ line.id }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n            id=\"created-at\"\n            [heading]=\"'common.created-at' | translate\"\n            [hiddenByDefault]=\"true\"\n    >\n        <ng-template let-line=\"item\">\n            {{ line.createdAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n            id=\"updated-at\"\n            [heading]=\"'common.updated-at' | translate\"\n            [hiddenByDefault]=\"true\"\n    >\n        <ng-template let-line=\"item\">\n            {{ line.updatedAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n        <ng-template let-line=\"item\">\n            <div class=\"image-placeholder\">\n                <img\n                    *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\n                    [src]=\"asset | assetPreview : 'tiny'\"\n                />\n                <ng-template #imagePlaceholder>\n                    <div class=\"placeholder\">\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n                    </div>\n                </ng-template>\n            </div>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.product-name' | translate\" id=\"product-name\">\n        <ng-template let-line=\"item\">\n            {{ line.productVariant.name }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.product-sku' | translate\" id=\"product-sku\" [optional]=\"false\">\n        <ng-template let-line=\"item\">\n            {{ line.productVariant.sku }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.unit-price' | translate\" id=\"unit-price\">\n        <ng-template let-line=\"item\">\n            <div class=\"unit-price\">\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                    {{ line.unitPrice | localeCurrency : order.currencyCode }}\n                </div>\n            </div>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.quantity' | translate\" id=\"quantity\" [optional]=\"false\">\n        <ng-template let-line=\"item\">\n            <ng-container *ngIf=\"!isDraft; else draft\">\n                <div class=\"flex\">\n                    <div\n                        *ngIf=\"line.orderPlacedQuantity && line.quantity !== line.orderPlacedQuantity\"\n                        class=\"order-placed-quantity\"\n                        [title]=\"'order.original-quantity-at-checkout' | translate\"\n                    >\n                        {{ line.orderPlacedQuantity }}\n                    </div>\n                    <div>{{ line.quantity }}</div>\n                </div>\n            </ng-container>\n            <ng-template #draft>\n                <div class=\"flex\">\n                    <input\n                        class=\"draft-qty\"\n                        type=\"number\"\n                        min=\"0\"\n                        #qtyInput\n                        [value]=\"line.quantity\"\n                        (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\n                    />\n                    <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\n                        <clr-icon shape=\"trash\"></clr-icon>\n                    </button>\n                </div>\n            </ng-template>\n            <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\n            <vdr-line-fulfillment\n                [line]=\"line\"\n                [orderState]=\"order.state\"\n                [allOrderFulfillments]=\"order.fulfillments\"\n            ></vdr-line-fulfillment>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-custom-field-column\n        *ngFor=\"let customField of orderLineCustomFields\"\n        [customField]=\"customField\"\n    />\n    <vdr-order-total-column [heading]=\"'order.total' | translate\" id=\"total\" [optional]=\"false\">\n        <ng-template let-line=\"item\">\n            <div class=\"unit-price\">\n                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                    {{ line.linePrice | localeCurrency : order.currencyCode }}\n                </div>\n            </div>\n\n            <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\n                <vdr-dropdown *ngIf=\"discounts.length\">\n                    <div class=\"promotions-label\" vdrDropdownTrigger>\n                        {{ 'order.promotions-applied' | translate }}\n                    </div>\n                    <vdr-dropdown-menu>\n                        <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\n                            <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\n                                discount.description\n                            }}</a>\n                            <div class=\"promotion-amount\">\n                                {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                                    {{ discount.amount | localeCurrency : order.currencyCode }}\n                                </div>\n                            </div>\n                        </div>\n                    </vdr-dropdown-menu>\n                </vdr-dropdown>\n            </ng-container>\n        </ng-template>\n    </vdr-order-total-column>\n</vdr-order-data-table>\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-inline-start:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"] }]
+        }], propDecorators: { order: [{
+                type: Input
+            }], orderLineCustomFields: [{
+                type: Input
+            }], isDraft: [{
+                type: Input
+            }], adjust: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }] } });
+
+class DraftOrderVariantSelectorComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.addItem = new EventEmitter();
+        this.customFieldsFormGroup = new UntypedFormGroup({});
+        this.selectedVariantId$ = new Subject();
+        this.quantity = 1;
+    }
+    ngOnInit() {
+        this.selectedVariant$ = this.selectedVariantId$.pipe(switchMap(id => {
+            if (id) {
+                return this.dataService.product
+                    .getProductVariant(id)
+                    .mapSingle(({ productVariant }) => productVariant);
+            }
+            else {
+                return [undefined];
+            }
+        }));
+        for (const customField of this.orderLineCustomFields) {
+            this.customFieldsFormGroup.addControl(customField.name, new UntypedFormControl(''));
+        }
+    }
+    addItemClick(selectedVariant) {
+        if (selectedVariant) {
+            this.addItem.emit({
+                productVariantId: selectedVariant.id,
+                quantity: this.quantity,
+                customFields: this.orderLineCustomFields.length
+                    ? this.customFieldsFormGroup.value
+                    : undefined,
+            });
+            this.selectedVariantId$.next(undefined);
+            this.customFieldsFormGroup.reset();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DraftOrderVariantSelectorComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DraftOrderVariantSelectorComponent, selector: "vdr-draft-order-variant-selector", inputs: { currencyCode: "currencyCode", orderLineCustomFields: "orderLineCustomFields" }, outputs: { addItem: "addItem" }, ngImport: i0, template: "<div class=\"card\">\n    <div class=\"card-block\">\n        <h4 class=\"card-title\">{{ 'order.add-item-to-order' | translate }}</h4>\n        <vdr-product-variant-selector\n            (productSelected)=\"selectedVariantId$.next($event.productVariantId)\"\n        ></vdr-product-variant-selector>\n    </div>\n    <div class=\"card-block\" *ngIf=\"selectedVariant$ | async as selectedVariant\">\n        <div class=\"variant-details\">\n            <img class=\"mr-2\" [src]=\"selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32\">\n            <div class=\"details\">\n                <div>{{ selectedVariant?.name }}</div>\n                <div class=\"small\">{{ selectedVariant?.sku }}</div>\n            </div>\n            <div class=\"details ml-4\">\n                <div class=\"small\">\n                    {{ 'catalog.stock-on-hand' | translate }}: {{ selectedVariant.stockOnHand }}\n                </div>\n                <div class=\"small\">\n                    {{ 'catalog.stock-allocated' | translate }}: {{ selectedVariant.stockAllocated }}\n                </div>\n            </div>\n            <div class=\"flex-spacer\"></div>\n            <div class=\"details\">\n                <div>{{ selectedVariant?.priceWithTax | localeCurrency: currencyCode }}</div>\n                <div class=\"small\" [title]=\"'order.net-price' | translate\">\n                    {{ selectedVariant?.price | localeCurrency: currencyCode }}\n                </div>\n            </div>\n            <div>\n                <input [disabled]=\"!selectedVariant\" type=\"number\" min=\"0\" [(ngModel)]=\"quantity\" />\n            </div>\n            <button\n                [disabled]=\"!selectedVariant\"\n                class=\"btn btn-small btn-primary\"\n                (click)=\"addItemClick(selectedVariant)\"\n            >\n                {{ 'order.add-item-to-order' | translate }}\n            </button>\n        </div>\n        <ng-container *ngIf=\"orderLineCustomFields.length\">\n            <div class=\"custom-field\" *ngFor=\"let field of orderLineCustomFields\">\n                <vdr-custom-field-control\n                    [compact]=\"true\"\n                    [readonly]=\"false\"\n                    [customField]=\"field\"\n                    [customFieldsFormGroup]=\"customFieldsFormGroup\"\n                ></vdr-custom-field-control>\n            </div>\n        </ng-container>\n    </div>\n</div>\n", styles: [".variant-details{display:flex;align-items:center}.variant-details img{border-radius:var(--border-radius-img);width:32px;height:32px}.variant-details .details{font-size:.65rem;line-height:.7rem}.variant-details input{width:48px;margin:0 6px}.variant-details .small{font-size:11px;color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DraftOrderVariantSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-draft-order-variant-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card\">\n    <div class=\"card-block\">\n        <h4 class=\"card-title\">{{ 'order.add-item-to-order' | translate }}</h4>\n        <vdr-product-variant-selector\n            (productSelected)=\"selectedVariantId$.next($event.productVariantId)\"\n        ></vdr-product-variant-selector>\n    </div>\n    <div class=\"card-block\" *ngIf=\"selectedVariant$ | async as selectedVariant\">\n        <div class=\"variant-details\">\n            <img class=\"mr-2\" [src]=\"selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32\">\n            <div class=\"details\">\n                <div>{{ selectedVariant?.name }}</div>\n                <div class=\"small\">{{ selectedVariant?.sku }}</div>\n            </div>\n            <div class=\"details ml-4\">\n                <div class=\"small\">\n                    {{ 'catalog.stock-on-hand' | translate }}: {{ selectedVariant.stockOnHand }}\n                </div>\n                <div class=\"small\">\n                    {{ 'catalog.stock-allocated' | translate }}: {{ selectedVariant.stockAllocated }}\n                </div>\n            </div>\n            <div class=\"flex-spacer\"></div>\n            <div class=\"details\">\n                <div>{{ selectedVariant?.priceWithTax | localeCurrency: currencyCode }}</div>\n                <div class=\"small\" [title]=\"'order.net-price' | translate\">\n                    {{ selectedVariant?.price | localeCurrency: currencyCode }}\n                </div>\n            </div>\n            <div>\n                <input [disabled]=\"!selectedVariant\" type=\"number\" min=\"0\" [(ngModel)]=\"quantity\" />\n            </div>\n            <button\n                [disabled]=\"!selectedVariant\"\n                class=\"btn btn-small btn-primary\"\n                (click)=\"addItemClick(selectedVariant)\"\n            >\n                {{ 'order.add-item-to-order' | translate }}\n            </button>\n        </div>\n        <ng-container *ngIf=\"orderLineCustomFields.length\">\n            <div class=\"custom-field\" *ngFor=\"let field of orderLineCustomFields\">\n                <vdr-custom-field-control\n                    [compact]=\"true\"\n                    [readonly]=\"false\"\n                    [customField]=\"field\"\n                    [customFieldsFormGroup]=\"customFieldsFormGroup\"\n                ></vdr-custom-field-control>\n            </div>\n        </ng-container>\n    </div>\n</div>\n", styles: [".variant-details{display:flex;align-items:center}.variant-details img{border-radius:var(--border-radius-img);width:32px;height:32px}.variant-details .details{font-size:.65rem;line-height:.7rem}.variant-details input{width:48px;margin:0 6px}.variant-details .small{font-size:11px;color:var(--color-text-300)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DataService }], propDecorators: { currencyCode: [{
+                type: Input
+            }], orderLineCustomFields: [{
+                type: Input
+            }], addItem: [{
+                type: Output
+            }] } });
+
+class DraftOrderDetailComponent extends TypedBaseDetailComponent {
+    constructor(changeDetector, dataService, notificationService, modalService, orderTransitionService) {
+        super();
+        this.changeDetector = changeDetector;
+        this.dataService = dataService;
+        this.notificationService = notificationService;
+        this.modalService = modalService;
+        this.orderTransitionService = orderTransitionService;
+        this.customFields = this.getCustomFieldConfig('Order');
+        this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
+        this.detailForm = new UntypedFormGroup({});
+        this.fetchHistory = new Subject();
+        this.displayCouponCodeInput = false;
+    }
+    ngOnInit() {
+        this.init();
+        this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
+        this.eligibleShippingMethods$ = this.entity$.pipe(switchMap(order => this.dataService.order
+            .getDraftOrderEligibleShippingMethods(order.id)
+            .mapSingle(({ eligibleShippingMethodsForDraftOrder }) => eligibleShippingMethodsForDraftOrder)));
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    addItemToOrder(event) {
+        this.dataService.order.addItemToDraftOrder(this.id, event).subscribe(result => {
+            if (result.addItemToDraftOrder.__typename !== 'Order') {
+                this.notificationService.error(result.addItemToDraftOrder.message);
+            }
+        });
+    }
+    adjustOrderLine(event) {
+        this.dataService.order
+            .adjustDraftOrderLine(this.id, { orderLineId: event.lineId, quantity: event.quantity })
+            .subscribe(result => {
+            if (result.adjustDraftOrderLine.__typename !== 'Order') {
+                this.notificationService.error(result.adjustDraftOrderLine.message);
+            }
+        });
+    }
+    removeOrderLine(event) {
+        this.dataService.order.removeDraftOrderLine(this.id, event.lineId).subscribe(result => {
+            if (result.removeDraftOrderLine.__typename !== 'Order') {
+                this.notificationService.error(result.removeDraftOrderLine.message);
+            }
+        });
+    }
+    getOrderAddressLines(orderAddress) {
+        if (!orderAddress) {
+            return [];
+        }
+        return Object.values(orderAddress)
+            .filter(val => val !== 'OrderAddress')
+            .filter(line => !!line);
+    }
+    setCustomer() {
+        this.modalService.fromComponent(SelectCustomerDialogComponent).subscribe(result => {
+            if (this.hasId(result)) {
+                this.dataService.order
+                    .setCustomerForDraftOrder(this.id, { customerId: result.id })
+                    .subscribe();
+            }
+            else if (result) {
+                const { note, ...input } = result;
+                this.dataService.order.setCustomerForDraftOrder(this.id, { input }).subscribe();
+            }
+        });
+    }
+    setShippingAddress() {
+        this.entity$
+            .pipe(take(1), switchMap(order => this.modalService.fromComponent(SelectAddressDialogComponent, {
+            locals: {
+                customerId: order.customer?.id,
+                currentAddress: order.shippingAddress ?? undefined,
+            },
+        })))
+            .subscribe(result => {
+            if (result) {
+                this.dataService.order.setDraftOrderShippingAddress(this.id, result).subscribe();
+            }
+        });
+    }
+    setBillingAddress() {
+        this.entity$
+            .pipe(take(1), switchMap(order => this.modalService.fromComponent(SelectAddressDialogComponent, {
+            locals: {
+                customerId: order.customer?.id,
+                currentAddress: order.billingAddress ?? undefined,
+            },
+        })))
+            .subscribe(result => {
+            if (result) {
+                this.dataService.order.setDraftOrderBillingAddress(this.id, result).subscribe();
+            }
+        });
+    }
+    applyCouponCode(couponCode) {
+        this.dataService.order.applyCouponCodeToDraftOrder(this.id, couponCode).subscribe();
+    }
+    removeCouponCode(couponCode) {
+        this.dataService.order.removeCouponCodeFromDraftOrder(this.id, couponCode).subscribe();
+    }
+    setShippingMethod() {
+        combineLatest(this.entity$, this.eligibleShippingMethods$)
+            .pipe(take(1), switchMap(([order, methods]) => this.modalService.fromComponent(SelectShippingMethodDialogComponent, {
+            locals: {
+                eligibleShippingMethods: methods,
+                currencyCode: order.currencyCode,
+                currentSelectionId: order.shippingLines?.[0]?.shippingMethod.id,
+            },
+        })))
+            .subscribe(result => {
+            if (result) {
+                this.dataService.order.setDraftOrderShippingMethod(this.id, result).subscribe();
+            }
+        });
+    }
+    updateCustomFields(customFieldsValue) {
+        this.dataService.order
+            .updateOrderCustomFields({
+            id: this.id,
+            customFields: customFieldsValue,
+        })
+            .subscribe();
+    }
+    deleteOrder() {
+        this.dataService.order.deleteDraftOrder(this.id).subscribe(({ deleteDraftOrder }) => {
+            if (deleteDraftOrder.result === DeletionResult.DELETED) {
+                this.notificationService.success(marker('common.notify-delete-success'), {
+                    entity: 'Order',
+                });
+                this.router.navigate(['/orders']);
+            }
+            else if (deleteDraftOrder.message) {
+                this.notificationService.error(deleteDraftOrder.message);
+            }
+        });
+    }
+    completeOrder() {
+        this.dataService.order
+            .transitionToState(this.id, 'ArrangingPayment')
+            .subscribe(({ transitionOrderToState }) => {
+            if (transitionOrderToState?.__typename === 'Order') {
+                this.router.navigate(['/orders', this.id]);
+            }
+            else if (transitionOrderToState?.__typename === 'OrderStateTransitionError') {
+                this.notificationService.error(transitionOrderToState.transitionError);
+            }
+        });
+    }
+    hasId(input) {
+        return typeof input === 'object' && !!input.id;
+    }
+    setFormValues(entity) {
+        // empty
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DraftOrderDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: OrderTransitionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DraftOrderDetailComponent, selector: "vdr-draft-order-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\n        <vdr-ab-left>\n            <div class=\"flex clr-align-items-center\">\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\n            </div>\n        </vdr-ab-left>\n\n        <vdr-ab-right>\n            <vdr-action-bar-items locationId=\"draft-order-detail\" />\n            <button\n                class=\"btn btn-primary\"\n                (click)=\"completeOrder()\"\n                [disabled]=\"!order.customer || !order.lines.length || !order.shippingLines.length\"\n            >\n                <clr-icon shape=\"check\"></clr-icon>\n                {{ 'order.complete-draft-order' | translate }}\n            </button>\n            <vdr-action-bar-dropdown-menu [alwaysShow]=\"true\" locationId=\"draft-order-detail\">\n                <button type=\"button\" vdrDropdownItem (click)=\"deleteOrder()\">\n                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n                    {{ 'order.delete-draft-order' | translate }}\n                </button>\n            </vdr-action-bar-dropdown-menu>\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n\n<vdr-page-detail-layout *ngIf=\"entity$ | async as order\">\n    <vdr-page-detail-sidebar>\n        <vdr-card [title]=\"'order.customer' | translate\">\n            <ng-template vdrCardControls>\n                <clr-icon *ngIf=\"!order.customer\" shape=\"unknown-status\" class=\"is-warning\"></clr-icon>\n                <clr-icon *ngIf=\"order.customer\" shape=\"check\" class=\"is-success\"></clr-icon>\n            </ng-template>\n            <vdr-customer-label\n                class=\"block mb-2\"\n                *ngIf=\"order.customer\"\n                [customer]=\"order.customer\"\n            ></vdr-customer-label>\n            <button class=\"button-small\" (click)=\"setCustomer()\">\n                {{ 'order.set-customer-for-order' | translate }}\n            </button>\n        </vdr-card>\n        <vdr-card [title]=\"'order.billing-address' | translate\">\n            <ng-template vdrCardControls>\n                <clr-icon\n                    *ngIf=\"!order.billingAddress.streetLine1\"\n                    shape=\"unknown-status\"\n                    class=\"is-warning\"\n                ></clr-icon>\n                <clr-icon\n                    *ngIf=\"order.billingAddress.streetLine1\"\n                    shape=\"check\"\n                    class=\"is-success\"\n                ></clr-icon>\n            </ng-template>\n            <vdr-formatted-address\n                class=\"block mb-2\"\n                *ngIf=\"order.billingAddress\"\n                [address]=\"order.billingAddress\"\n            ></vdr-formatted-address>\n            <button class=\"button-small\" (click)=\"setBillingAddress()\">\n                {{ 'order.set-billing-address' | translate }}\n            </button>\n        </vdr-card>\n        <vdr-card [title]=\"'order.shipping' | translate\">\n            <ng-template vdrCardControls>\n                <clr-icon\n                    *ngIf=\"!order.shippingAddress.streetLine1 || !order.shippingLines.length\"\n                    shape=\"unknown-status\"\n                    class=\"is-warning\"\n                ></clr-icon>\n                <clr-icon\n                    *ngIf=\"order.shippingAddress.streetLine1 && order.shippingLines.length\"\n                    shape=\"check\"\n                    class=\"is-success\"\n                ></clr-icon>\n            </ng-template>\n            <vdr-formatted-address\n                class=\"block mb-2\"\n                *ngIf=\"order.shippingAddress\"\n                [address]=\"order.shippingAddress\"\n            ></vdr-formatted-address>\n            <button class=\"button-small mr-2\" (click)=\"setShippingAddress()\">\n                {{ 'order.set-shipping-address' | translate }}\n            </button>\n\n            <div *ngFor=\"let shippingLine of order.shippingLines\">\n                {{ shippingLine.shippingMethod.name }}\n            </div>\n            <button class=\"button-small\" (click)=\"setShippingMethod()\">\n                {{ 'order.set-shipping-method' | translate }}\n            </button>\n        </vdr-card>\n        <vdr-card>\n            <button\n                *ngIf=\"order.couponCodes.length === 0 && !displayCouponCodeInput\"\n                class=\"button-small\"\n                (click)=\"displayCouponCodeInput = !displayCouponCodeInput\"\n            >\n                {{ 'order.set-coupon-codes' | translate }}\n            </button>\n            <div *ngIf=\"order.couponCodes.length || displayCouponCodeInput\">\n                <label>{{ 'order.set-coupon-codes' | translate }}</label>\n                <vdr-coupon-code-selector\n                    [couponCodes]=\"order.couponCodes\"\n                    (addCouponCode)=\"applyCouponCode($event)\"\n                    (removeCouponCode)=\"removeCouponCode($event)\"\n                ></vdr-coupon-code-selector>\n            </div>\n        </vdr-card>\n        <vdr-card>\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\n        </vdr-card>\n    </vdr-page-detail-sidebar>\n    <vdr-page-block>\n        <vdr-card>\n            <vdr-draft-order-variant-selector\n                [orderLineCustomFields]=\"orderLineCustomFields\"\n                [currencyCode]=\"order.currencyCode\"\n                (addItem)=\"addItemToOrder($event)\"\n            ></vdr-draft-order-variant-selector>\n            <vdr-order-table\n                [order]=\"order\"\n                [orderLineCustomFields]=\"orderLineCustomFields\"\n                [isDraft]=\"true\"\n                (adjust)=\"adjustOrderLine($event)\"\n                (remove)=\"removeOrderLine($event)\"\n            ></vdr-order-table>\n        </vdr-card>\n        <vdr-card [title]=\"'order.tax-summary' | translate\">\n            <ng-container *ngIf=\"order.taxSummary.length\">\n                <table class=\"table\">\n                    <thead>\n                        <tr>\n                            <th>{{ 'common.description' | translate }}</th>\n                            <th>{{ 'order.tax-rate' | translate }}</th>\n                            <th>{{ 'order.tax-base' | translate }}</th>\n                            <th>{{ 'order.tax-total' | translate }}</th>\n                        </tr>\n                    </thead>\n                    <tbody>\n                        <tr *ngFor=\"let row of order.taxSummary\">\n                            <td>{{ row.description }}</td>\n                            <td>{{ row.taxRate / 100 | percent }}</td>\n                            <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\n                            <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\n                        </tr>\n                    </tbody>\n                </table>\n            </ng-container>\n        </vdr-card>\n        <vdr-custom-detail-component-host\n            locationId=\"draft-order-detail\"\n            [entity$]=\"entity$\"\n            [detailForm]=\"detailForm\"\n        ></vdr-custom-detail-component-host>\n\n        <vdr-order-custom-fields-card\n            [customFieldsConfig]=\"customFields\"\n            [customFieldValues]=\"order.customFields\"\n            (updateClick)=\"updateCustomFields($event)\"\n        ></vdr-order-custom-fields-card>\n    </vdr-page-block>\n</vdr-page-detail-layout>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "component", type: OrderCustomFieldsCardComponent, selector: "vdr-order-custom-fields-card", inputs: ["customFieldsConfig", "customFieldValues"], outputs: ["updateClick"] }, { kind: "component", type: OrderTableComponent, selector: "vdr-order-table", inputs: ["order", "orderLineCustomFields", "isDraft"], outputs: ["adjust", "remove"] }, { kind: "component", type: DraftOrderVariantSelectorComponent, selector: "vdr-draft-order-variant-selector", inputs: ["currencyCode", "orderLineCustomFields"], outputs: ["addItem"] }, { kind: "component", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: ["couponCodes", "control"], outputs: ["addCouponCode", "removeCouponCode"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DraftOrderDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-draft-order-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\n        <vdr-ab-left>\n            <div class=\"flex clr-align-items-center\">\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\n            </div>\n        </vdr-ab-left>\n\n        <vdr-ab-right>\n            <vdr-action-bar-items locationId=\"draft-order-detail\" />\n            <button\n                class=\"btn btn-primary\"\n                (click)=\"completeOrder()\"\n                [disabled]=\"!order.customer || !order.lines.length || !order.shippingLines.length\"\n            >\n                <clr-icon shape=\"check\"></clr-icon>\n                {{ 'order.complete-draft-order' | translate }}\n            </button>\n            <vdr-action-bar-dropdown-menu [alwaysShow]=\"true\" locationId=\"draft-order-detail\">\n                <button type=\"button\" vdrDropdownItem (click)=\"deleteOrder()\">\n                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n                    {{ 'order.delete-draft-order' | translate }}\n                </button>\n            </vdr-action-bar-dropdown-menu>\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n\n<vdr-page-detail-layout *ngIf=\"entity$ | async as order\">\n    <vdr-page-detail-sidebar>\n        <vdr-card [title]=\"'order.customer' | translate\">\n            <ng-template vdrCardControls>\n                <clr-icon *ngIf=\"!order.customer\" shape=\"unknown-status\" class=\"is-warning\"></clr-icon>\n                <clr-icon *ngIf=\"order.customer\" shape=\"check\" class=\"is-success\"></clr-icon>\n            </ng-template>\n            <vdr-customer-label\n                class=\"block mb-2\"\n                *ngIf=\"order.customer\"\n                [customer]=\"order.customer\"\n            ></vdr-customer-label>\n            <button class=\"button-small\" (click)=\"setCustomer()\">\n                {{ 'order.set-customer-for-order' | translate }}\n            </button>\n        </vdr-card>\n        <vdr-card [title]=\"'order.billing-address' | translate\">\n            <ng-template vdrCardControls>\n                <clr-icon\n                    *ngIf=\"!order.billingAddress.streetLine1\"\n                    shape=\"unknown-status\"\n                    class=\"is-warning\"\n                ></clr-icon>\n                <clr-icon\n                    *ngIf=\"order.billingAddress.streetLine1\"\n                    shape=\"check\"\n                    class=\"is-success\"\n                ></clr-icon>\n            </ng-template>\n            <vdr-formatted-address\n                class=\"block mb-2\"\n                *ngIf=\"order.billingAddress\"\n                [address]=\"order.billingAddress\"\n            ></vdr-formatted-address>\n            <button class=\"button-small\" (click)=\"setBillingAddress()\">\n                {{ 'order.set-billing-address' | translate }}\n            </button>\n        </vdr-card>\n        <vdr-card [title]=\"'order.shipping' | translate\">\n            <ng-template vdrCardControls>\n                <clr-icon\n                    *ngIf=\"!order.shippingAddress.streetLine1 || !order.shippingLines.length\"\n                    shape=\"unknown-status\"\n                    class=\"is-warning\"\n                ></clr-icon>\n                <clr-icon\n                    *ngIf=\"order.shippingAddress.streetLine1 && order.shippingLines.length\"\n                    shape=\"check\"\n                    class=\"is-success\"\n                ></clr-icon>\n            </ng-template>\n            <vdr-formatted-address\n                class=\"block mb-2\"\n                *ngIf=\"order.shippingAddress\"\n                [address]=\"order.shippingAddress\"\n            ></vdr-formatted-address>\n            <button class=\"button-small mr-2\" (click)=\"setShippingAddress()\">\n                {{ 'order.set-shipping-address' | translate }}\n            </button>\n\n            <div *ngFor=\"let shippingLine of order.shippingLines\">\n                {{ shippingLine.shippingMethod.name }}\n            </div>\n            <button class=\"button-small\" (click)=\"setShippingMethod()\">\n                {{ 'order.set-shipping-method' | translate }}\n            </button>\n        </vdr-card>\n        <vdr-card>\n            <button\n                *ngIf=\"order.couponCodes.length === 0 && !displayCouponCodeInput\"\n                class=\"button-small\"\n                (click)=\"displayCouponCodeInput = !displayCouponCodeInput\"\n            >\n                {{ 'order.set-coupon-codes' | translate }}\n            </button>\n            <div *ngIf=\"order.couponCodes.length || displayCouponCodeInput\">\n                <label>{{ 'order.set-coupon-codes' | translate }}</label>\n                <vdr-coupon-code-selector\n                    [couponCodes]=\"order.couponCodes\"\n                    (addCouponCode)=\"applyCouponCode($event)\"\n                    (removeCouponCode)=\"removeCouponCode($event)\"\n                ></vdr-coupon-code-selector>\n            </div>\n        </vdr-card>\n        <vdr-card>\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\n        </vdr-card>\n    </vdr-page-detail-sidebar>\n    <vdr-page-block>\n        <vdr-card>\n            <vdr-draft-order-variant-selector\n                [orderLineCustomFields]=\"orderLineCustomFields\"\n                [currencyCode]=\"order.currencyCode\"\n                (addItem)=\"addItemToOrder($event)\"\n            ></vdr-draft-order-variant-selector>\n            <vdr-order-table\n                [order]=\"order\"\n                [orderLineCustomFields]=\"orderLineCustomFields\"\n                [isDraft]=\"true\"\n                (adjust)=\"adjustOrderLine($event)\"\n                (remove)=\"removeOrderLine($event)\"\n            ></vdr-order-table>\n        </vdr-card>\n        <vdr-card [title]=\"'order.tax-summary' | translate\">\n            <ng-container *ngIf=\"order.taxSummary.length\">\n                <table class=\"table\">\n                    <thead>\n                        <tr>\n                            <th>{{ 'common.description' | translate }}</th>\n                            <th>{{ 'order.tax-rate' | translate }}</th>\n                            <th>{{ 'order.tax-base' | translate }}</th>\n                            <th>{{ 'order.tax-total' | translate }}</th>\n                        </tr>\n                    </thead>\n                    <tbody>\n                        <tr *ngFor=\"let row of order.taxSummary\">\n                            <td>{{ row.description }}</td>\n                            <td>{{ row.taxRate / 100 | percent }}</td>\n                            <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\n                            <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\n                        </tr>\n                    </tbody>\n                </table>\n            </ng-container>\n        </vdr-card>\n        <vdr-custom-detail-component-host\n            locationId=\"draft-order-detail\"\n            [entity$]=\"entity$\"\n            [detailForm]=\"detailForm\"\n        ></vdr-custom-detail-component-host>\n\n        <vdr-order-custom-fields-card\n            [customFieldsConfig]=\"customFields\"\n            [customFieldValues]=\"order.customFields\"\n            (updateClick)=\"updateCustomFields($event)\"\n        ></vdr-order-custom-fields-card>\n    </vdr-page-block>\n</vdr-page-detail-layout>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i1.NotificationService }, { type: i1.ModalService }, { type: OrderTransitionService }] });
+
+class FulfillOrderDialogComponent {
+    constructor(dataService, changeDetector) {
+        this.dataService = dataService;
+        this.changeDetector = changeDetector;
+        this.fulfillmentHandlerControl = new UntypedFormControl();
+        this.fulfillmentQuantities = {};
+    }
+    ngOnInit() {
+        this.dataService.settings.getGlobalSettings().single$.subscribe(({ globalSettings }) => {
+            this.fulfillmentQuantities = this.order.lines.reduce((result, line) => {
+                const fulfillCount = this.getFulfillableCount(line, globalSettings.trackInventory);
+                return {
+                    ...result,
+                    [line.id]: { fulfillCount, max: fulfillCount },
+                };
+            }, {});
+            this.changeDetector.markForCheck();
+        });
+        this.dataService.shippingMethod
+            .getShippingMethodOperations()
+            .mapSingle(data => data.fulfillmentHandlers)
+            .subscribe(handlers => {
+            this.fulfillmentHandlerDef =
+                handlers.find(h => h.code === this.order.shippingLines[0]?.shippingMethod?.fulfillmentHandlerCode) || handlers[0];
+            this.fulfillmentHandler = configurableDefinitionToInstance(this.fulfillmentHandlerDef);
+            this.fulfillmentHandlerControl.patchValue(this.fulfillmentHandler);
+            this.changeDetector.markForCheck();
+        });
+    }
+    getFulfillableCount(line, globalTrackInventory) {
+        const { trackInventory, stockOnHand } = line.productVariant;
+        const effectiveTracInventory = trackInventory === GlobalFlag.INHERIT ? globalTrackInventory : trackInventory === GlobalFlag.TRUE;
+        const unfulfilledCount = this.getUnfulfilledCount(line);
+        return effectiveTracInventory ? Math.min(unfulfilledCount, stockOnHand) : unfulfilledCount;
+    }
+    getUnfulfilledCount(line) {
+        const fulfilled = this.order.fulfillments
+            ?.filter(f => f.state !== 'Cancelled')
+            .map(f => f.lines)
+            .flat()
+            .filter(row => row.orderLineId === line.id)
+            .reduce((sum, row) => sum + row.quantity, 0) ?? 0;
+        return line.quantity - fulfilled;
+    }
+    canSubmit() {
+        const totalCount = Object.values(this.fulfillmentQuantities).reduce((total, { fulfillCount }) => total + fulfillCount, 0);
+        const fulfillmentQuantityIsValid = Object.values(this.fulfillmentQuantities).every(({ fulfillCount, max }) => fulfillCount <= max);
+        const formIsValid = configurableOperationValueIsValid(this.fulfillmentHandlerDef, this.fulfillmentHandlerControl.value) && this.fulfillmentHandlerControl.valid;
+        return formIsValid && 0 < totalCount && fulfillmentQuantityIsValid;
+    }
+    select() {
+        const lines = Object.entries(this.fulfillmentQuantities).map(([orderLineId, { fulfillCount }]) => ({
+            orderLineId,
+            quantity: fulfillCount,
+        }));
+        this.resolveWith({
+            lines,
+            handler: toConfigurableOperationInput(this.fulfillmentHandler, this.fulfillmentHandlerControl.value),
+        });
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FulfillOrderDialogComponent, deps: [{ token: i1.DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FulfillOrderDialogComponent, selector: "vdr-fulfill-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\n\n<div class=\"fulfillment-wrapper\">\n    <div class=\"order-table\">\n        <table class=\"table\">\n            <thead>\n                <tr>\n                    <th></th>\n                    <th>{{ 'order.product-name' | translate }}</th>\n                    <th>{{ 'order.product-sku' | translate }}</th>\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\n                    <th>{{ 'order.fulfill' | translate }}</th>\n                </tr>\n            </thead>\n            <tr\n                *ngFor=\"let line of order.lines\"\n                class=\"order-line\"\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\n            >\n                <td class=\"align-middle thumb\">\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\n                </td>\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\n                <td class=\"align-middle fulfil\">\n                    <input\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\n                        type=\"number\"\n                        [max]=\"fulfillmentQuantities[line.id].max\"\n                        min=\"0\"\n                    />\n                </td>\n            </tr>\n        </table>\n    </div>\n    <div class=\"shipping-details\">\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\n        <vdr-configurable-input\n            [operationDefinition]=\"fulfillmentHandlerDef\"\n            [operation]=\"fulfillmentHandler\"\n            [formControl]=\"fulfillmentHandlerControl\"\n            [removable]=\"false\"\n        ></vdr-configurable-input>\n    </div>\n</div>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\n        {{ 'order.create-fulfillment' | translate }}\n    </button>\n</ng-template>\n", styles: [":host{height:100%;display:flex;min-height:64vh}:host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}.fulfillment-wrapper .shipping-details{margin-top:24px}@media screen and (min-width: 768px){.fulfillment-wrapper .shipping-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position", "hideDescription"], outputs: ["remove"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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>\n\n<div class=\"fulfillment-wrapper\">\n    <div class=\"order-table\">\n        <table class=\"table\">\n            <thead>\n                <tr>\n                    <th></th>\n                    <th>{{ 'order.product-name' | translate }}</th>\n                    <th>{{ 'order.product-sku' | translate }}</th>\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\n                    <th>{{ 'order.fulfill' | translate }}</th>\n                </tr>\n            </thead>\n            <tr\n                *ngFor=\"let line of order.lines\"\n                class=\"order-line\"\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\n            >\n                <td class=\"align-middle thumb\">\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\n                </td>\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\n                <td class=\"align-middle fulfil\">\n                    <input\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\n                        type=\"number\"\n                        [max]=\"fulfillmentQuantities[line.id].max\"\n                        min=\"0\"\n                    />\n                </td>\n            </tr>\n        </table>\n    </div>\n    <div class=\"shipping-details\">\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\n        <vdr-configurable-input\n            [operationDefinition]=\"fulfillmentHandlerDef\"\n            [operation]=\"fulfillmentHandler\"\n            [formControl]=\"fulfillmentHandlerControl\"\n            [removable]=\"false\"\n        ></vdr-configurable-input>\n    </div>\n</div>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\n        {{ 'order.create-fulfillment' | translate }}\n    </button>\n</ng-template>\n", styles: [":host{height:100%;display:flex;min-height:64vh}:host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}.fulfillment-wrapper .shipping-details{margin-top:24px}@media screen and (min-width: 768px){.fulfillment-wrapper .shipping-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DataService }, { type: i0.ChangeDetectorRef }] });
+
+class SimpleItemListComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SimpleItemListComponent, selector: "vdr-simple-item-list", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"items-list\">\n    <ul>\n        <li *ngFor=\"let item of items\" [title]=\"item.name\">\n            <div class=\"quantity\" *ngIf=\"item.quantity != null\">{{ item.quantity }}</div>\n            <clr-icon shape=\"times\" size=\"12\" *ngIf=\"item.quantity != null\"></clr-icon>\n            {{ item.name }}\n        </li>\n    </ul>\n</div>\n", styles: [".items-list{font-size:12px}.items-list ul{margin-top:6px;list-style-type:none;margin-inline-start:2px}.items-list ul li{line-height:14px;text-overflow:ellipsis;overflow:hidden}.items-list .quantity{min-width:16px;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleItemListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-simple-item-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"items-list\">\n    <ul>\n        <li *ngFor=\"let item of items\" [title]=\"item.name\">\n            <div class=\"quantity\" *ngIf=\"item.quantity != null\">{{ item.quantity }}</div>\n            <clr-icon shape=\"times\" size=\"12\" *ngIf=\"item.quantity != null\"></clr-icon>\n            {{ item.name }}\n        </li>\n    </ul>\n</div>\n", styles: [".items-list{font-size:12px}.items-list ul{margin-top:6px;list-style-type:none;margin-inline-start:2px}.items-list ul li{line-height:14px;text-overflow:ellipsis;overflow:hidden}.items-list .quantity{min-width:16px;display:inline-block}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }] } });
+
+class FulfillmentDetailComponent {
+    constructor(serverConfigService) {
+        this.serverConfigService = serverConfigService;
+        this.customFieldConfig = [];
+        this.customFieldFormGroup = new UntypedFormGroup({});
+    }
+    ngOnInit() {
+        this.customFieldConfig = this.serverConfigService.getCustomFieldsFor('Fulfillment');
+    }
+    ngOnChanges(changes) {
+        this.buildCustomFieldsFormGroup();
+    }
+    get fulfillment() {
+        return this.order.fulfillments && this.order.fulfillments.find(f => f.id === this.fulfillmentId);
+    }
+    get items() {
+        return (this.fulfillment?.lines.map(row => ({
+            name: this.order.lines.find(line => line.id === row.orderLineId)?.productVariant.name ?? '',
+            quantity: row.quantity,
+        })) ?? []);
+    }
+    buildCustomFieldsFormGroup() {
+        const customFields = this.fulfillment.customFields;
+        for (const fieldDef of this.serverConfigService.getCustomFieldsFor('Fulfillment')) {
+            this.customFieldFormGroup.addControl(fieldDef.name, new UntypedFormControl(customFields[fieldDef.name]));
+        }
+    }
+    customFieldIsObject(customField) {
+        return Array.isArray(customField) || isObject(customField);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FulfillmentDetailComponent, deps: [{ token: i1.ServerConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FulfillmentDetailComponent, selector: "vdr-fulfillment-detail", inputs: { fulfillmentId: "fulfillmentId", order: "order" }, usesOnChanges: true, ngImport: i0, template: "<vdr-labeled-data [label]=\"'common.created-at' | translate\">\n    {{ fulfillment?.createdAt | localeDate: 'medium' }}\n</vdr-labeled-data>\n<vdr-labeled-data [label]=\"'order.fulfillment-method' | translate\">\n    {{ fulfillment?.method }}\n</vdr-labeled-data>\n<vdr-labeled-data *ngIf=\"fulfillment?.trackingCode\" [label]=\"'order.tracking-code' | translate\">\n    {{ fulfillment?.trackingCode }}\n</vdr-labeled-data>\n<vdr-labeled-data [label]=\"'order.contents' | translate\">\n    <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\n</vdr-labeled-data>\n<ng-container *ngFor=\"let customField of customFieldConfig\">\n    <vdr-custom-field-control\n        *ngIf=\"customFieldFormGroup.get(customField.name)\"\n        [readonly]=\"true\"\n        [compact]=\"true\"\n        [customField]=\"customField\"\n        [customFieldsFormGroup]=\"customFieldFormGroup\"\n    ></vdr-custom-field-control>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: SimpleItemListComponent, selector: "vdr-simple-item-list", inputs: ["items"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FulfillmentDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-fulfillment-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-labeled-data [label]=\"'common.created-at' | translate\">\n    {{ fulfillment?.createdAt | localeDate: 'medium' }}\n</vdr-labeled-data>\n<vdr-labeled-data [label]=\"'order.fulfillment-method' | translate\">\n    {{ fulfillment?.method }}\n</vdr-labeled-data>\n<vdr-labeled-data *ngIf=\"fulfillment?.trackingCode\" [label]=\"'order.tracking-code' | translate\">\n    {{ fulfillment?.trackingCode }}\n</vdr-labeled-data>\n<vdr-labeled-data [label]=\"'order.contents' | translate\">\n    <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\n</vdr-labeled-data>\n<ng-container *ngFor=\"let customField of customFieldConfig\">\n    <vdr-custom-field-control\n        *ngIf=\"customFieldFormGroup.get(customField.name)\"\n        [readonly]=\"true\"\n        [compact]=\"true\"\n        [customField]=\"customField\"\n        [customFieldsFormGroup]=\"customFieldFormGroup\"\n    ></vdr-custom-field-control>\n</ng-container>\n" }]
+        }], ctorParameters: () => [{ type: i1.ServerConfigService }], propDecorators: { fulfillmentId: [{
+                type: Input
+            }], order: [{
+                type: Input
+            }] } });
+
+class FulfillmentStateLabelComponent {
+    get chipColorType() {
+        switch (this.state) {
+            case 'Pending':
+            case 'Shipped':
+                return 'warning';
+            case 'Delivered':
+                return 'success';
+            case 'Cancelled':
+                return 'error';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FulfillmentStateLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FulfillmentStateLabelComponent, selector: "vdr-fulfillment-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Delivered'\"></clr-icon>\n    {{ state | stateI18nToken | translate }}\n</vdr-chip>\n", styles: [":host{font-size:14px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FulfillmentStateLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-fulfillment-state-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Delivered'\"></clr-icon>\n    {{ state | stateI18nToken | translate }}\n</vdr-chip>\n", styles: [":host{font-size:14px}\n"] }]
+        }], propDecorators: { state: [{
+                type: Input
+            }] } });
+
+class FulfillmentCardComponent {
+    constructor() {
+        this.transitionState = new EventEmitter();
+    }
+    nextSuggestedState() {
+        if (!this.fulfillment) {
+            return;
+        }
+        const { nextStates } = this.fulfillment;
+        const namedStateOrDefault = (targetState) => nextStates.includes(targetState) ? targetState : nextStates[0];
+        switch (this.fulfillment?.state) {
+            case 'Pending':
+                return namedStateOrDefault('Shipped');
+            case 'Shipped':
+                return namedStateOrDefault('Delivered');
+            default:
+                return nextStates.find(s => s !== 'Cancelled');
+        }
+    }
+    nextOtherStates() {
+        if (!this.fulfillment) {
+            return [];
+        }
+        const suggested = this.nextSuggestedState();
+        return this.fulfillment.nextStates.filter(s => s !== suggested);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FulfillmentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FulfillmentCardComponent, selector: "vdr-fulfillment-card", inputs: { fulfillment: "fulfillment", order: "order" }, outputs: { transitionState: "transitionState" }, ngImport: i0, template: "<div class=\"card\">\n    <div class=\"card-header fulfillment-header\">\n        <div>{{ 'order.fulfillment' | translate }}</div>\n        <div class=\"fulfillment-state\">\n            <vdr-fulfillment-state-label [state]=\"fulfillment?.state\"></vdr-fulfillment-state-label>\n        </div>\n    </div>\n    <div class=\"card-block\">\n        <vdr-fulfillment-detail\n            *ngIf=\"!!fulfillment\"\n            [fulfillmentId]=\"fulfillment?.id\"\n            [order]=\"order\"\n        ></vdr-fulfillment-detail>\n    </div>\n    <div class=\"card-footer\" *ngIf=\"fulfillment?.nextStates.length\">\n        <ng-container *ngIf=\"nextSuggestedState() as suggestedState\">\n            <button class=\"btn btn-sm btn-primary\" (click)=\"transitionState.emit(suggestedState)\">\n                {{ 'order.set-fulfillment-state' | translate: { state: (suggestedState | stateI18nToken | translate) } }}\n            </button>\n        </ng-container>\n        <vdr-dropdown>\n            <button class=\"icon-button\" vdrDropdownTrigger>\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n            </button>\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\n                    <button\n                        type=\"button\"\n                        vdrDropdownItem\n                        (click)=\"transitionState.emit(nextState)\"\n                    >\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\n                            {{ 'order.transition-to-state' | translate: { state: (nextState | stateI18nToken | translate) } }}\n                        </ng-container>\n                        <ng-template #cancel>\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\n                            {{ 'order.cancel-fulfillment' | translate }}\n                        </ng-template>\n                    </button>\n                </ng-container>\n            </vdr-dropdown-menu>\n        </vdr-dropdown>\n    </div>\n</div>\n", styles: [".fulfillment-header{display:flex;justify-content:space-between;align-items:center}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: FulfillmentDetailComponent, selector: "vdr-fulfillment-detail", inputs: ["fulfillmentId", "order"] }, { kind: "component", type: FulfillmentStateLabelComponent, selector: "vdr-fulfillment-state-label", inputs: ["state"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FulfillmentCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-fulfillment-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card\">\n    <div class=\"card-header fulfillment-header\">\n        <div>{{ 'order.fulfillment' | translate }}</div>\n        <div class=\"fulfillment-state\">\n            <vdr-fulfillment-state-label [state]=\"fulfillment?.state\"></vdr-fulfillment-state-label>\n        </div>\n    </div>\n    <div class=\"card-block\">\n        <vdr-fulfillment-detail\n            *ngIf=\"!!fulfillment\"\n            [fulfillmentId]=\"fulfillment?.id\"\n            [order]=\"order\"\n        ></vdr-fulfillment-detail>\n    </div>\n    <div class=\"card-footer\" *ngIf=\"fulfillment?.nextStates.length\">\n        <ng-container *ngIf=\"nextSuggestedState() as suggestedState\">\n            <button class=\"btn btn-sm btn-primary\" (click)=\"transitionState.emit(suggestedState)\">\n                {{ 'order.set-fulfillment-state' | translate: { state: (suggestedState | stateI18nToken | translate) } }}\n            </button>\n        </ng-container>\n        <vdr-dropdown>\n            <button class=\"icon-button\" vdrDropdownTrigger>\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n            </button>\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\n                    <button\n                        type=\"button\"\n                        vdrDropdownItem\n                        (click)=\"transitionState.emit(nextState)\"\n                    >\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\n                            {{ 'order.transition-to-state' | translate: { state: (nextState | stateI18nToken | translate) } }}\n                        </ng-container>\n                        <ng-template #cancel>\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\n                            {{ 'order.cancel-fulfillment' | translate }}\n                        </ng-template>\n                    </button>\n                </ng-container>\n            </vdr-dropdown-menu>\n        </vdr-dropdown>\n    </div>\n</div>\n", styles: [".fulfillment-header{display:flex;justify-content:space-between;align-items:center}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"] }]
+        }], propDecorators: { fulfillment: [{
+                type: Input
+            }], order: [{
+                type: Input
+            }], transitionState: [{
+                type: Output
+            }] } });
+
+class ModificationDetailComponent {
+    constructor() {
+        this.addedItems = new Map();
+        this.removedItems = new Map();
+        this.modifiedItems = new Set();
+    }
+    ngOnChanges() {
+        const { added, removed, modified } = this.getModifiedLines();
+        this.addedItems = added;
+        this.removedItems = removed;
+        this.modifiedItems = modified;
+    }
+    getSurcharge(id) {
+        return this.order.surcharges.find(m => m.id === id);
+    }
+    getAddedItems() {
+        return [...this.addedItems.entries()].map(([line, count]) => ({
+            name: line.productVariant.name,
+            quantity: count,
+        }));
+    }
+    getRemovedItems() {
+        return [...this.removedItems.entries()].map(([line, count]) => ({
+            name: line.productVariant.name,
+            quantity: count,
+        }));
+    }
+    getModifiedItems() {
+        return [...this.modifiedItems].map(line => ({
+            name: line.productVariant.name,
+        }));
+    }
+    getModifiedLines() {
+        const added = new Map();
+        const removed = new Map();
+        const modified = new Set();
+        for (const modificationLine of this.modification.lines || []) {
+            const line = this.order.lines.find(l => l.id === modificationLine.orderLineId);
+            if (!line) {
+                continue;
+            }
+            if (modificationLine.quantity === 0) {
+                modified.add(line);
+            }
+            else if (modificationLine.quantity < 0) {
+                removed.set(line, -modificationLine.quantity);
+            }
+            else {
+                added.set(line, modificationLine.quantity);
+            }
+        }
+        return { added, removed, modified };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModificationDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ModificationDetailComponent, selector: "vdr-modification-detail", inputs: { order: "order", modification: "modification" }, usesOnChanges: true, ngImport: i0, template: "<vdr-labeled-data [label]=\"'common.ID' | translate\">{{ modification.id }}</vdr-labeled-data>\n<vdr-labeled-data *ngIf=\"modification.note\" [label]=\"'order.note' | translate\">{{\n    modification.note\n}}</vdr-labeled-data>\n<vdr-labeled-data *ngFor=\"let surcharge of modification.surcharges\" [label]=\"'order.surcharges' | translate\">\n    {{ getSurcharge(surcharge.id)?.description }}\n    {{ getSurcharge(surcharge.id)?.priceWithTax | localeCurrency: order.currencyCode }}</vdr-labeled-data\n>\n<vdr-labeled-data *ngIf=\"getAddedItems().length\" [label]=\"'order.added-items' | translate\">\n    <vdr-simple-item-list [items]=\"getAddedItems()\"></vdr-simple-item-list>\n</vdr-labeled-data>\n<vdr-labeled-data *ngIf=\"getRemovedItems().length\" [label]=\"'order.removed-items' | translate\">\n    <vdr-simple-item-list [items]=\"getRemovedItems()\"></vdr-simple-item-list>\n</vdr-labeled-data>\n<vdr-labeled-data *ngIf=\"getModifiedItems().length\" [label]=\"'order.modified-items' | translate\">\n    <vdr-simple-item-list [items]=\"getModifiedItems()\"></vdr-simple-item-list>\n</vdr-labeled-data>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: SimpleItemListComponent, selector: "vdr-simple-item-list", inputs: ["items"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModificationDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-modification-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-labeled-data [label]=\"'common.ID' | translate\">{{ modification.id }}</vdr-labeled-data>\n<vdr-labeled-data *ngIf=\"modification.note\" [label]=\"'order.note' | translate\">{{\n    modification.note\n}}</vdr-labeled-data>\n<vdr-labeled-data *ngFor=\"let surcharge of modification.surcharges\" [label]=\"'order.surcharges' | translate\">\n    {{ getSurcharge(surcharge.id)?.description }}\n    {{ getSurcharge(surcharge.id)?.priceWithTax | localeCurrency: order.currencyCode }}</vdr-labeled-data\n>\n<vdr-labeled-data *ngIf=\"getAddedItems().length\" [label]=\"'order.added-items' | translate\">\n    <vdr-simple-item-list [items]=\"getAddedItems()\"></vdr-simple-item-list>\n</vdr-labeled-data>\n<vdr-labeled-data *ngIf=\"getRemovedItems().length\" [label]=\"'order.removed-items' | translate\">\n    <vdr-simple-item-list [items]=\"getRemovedItems()\"></vdr-simple-item-list>\n</vdr-labeled-data>\n<vdr-labeled-data *ngIf=\"getModifiedItems().length\" [label]=\"'order.modified-items' | translate\">\n    <vdr-simple-item-list [items]=\"getModifiedItems()\"></vdr-simple-item-list>\n</vdr-labeled-data>\n" }]
+        }], propDecorators: { order: [{
+                type: Input
+            }], modification: [{
+                type: Input
+            }] } });
+
+const NODE_HEIGHT = 72;
+
+class OrderProcessNodeComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.active$ = new BehaviorSubject(false);
+        this.activeTarget$ = new BehaviorSubject(false);
+        this.isCancellable = false;
+        // We use a class field here to prevent the
+        // i18n extractor from extracting a "Cancelled" key
+        this.cancelledState = 'Cancelled';
+    }
+    ngOnChanges(changes) {
+        this.isCancellable = !!this.node.to.find((s) => s.name === 'Cancelled');
+        if (changes.active) {
+            this.active$.next(this.active);
+        }
+    }
+    getPos(origin = 'top') {
+        const rect = this.elementRef.nativeElement.getBoundingClientRect();
+        const nodeHeight = this.elementRef.nativeElement.querySelector('.node')?.getBoundingClientRect().height ?? 0;
+        return {
+            x: 10,
+            y: this.index * NODE_HEIGHT + (origin === 'bottom' ? nodeHeight : 0),
+        };
+    }
+    getStyle() {
+        const pos = this.getPos();
+        return {
+            'top.px': pos.y,
+            'left.px': pos.x,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderProcessNodeComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderProcessNodeComponent, selector: "vdr-order-process-node", inputs: { node: "node", index: "index", active: "active" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"node-wrapper\" [ngStyle]=\"getStyle()\" [class.active]=\"active$ | async\">\n    <div\n        class=\"node\"\n        [class.active-target]=\"activeTarget$ | async\"\n    >\n        {{ node.name | stateI18nToken | translate }}\n    </div>\n    <div class=\"cancelled-wrapper\" *ngIf=\"isCancellable\">\n        <div class=\"cancelled-edge\">\n        </div>\n        <clr-icon shape=\"dot-circle\"></clr-icon>\n        <div class=\"cancelled-node\">\n            {{ cancelledState | stateI18nToken | translate }}\n        </div>\n    </div>\n</div>\n", styles: [":host{display:block}.node-wrapper{position:absolute;z-index:1;display:flex;align-items:center}.node{display:inline-block;border:2px solid var(--color-component-border-200);border-radius:3px;padding:3px 6px;z-index:1;background-color:var(--color-component-bg-100);opacity:.7;transition:opacity .2s,background-color .2s,color .2s;cursor:default}.node.active-target{border-color:var(--color-primary-500);opacity:.9}.cancelled-wrapper{display:flex;align-items:center;color:var(--color-grey-300);transition:color .2s,opacity .2s;opacity:.7}.cancelled-edge{width:48px;height:2px;background-color:var(--color-component-bg-300);transition:background-color .2s}clr-icon{margin-inline-start:-1px}.cancelled-node{margin-inline-start:6px}.active .cancelled-wrapper{opacity:1}.active .node{opacity:1;background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-primary-100)}.active .cancelled-wrapper{color:var(--color-error-500)}.active .cancelled-edge{background-color:var(--color-error-500)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderProcessNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-order-process-node', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"node-wrapper\" [ngStyle]=\"getStyle()\" [class.active]=\"active$ | async\">\n    <div\n        class=\"node\"\n        [class.active-target]=\"activeTarget$ | async\"\n    >\n        {{ node.name | stateI18nToken | translate }}\n    </div>\n    <div class=\"cancelled-wrapper\" *ngIf=\"isCancellable\">\n        <div class=\"cancelled-edge\">\n        </div>\n        <clr-icon shape=\"dot-circle\"></clr-icon>\n        <div class=\"cancelled-node\">\n            {{ cancelledState | stateI18nToken | translate }}\n        </div>\n    </div>\n</div>\n", styles: [":host{display:block}.node-wrapper{position:absolute;z-index:1;display:flex;align-items:center}.node{display:inline-block;border:2px solid var(--color-component-border-200);border-radius:3px;padding:3px 6px;z-index:1;background-color:var(--color-component-bg-100);opacity:.7;transition:opacity .2s,background-color .2s,color .2s;cursor:default}.node.active-target{border-color:var(--color-primary-500);opacity:.9}.cancelled-wrapper{display:flex;align-items:center;color:var(--color-grey-300);transition:color .2s,opacity .2s;opacity:.7}.cancelled-edge{width:48px;height:2px;background-color:var(--color-component-bg-300);transition:background-color .2s}clr-icon{margin-inline-start:-1px}.cancelled-node{margin-inline-start:6px}.active .cancelled-wrapper{opacity:1}.active .node{opacity:1;background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-primary-100)}.active .cancelled-wrapper{color:var(--color-error-500)}.active .cancelled-edge{background-color:var(--color-error-500)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { node: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }] } });
+
+class OrderProcessEdgeComponent {
+    ngOnInit() {
+        this.active$ = this.from.active$
+            .asObservable()
+            .pipe(tap((active) => this.to.activeTarget$.next(active)));
+    }
+    getStyle() {
+        const direction = this.from.index < this.to.index ? 'down' : 'up';
+        const startPos = this.from.getPos(direction === 'down' ? 'bottom' : 'top');
+        const endPos = this.to.getPos(direction === 'down' ? 'top' : 'bottom');
+        const dX = Math.abs(startPos.x - endPos.x);
+        const dY = Math.abs(startPos.y - endPos.y);
+        const length = Math.sqrt(dX ** 2 + dY ** 2);
+        return {
+            'top.px': startPos.y,
+            'left.px': startPos.x + (direction === 'down' ? 10 : 40) + this.index * 12,
+            'height.px': length,
+            'width.px': 1,
+            ...(direction === 'up'
+                ? {
+                    transform: 'rotateZ(180deg)',
+                    'transform-origin': 'top',
+                }
+                : {}),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderProcessEdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderProcessEdgeComponent, selector: "vdr-order-process-edge", inputs: { from: "from", to: "to", index: "index" }, ngImport: i0, template: "<div\n    [attr.data-from]=\"from.node.name\"\n    [attr.data-to]=\"to.node.name\"\n    [ngStyle]=\"getStyle()\"\n    [class.active]=\"active$ | async\"\n    class=\"edge\">\n    <clr-icon shape=\"arrow\" flip=\"vertical\" class=\"arrow\"></clr-icon>\n</div>\n", styles: [".edge{position:absolute;border:1px solid var(--color-component-border-200);background-color:var(--color-component-bg-300);opacity:.3;transition:border .2s,opacity .2s,background-color .2s}.edge.active{border-color:var(--color-primary-500);background-color:var(--color-primary-500);opacity:1}.edge.active .arrow{color:var(--color-primary-500)}.edge .arrow{position:absolute;bottom:-4px;left:-8px;color:var(--color-grey-300)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderProcessEdgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-order-process-edge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    [attr.data-from]=\"from.node.name\"\n    [attr.data-to]=\"to.node.name\"\n    [ngStyle]=\"getStyle()\"\n    [class.active]=\"active$ | async\"\n    class=\"edge\">\n    <clr-icon shape=\"arrow\" flip=\"vertical\" class=\"arrow\"></clr-icon>\n</div>\n", styles: [".edge{position:absolute;border:1px solid var(--color-component-border-200);background-color:var(--color-component-bg-300);opacity:.3;transition:border .2s,opacity .2s,background-color .2s}.edge.active{border-color:var(--color-primary-500);background-color:var(--color-primary-500);opacity:1}.edge.active .arrow{color:var(--color-primary-500)}.edge .arrow{position:absolute;bottom:-4px;left:-8px;color:var(--color-grey-300)}\n"] }]
+        }], propDecorators: { from: [{
+                type: Input
+            }], to: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }] } });
+
+class OrderProcessGraphComponent {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        this.setActiveState$ = new BehaviorSubject(undefined);
+        this.nodes = [];
+        this.edges = [];
+    }
+    get outerHeight() {
+        return this.nodes.length * NODE_HEIGHT;
+    }
+    ngOnInit() {
+        this.setActiveState$.next(this.initialState);
+        this.activeState$ = this.setActiveState$.pipe(debounceTime(150));
+    }
+    ngOnChanges(changes) {
+        this.populateNodes();
+    }
+    ngAfterViewInit() {
+        setTimeout(() => this.populateEdges());
+    }
+    onMouseOver(stateName) {
+        this.setActiveState$.next(stateName);
+    }
+    onMouseOut() {
+        this.setActiveState$.next(this.initialState);
+    }
+    getNodeFor(state) {
+        if (this.nodeComponents) {
+            return this.nodeComponents.find(n => n.node.name === state);
+        }
+    }
+    populateNodes() {
+        const stateNodeMap = new Map();
+        for (const state of this.states) {
+            stateNodeMap.set(state.name, {
+                name: state.name,
+                to: [],
+            });
+        }
+        for (const [name, stateNode] of stateNodeMap.entries()) {
+            const targets = this.states.find(s => s.name === name)?.to ?? [];
+            for (const target of targets) {
+                const targetNode = stateNodeMap.get(target);
+                if (targetNode) {
+                    stateNode.to.push(targetNode);
+                }
+            }
+        }
+        this.nodes = [...stateNodeMap.values()].filter(n => n.name !== 'Cancelled');
+    }
+    populateEdges() {
+        for (const node of this.nodes) {
+            const nodeCmp = this.getNodeFor(node.name);
+            let index = 0;
+            for (const to of node.to) {
+                const toCmp = this.getNodeFor(to.name);
+                if (nodeCmp && toCmp && nodeCmp !== toCmp) {
+                    this.edges.push({
+                        to: toCmp,
+                        from: nodeCmp,
+                        index,
+                    });
+                    index++;
+                }
+            }
+        }
+        this.edges = [...this.edges];
+        this.changeDetector.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderProcessGraphComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderProcessGraphComponent, selector: "vdr-order-process-graph", inputs: { states: "states", initialState: "initialState" }, host: { properties: { "style.height.px": "this.outerHeight" } }, viewQueries: [{ propertyName: "nodeComponents", predicate: OrderProcessNodeComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let state of nodes; let i = index\">\n    <vdr-order-process-node\n        [node]=\"state\"\n        [index]=\"i\"\n        [active]=\"(activeState$ | async) === state.name\"\n        (mouseenter)=\"onMouseOver(state.name)\"\n        (mouseleave)=\"onMouseOut()\"\n    ></vdr-order-process-node>\n</ng-container>\n<ng-container *ngFor=\"let edge of edges\">\n    <vdr-order-process-edge [from]=\"edge.from\" [to]=\"edge.to\" [index]=\"edge.index\"></vdr-order-process-edge>\n</ng-container>\n", styles: [":host{display:block;border:1px hotpink;margin:20px;padding:12px;position:relative}.state-row{display:flex}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: OrderProcessNodeComponent, selector: "vdr-order-process-node", inputs: ["node", "index", "active"] }, { kind: "component", type: OrderProcessEdgeComponent, selector: "vdr-order-process-edge", inputs: ["from", "to", "index"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderProcessGraphComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-order-process-graph', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let state of nodes; let i = index\">\n    <vdr-order-process-node\n        [node]=\"state\"\n        [index]=\"i\"\n        [active]=\"(activeState$ | async) === state.name\"\n        (mouseenter)=\"onMouseOver(state.name)\"\n        (mouseleave)=\"onMouseOut()\"\n    ></vdr-order-process-node>\n</ng-container>\n<ng-container *ngFor=\"let edge of edges\">\n    <vdr-order-process-edge [from]=\"edge.from\" [to]=\"edge.to\" [index]=\"edge.index\"></vdr-order-process-edge>\n</ng-container>\n", styles: [":host{display:block;border:1px hotpink;margin:20px;padding:12px;position:relative}.state-row{display:flex}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { states: [{
+                type: Input
+            }], initialState: [{
+                type: Input
+            }], nodeComponents: [{
+                type: ViewChildren,
+                args: [OrderProcessNodeComponent]
+            }], outerHeight: [{
+                type: HostBinding,
+                args: ['style.height.px']
+            }] } });
+
+class OrderProcessGraphDialogComponent {
+    constructor(serverConfigService) {
+        this.serverConfigService = serverConfigService;
+        this.states = [];
+    }
+    ngOnInit() {
+        this.states = this.serverConfigService.getOrderProcessStates();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderProcessGraphDialogComponent, deps: [{ token: i1.ServerConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderProcessGraphDialogComponent, selector: "vdr-order-process-graph-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.order-state-diagram' | translate }}</ng-template>\n\n<vdr-order-process-graph [states]=\"states\" [initialState]=\"activeState\"></vdr-order-process-graph>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: OrderProcessGraphComponent, selector: "vdr-order-process-graph", inputs: ["states", "initialState"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderProcessGraphDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-order-process-graph-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.order-state-diagram' | translate }}</ng-template>\n\n<vdr-order-process-graph [states]=\"states\" [initialState]=\"activeState\"></vdr-order-process-graph>\n" }]
+        }], ctorParameters: () => [{ type: i1.ServerConfigService }] });
+
+class PaymentForRefundSelectorComponent {
+    constructor() {
+        this.paymentSelected = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaymentForRefundSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PaymentForRefundSelectorComponent, selector: "vdr-payment-for-refund-selector", inputs: { refundablePayments: "refundablePayments", order: "order" }, outputs: { paymentSelected: "paymentSelected" }, ngImport: i0, template: "<vdr-card\n        [title]=\"'order.payment' | translate\"\n        [class.selected]=\"payment.selected\"\n        [class.unselected]=\"!payment.selected\"\n        *ngFor=\"let payment of refundablePayments\"\n>\n    <ng-template vdrCardControls>\n        <vdr-select-toggle\n                size=\"small\"\n                [title]=\"'order.refund-this-payment' | translate\"\n                [label]=\"'order.refund-this-payment' | translate\"\n                [disabled]=\"refundablePayments.length === 1\"\n                [(selected)]=\"payment.selected\"\n                (selectedChange)=\"paymentSelected.emit({ payment: payment, selected: $event })\"\n        ></vdr-select-toggle>\n    </ng-template>\n    <div class=\"form-grid\">\n        <vdr-labeled-data [label]=\"'order.payment-method' | translate\">\n            {{ payment.method }}\n        </vdr-labeled-data>\n        <vdr-labeled-data [label]=\"'order.transaction-id' | translate\">\n            {{ payment.transactionId }}\n        </vdr-labeled-data>\n        <vdr-labeled-data [label]=\"'order.payment-amount' | translate\">\n            {{ payment.amount | localeCurrency : order.currencyCode }}\n        </vdr-labeled-data>\n        <vdr-labeled-data [label]=\"'order.refundable-amount' | translate\">\n            {{ payment.refundableAmount | localeCurrency : order.currencyCode }}\n        </vdr-labeled-data>\n    </div>\n    <vdr-form-field [label]=\"'order.refund-amount' | translate\">\n        <vdr-currency-input\n                [readonly]=\"!payment.selected\"\n                [currencyCode]=\"order.currencyCode\"\n                [formControl]=\"payment.amountToRefundControl\"\n        ></vdr-currency-input>\n    </vdr-form-field>\n</vdr-card>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaymentForRefundSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-payment-for-refund-selector', changeDetection: ChangeDetectionStrategy.Default, template: "<vdr-card\n        [title]=\"'order.payment' | translate\"\n        [class.selected]=\"payment.selected\"\n        [class.unselected]=\"!payment.selected\"\n        *ngFor=\"let payment of refundablePayments\"\n>\n    <ng-template vdrCardControls>\n        <vdr-select-toggle\n                size=\"small\"\n                [title]=\"'order.refund-this-payment' | translate\"\n                [label]=\"'order.refund-this-payment' | translate\"\n                [disabled]=\"refundablePayments.length === 1\"\n                [(selected)]=\"payment.selected\"\n                (selectedChange)=\"paymentSelected.emit({ payment: payment, selected: $event })\"\n        ></vdr-select-toggle>\n    </ng-template>\n    <div class=\"form-grid\">\n        <vdr-labeled-data [label]=\"'order.payment-method' | translate\">\n            {{ payment.method }}\n        </vdr-labeled-data>\n        <vdr-labeled-data [label]=\"'order.transaction-id' | translate\">\n            {{ payment.transactionId }}\n        </vdr-labeled-data>\n        <vdr-labeled-data [label]=\"'order.payment-amount' | translate\">\n            {{ payment.amount | localeCurrency : order.currencyCode }}\n        </vdr-labeled-data>\n        <vdr-labeled-data [label]=\"'order.refundable-amount' | translate\">\n            {{ payment.refundableAmount | localeCurrency : order.currencyCode }}\n        </vdr-labeled-data>\n    </div>\n    <vdr-form-field [label]=\"'order.refund-amount' | translate\">\n        <vdr-currency-input\n                [readonly]=\"!payment.selected\"\n                [currencyCode]=\"order.currencyCode\"\n                [formControl]=\"payment.amountToRefundControl\"\n        ></vdr-currency-input>\n    </vdr-form-field>\n</vdr-card>", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { refundablePayments: [{
+                type: Input
+            }], order: [{
+                type: Input
+            }], paymentSelected: [{
+                type: Output
+            }] } });
+
+class RefundOrderDialogComponent {
+    constructor(i18nService) {
+        this.i18nService = i18nService;
+        this.lineQuantities = {};
+        this.refundablePayments = [];
+        this.refundShippingLineIds = [];
+        this.reasons = getAppConfig().cancellationReasons ?? [
+            marker('order.refund-reason-customer-request'),
+            marker('order.refund-reason-not-available'),
+        ];
+        this.manuallySetRefundTotal = false;
+        this.refundTotal = 0;
+        this.reasons = this.reasons.map(r => this.i18nService.translate(r));
+    }
+    get totalRefundableAmount() {
+        return summate(this.refundablePayments, 'refundableAmount');
+    }
+    get amountToRefundTotal() {
+        return this.refundablePayments.reduce((total, payment) => total + payment.amountToRefundControl.value, 0);
+    }
+    lineCanBeRefundedOrCancelled(line) {
+        const refundedCount = this.order.payments
+            ?.reduce((all, payment) => [...all, ...payment.refunds], [])
+            .filter(refund => refund.state !== 'Failed')
+            .reduce((all, refund) => [...all, ...refund.lines], [])
+            .filter(refundLine => refundLine.orderLineId === line.id)
+            .reduce((sum, refundLine) => sum + refundLine.quantity, 0) ?? 0;
+        return refundedCount < line.orderPlacedQuantity;
+    }
+    ngOnInit() {
+        this.lineQuantities = this.order.lines.reduce((result, line) => ({
+            ...result,
+            [line.id]: {
+                quantity: 0,
+                refund: true,
+                cancel: false,
+            },
+        }), {});
+        this.refundablePayments = getRefundablePayments(this.order.payments);
+    }
+    updateRefundTotal() {
+        if (!this.manuallySetRefundTotal) {
+            const itemTotal = this.order.lines.reduce((total, line) => {
+                const lineRef = this.lineQuantities[line.id];
+                const refundCount = lineRef.quantity || 0;
+                return total + line.proratedUnitPriceWithTax * refundCount;
+            }, 0);
+            const shippingTotal = this.order.shippingLines.reduce((total, line) => {
+                if (this.refundShippingLineIds.includes(line.id)) {
+                    return total + line.discountedPriceWithTax;
+                }
+                else {
+                    return total;
+                }
+            }, 0);
+            this.refundTotal = itemTotal + shippingTotal;
+        }
+        // allocate the refund total across the refundable payments
+        const refundablePayments = this.refundablePayments.filter(p => p.selected);
+        let refundsAllocated = 0;
+        for (const payment of refundablePayments) {
+            const amountToRefund = Math.min(payment.refundableAmount, this.refundTotal - refundsAllocated);
+            payment.amountToRefundControl.setValue(amountToRefund);
+            refundsAllocated += amountToRefund;
+        }
+    }
+    toggleShippingRefund(lineId) {
+        const index = this.refundShippingLineIds.indexOf(lineId);
+        if (index === -1) {
+            this.refundShippingLineIds.push(lineId);
+        }
+        else {
+            this.refundShippingLineIds.splice(index, 1);
+        }
+        this.updateRefundTotal();
+    }
+    onRefundQuantityChange(orderLineId, quantity) {
+        this.manuallySetRefundTotal = false;
+        const selectionLine = this.lineQuantities[orderLineId];
+        if (selectionLine) {
+            const previousQuantity = selectionLine.quantity;
+            if (quantity === 0) {
+                selectionLine.cancel = false;
+            }
+            else if (previousQuantity === 0 && quantity > 0) {
+                selectionLine.cancel = true;
+            }
+            selectionLine.quantity = quantity;
+            this.updateRefundTotal();
+        }
+    }
+    onPaymentSelected(payment, selected) {
+        if (selected) {
+            const outstandingRefundAmount = this.refundTotal -
+                this.refundablePayments
+                    .filter(p => p.id !== payment.id)
+                    .reduce((total, p) => total + p.amountToRefundControl.value, 0);
+            if (0 < outstandingRefundAmount) {
+                payment.amountToRefundControl.setValue(Math.min(outstandingRefundAmount, payment.refundableAmount));
+            }
+        }
+        else {
+            payment.amountToRefundControl.setValue(0);
+        }
+    }
+    isRefunding() {
+        const result = Object.values(this.lineQuantities).reduce((isRefunding, line) => isRefunding || 0 < line.quantity, false);
+        return result;
+    }
+    isCancelling() {
+        const result = Object.values(this.lineQuantities).reduce((isCancelling, line) => isCancelling || (0 < line.quantity && line.cancel), false);
+        return result;
+    }
+    canSubmit() {
+        return 0 < this.refundTotal && this.amountToRefundTotal === this.refundTotal && !!this.reason;
+    }
+    select() {
+        const refundLines = this.getOrderLineInput(() => true);
+        const cancelLines = this.getOrderLineInput(line => line.cancel);
+        this.resolveWith({
+            refunds: this.refundablePayments
+                .filter(rp => rp.selected && 0 < rp.amountToRefundControl.value)
+                .map(payment => {
+                return {
+                    lines: refundLines,
+                    reason: this.reason,
+                    paymentId: payment.id,
+                    amount: payment.amountToRefundControl.value,
+                    shipping: 0,
+                    adjustment: 0,
+                };
+            }),
+            cancel: {
+                lines: cancelLines,
+                orderId: this.order.id,
+                reason: this.reason,
+                cancelShipping: this.refundShippingLineIds.length > 0,
+            },
+        });
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    getOrderLineInput(filterFn) {
+        return Object.entries(this.lineQuantities)
+            .filter(([orderLineId, line]) => 0 < line.quantity && filterFn(line))
+            .map(([orderLineId, line]) => ({
+            orderLineId,
+            quantity: line.quantity,
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RefundOrderDialogComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RefundOrderDialogComponent, selector: "vdr-refund-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.refund-and-cancel-order' | translate }}</ng-template>\n\n<div class=\"refund-wrapper\">\n    <vdr-data-table-2 id=\"refund-order\" [items]=\"order.lines\">\n        <!-- Here we define all the available columns -->\n        <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\n            <ng-template let-line=\"item\">\n                {{ line.id }}\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column id=\"created-at\" [heading]=\"'common.created-at' | translate\" [hiddenByDefault]=\"true\">\n            <ng-template let-line=\"item\">\n                {{ line.createdAt | localeDate : 'short' }}\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column id=\"updated-at\" [heading]=\"'common.updated-at' | translate\" [hiddenByDefault]=\"true\">\n            <ng-template let-line=\"item\">\n                {{ line.updatedAt | localeDate : 'short' }}\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n            <ng-template let-line=\"item\">\n                <div class=\"image-placeholder\">\n                    <img\n                        *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\n                        [src]=\"asset | assetPreview : 'tiny'\"\n                    />\n                    <ng-template #imagePlaceholder>\n                        <div class=\"placeholder\">\n                            <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n                        </div>\n                    </ng-template>\n                </div>\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column id=\"product-name\" [heading]=\"'order.product-name' | translate\" [optional]=\"false\">\n            <ng-template let-line=\"item\">\n                {{ line.productVariant.name }}\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column id=\"product-sku\" [heading]=\"'order.product-sku' | translate\">\n            <ng-template let-line=\"item\">\n                {{ line.productVariant.sku }}\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column id=\"unit-price\" [heading]=\"'order.unit-price' | translate\" [hiddenByDefault]=\"true\">\n            <ng-template let-line=\"item\">\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column id=\"prorated-unit-price\" [heading]=\"'order.prorated-unit-price' | translate\">\n            <ng-template let-line=\"item\">\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\n                <ng-container *ngIf=\"line.discounts as discounts\">\n                    <vdr-dropdown *ngIf=\"discounts.length\">\n                        <div class=\"promotions-label\" vdrDropdownTrigger>\n                            <button class=\"icon-button\"><clr-icon shape=\"info\"></clr-icon></button>\n                        </div>\n                        <vdr-dropdown-menu>\n                            <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\n                                {{ discount.description }}\n                                <div class=\"promotion-amount\">\n                                    {{\n                                        discount.amount / 100 / line.quantity\n                                            | number : '1.0-2'\n                                            | currency : order.currencyCode\n                                    }}\n                                </div>\n                            </div>\n                        </vdr-dropdown-menu>\n                    </vdr-dropdown>\n                </ng-container>\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\">\n            <ng-template let-line=\"item\">\n                {{ line.quantity }}\n                <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column id=\"refund-quantity\" [heading]=\"'order.refund' | translate\" [optional]=\"false\">\n            <ng-template let-line=\"item\">\n                <input\n                    *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\n                    [ngModel]=\"lineQuantities[line.id].quantity\"\n                    type=\"number\"\n                    [max]=\"line.quantity\"\n                    min=\"0\"\n                    (ngModelChange)=\"onRefundQuantityChange(line.id, $event)\"\n                />\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column id=\"cancel\" [heading]=\"'order.return-to-stock' | translate\" [optional]=\"false\">\n            <ng-template let-line=\"item\">\n                <div class=\"cancel-checkbox-wrapper\">\n                    <label class=\"flex center\">\n                        <input\n                            type=\"checkbox\"\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\n                            clrCheckbox\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\n                            [(ngModel)]=\"lineQuantities[line.id].cancel\"\n                        />\n                        <span class=\"ml-1\">{{ 'order.return-to-stock' | translate }}</span></label\n                    >\n                </div>\n            </ng-template>\n        </vdr-dt2-column>\n    </vdr-data-table-2>\n\n    <div class=\"refund-details mt-4\">\n        <div>\n            <vdr-card>\n                <label class=\"flex mb-2\" *ngFor=\"let shippingLine of order.shippingLines\">\n                    <input type=\"checkbox\" clrCheckbox (change)=\"toggleShippingRefund(shippingLine.id)\" />\n                    <div class=\"ml-1\">\n                        {{ 'order.refund-shipping' | translate }}\n                        <span>{{ shippingLine.shippingMethod.name }}:</span>\n                        <span class=\"ml-1\"\n                            >{{ shippingLine.discountedPriceWithTax | localeCurrency : order.currencyCode }}\n                        </span>\n                    </div></label\n                >\n                <vdr-form-field [label]=\"'order.refund-cancellation-reason' | translate\" class=\"mb-2\">\n                    <ng-select\n                        [items]=\"reasons\"\n                        bindLabel=\"name\"\n                        autofocus\n                        [placeholder]=\"'order.refund-cancellation-reason-required' | translate\"\n                        bindValue=\"id\"\n                        [addTag]=\"true\"\n                        [(ngModel)]=\"reason\"\n                    ></ng-select>\n                </vdr-form-field>\n                <vdr-form-field\n                    [label]=\"'order.refund-total' | translate\"\n                    [readOnlyToggle]=\"true\"\n                    (readOnlyToggleChange)=\"manuallySetRefundTotal = !$event\"\n                >\n                    <vdr-currency-input\n                        [readonly]=\"!manuallySetRefundTotal\"\n                        [currencyCode]=\"order.currencyCode\"\n                        [(ngModel)]=\"refundTotal\"\n                        (ngModelChange)=\"updateRefundTotal()\"\n                    ></vdr-currency-input>\n                </vdr-form-field>\n            </vdr-card>\n        </div>\n        <div class=\"\">\n            <vdr-payment-for-refund-selector\n                [refundablePayments]=\"refundablePayments\"\n                (paymentSelected)=\"onPaymentSelected($event.payment, $event.selected)\"\n                [order]=\"order\"\n            ></vdr-payment-for-refund-selector>\n        </div>\n    </div>\n</div>\n\n<ng-template vdrDialogButtons>\n    <div>\n        <div class=\"errors\">\n            <clr-alert\n                *ngIf=\"refundTotal < 0 || totalRefundableAmount < refundTotal\"\n                [clrAlertType]=\"'danger'\"\n                [clrAlertClosable]=\"false\"\n            >\n                <clr-alert-item>\n                    {{\n                        'order.refund-total-error'\n                            | translate\n                                : {\n                                      min: 0 | currency : order.currencyCode,\n                                      max: totalRefundableAmount | localeCurrency : order.currencyCode\n                                  }\n                    }}\n                </clr-alert-item>\n            </clr-alert>\n            <clr-alert\n                *ngIf=\"amountToRefundTotal < refundTotal || refundTotal < amountToRefundTotal\"\n                [clrAlertType]=\"'danger'\"\n                [clrAlertClosable]=\"false\"\n            >\n                <clr-alert-item>\n                    {{ 'order.refund-total-warning' | translate }}\n                </clr-alert-item>\n            </clr-alert>\n            <clr-alert\n                *ngIf=\"amountToRefundTotal && !reason\"\n                [clrAlertType]=\"'danger'\"\n                [clrAlertClosable]=\"false\"\n            >\n                <clr-alert-item>\n                    {{ 'order.refund-cancellation-reason-required' | translate }}\n                </clr-alert-item>\n            </clr-alert>\n        </div>\n        <div class=\"modal-buttons\">\n            <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n            <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\n                {{\n                    'order.refund-with-amount'\n                        | translate : { amount: amountToRefundTotal | localeCurrency : order.currencyCode }\n                }}\n            </button>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host{height:100%;display:flex;flex-direction:column;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}::ng-deep .refund-wrapper .table-wrapper{max-width:initial!important}.quantity-col{background-color:var(--color-warning-100)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;flex-direction:column;padding-bottom:var(--space-unit);gap:calc(var(--space-unit) * 2);justify-content:space-between}@media screen and (min-width: 992px){.refund-details{flex-direction:row}}.refund-details vdr-card.unselected{opacity:.8}.refund-details>*{flex:1}.errors{display:flex;justify-content:flex-end;gap:calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) 0}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-inline-start:12px}vdr-card.faded{opacity:.8}.modal-buttons{display:flex;justify-content:flex-end;gap:.6rem;gap:var(--clr-modal-footer-gap, .6rem)}\n"], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i3.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: PaymentForRefundSelectorComponent, selector: "vdr-payment-for-refund-selector", inputs: ["refundablePayments", "order"], outputs: ["paymentSelected"] }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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>\n\n<div class=\"refund-wrapper\">\n    <vdr-data-table-2 id=\"refund-order\" [items]=\"order.lines\">\n        <!-- Here we define all the available columns -->\n        <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\n            <ng-template let-line=\"item\">\n                {{ line.id }}\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column id=\"created-at\" [heading]=\"'common.created-at' | translate\" [hiddenByDefault]=\"true\">\n            <ng-template let-line=\"item\">\n                {{ line.createdAt | localeDate : 'short' }}\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column id=\"updated-at\" [heading]=\"'common.updated-at' | translate\" [hiddenByDefault]=\"true\">\n            <ng-template let-line=\"item\">\n                {{ line.updatedAt | localeDate : 'short' }}\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n            <ng-template let-line=\"item\">\n                <div class=\"image-placeholder\">\n                    <img\n                        *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\n                        [src]=\"asset | assetPreview : 'tiny'\"\n                    />\n                    <ng-template #imagePlaceholder>\n                        <div class=\"placeholder\">\n                            <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n                        </div>\n                    </ng-template>\n                </div>\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column id=\"product-name\" [heading]=\"'order.product-name' | translate\" [optional]=\"false\">\n            <ng-template let-line=\"item\">\n                {{ line.productVariant.name }}\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column id=\"product-sku\" [heading]=\"'order.product-sku' | translate\">\n            <ng-template let-line=\"item\">\n                {{ line.productVariant.sku }}\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column id=\"unit-price\" [heading]=\"'order.unit-price' | translate\" [hiddenByDefault]=\"true\">\n            <ng-template let-line=\"item\">\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column id=\"prorated-unit-price\" [heading]=\"'order.prorated-unit-price' | translate\">\n            <ng-template let-line=\"item\">\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\n                <ng-container *ngIf=\"line.discounts as discounts\">\n                    <vdr-dropdown *ngIf=\"discounts.length\">\n                        <div class=\"promotions-label\" vdrDropdownTrigger>\n                            <button class=\"icon-button\"><clr-icon shape=\"info\"></clr-icon></button>\n                        </div>\n                        <vdr-dropdown-menu>\n                            <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\n                                {{ discount.description }}\n                                <div class=\"promotion-amount\">\n                                    {{\n                                        discount.amount / 100 / line.quantity\n                                            | number : '1.0-2'\n                                            | currency : order.currencyCode\n                                    }}\n                                </div>\n                            </div>\n                        </vdr-dropdown-menu>\n                    </vdr-dropdown>\n                </ng-container>\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\">\n            <ng-template let-line=\"item\">\n                {{ line.quantity }}\n                <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column id=\"refund-quantity\" [heading]=\"'order.refund' | translate\" [optional]=\"false\">\n            <ng-template let-line=\"item\">\n                <input\n                    *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\n                    [ngModel]=\"lineQuantities[line.id].quantity\"\n                    type=\"number\"\n                    [max]=\"line.quantity\"\n                    min=\"0\"\n                    (ngModelChange)=\"onRefundQuantityChange(line.id, $event)\"\n                />\n            </ng-template>\n        </vdr-dt2-column>\n        <vdr-dt2-column id=\"cancel\" [heading]=\"'order.return-to-stock' | translate\" [optional]=\"false\">\n            <ng-template let-line=\"item\">\n                <div class=\"cancel-checkbox-wrapper\">\n                    <label class=\"flex center\">\n                        <input\n                            type=\"checkbox\"\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\n                            clrCheckbox\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\n                            [(ngModel)]=\"lineQuantities[line.id].cancel\"\n                        />\n                        <span class=\"ml-1\">{{ 'order.return-to-stock' | translate }}</span></label\n                    >\n                </div>\n            </ng-template>\n        </vdr-dt2-column>\n    </vdr-data-table-2>\n\n    <div class=\"refund-details mt-4\">\n        <div>\n            <vdr-card>\n                <label class=\"flex mb-2\" *ngFor=\"let shippingLine of order.shippingLines\">\n                    <input type=\"checkbox\" clrCheckbox (change)=\"toggleShippingRefund(shippingLine.id)\" />\n                    <div class=\"ml-1\">\n                        {{ 'order.refund-shipping' | translate }}\n                        <span>{{ shippingLine.shippingMethod.name }}:</span>\n                        <span class=\"ml-1\"\n                            >{{ shippingLine.discountedPriceWithTax | localeCurrency : order.currencyCode }}\n                        </span>\n                    </div></label\n                >\n                <vdr-form-field [label]=\"'order.refund-cancellation-reason' | translate\" class=\"mb-2\">\n                    <ng-select\n                        [items]=\"reasons\"\n                        bindLabel=\"name\"\n                        autofocus\n                        [placeholder]=\"'order.refund-cancellation-reason-required' | translate\"\n                        bindValue=\"id\"\n                        [addTag]=\"true\"\n                        [(ngModel)]=\"reason\"\n                    ></ng-select>\n                </vdr-form-field>\n                <vdr-form-field\n                    [label]=\"'order.refund-total' | translate\"\n                    [readOnlyToggle]=\"true\"\n                    (readOnlyToggleChange)=\"manuallySetRefundTotal = !$event\"\n                >\n                    <vdr-currency-input\n                        [readonly]=\"!manuallySetRefundTotal\"\n                        [currencyCode]=\"order.currencyCode\"\n                        [(ngModel)]=\"refundTotal\"\n                        (ngModelChange)=\"updateRefundTotal()\"\n                    ></vdr-currency-input>\n                </vdr-form-field>\n            </vdr-card>\n        </div>\n        <div class=\"\">\n            <vdr-payment-for-refund-selector\n                [refundablePayments]=\"refundablePayments\"\n                (paymentSelected)=\"onPaymentSelected($event.payment, $event.selected)\"\n                [order]=\"order\"\n            ></vdr-payment-for-refund-selector>\n        </div>\n    </div>\n</div>\n\n<ng-template vdrDialogButtons>\n    <div>\n        <div class=\"errors\">\n            <clr-alert\n                *ngIf=\"refundTotal < 0 || totalRefundableAmount < refundTotal\"\n                [clrAlertType]=\"'danger'\"\n                [clrAlertClosable]=\"false\"\n            >\n                <clr-alert-item>\n                    {{\n                        'order.refund-total-error'\n                            | translate\n                                : {\n                                      min: 0 | currency : order.currencyCode,\n                                      max: totalRefundableAmount | localeCurrency : order.currencyCode\n                                  }\n                    }}\n                </clr-alert-item>\n            </clr-alert>\n            <clr-alert\n                *ngIf=\"amountToRefundTotal < refundTotal || refundTotal < amountToRefundTotal\"\n                [clrAlertType]=\"'danger'\"\n                [clrAlertClosable]=\"false\"\n            >\n                <clr-alert-item>\n                    {{ 'order.refund-total-warning' | translate }}\n                </clr-alert-item>\n            </clr-alert>\n            <clr-alert\n                *ngIf=\"amountToRefundTotal && !reason\"\n                [clrAlertType]=\"'danger'\"\n                [clrAlertClosable]=\"false\"\n            >\n                <clr-alert-item>\n                    {{ 'order.refund-cancellation-reason-required' | translate }}\n                </clr-alert-item>\n            </clr-alert>\n        </div>\n        <div class=\"modal-buttons\">\n            <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n            <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\n                {{\n                    'order.refund-with-amount'\n                        | translate : { amount: amountToRefundTotal | localeCurrency : order.currencyCode }\n                }}\n            </button>\n        </div>\n    </div>\n</ng-template>\n", styles: [":host{height:100%;display:flex;flex-direction:column;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}::ng-deep .refund-wrapper .table-wrapper{max-width:initial!important}.quantity-col{background-color:var(--color-warning-100)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;flex-direction:column;padding-bottom:var(--space-unit);gap:calc(var(--space-unit) * 2);justify-content:space-between}@media screen and (min-width: 992px){.refund-details{flex-direction:row}}.refund-details vdr-card.unselected{opacity:.8}.refund-details>*{flex:1}.errors{display:flex;justify-content:flex-end;gap:calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) 0}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-inline-start:12px}vdr-card.faded{opacity:.8}.modal-buttons{display:flex;justify-content:flex-end;gap:.6rem;gap:var(--clr-modal-footer-gap, .6rem)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.I18nService }] });
+
+class SettleRefundDialogComponent {
+    constructor() {
+        this.transactionId = '';
+    }
+    submit() {
+        this.resolveWith(this.transactionId);
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SettleRefundDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SettleRefundDialogComponent, selector: "vdr-settle-refund-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.settle-refund' | translate }}</ng-template>\n<p class=\"instruction\">\n    {{ 'order.settle-refund-manual-instructions' | translate: { method: refund.method } }}\n</p>\n<clr-input-container>\n    <label>{{ 'order.transaction-id' | translate }}</label>\n    <input clrInput name=\"transactionId\" [(ngModel)]=\"transactionId\" />\n</clr-input-container>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button type=\"submit\" (click)=\"submit()\" [disabled]=\"!transactionId\" class=\"btn btn-primary\">\n        {{ 'order.settle-refund' | translate }}\n    </button>\n</ng-template>\n", styles: [":host{padding-bottom:32px}.instruction{margin-top:0;margin-bottom:24px}\n"], dependencies: [{ kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i3.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SettleRefundDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-settle-refund-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.settle-refund' | translate }}</ng-template>\n<p class=\"instruction\">\n    {{ 'order.settle-refund-manual-instructions' | translate: { method: refund.method } }}\n</p>\n<clr-input-container>\n    <label>{{ 'order.transaction-id' | translate }}</label>\n    <input clrInput name=\"transactionId\" [(ngModel)]=\"transactionId\" />\n</clr-input-container>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button type=\"submit\" (click)=\"submit()\" [disabled]=\"!transactionId\" class=\"btn btn-primary\">\n        {{ 'order.settle-refund' | translate }}\n    </button>\n</ng-template>\n", styles: [":host{padding-bottom:32px}.instruction{margin-top:0;margin-bottom:24px}\n"] }]
+        }] });
+
+class PaymentStateLabelComponent {
+    get chipColorType() {
+        switch (this.state) {
+            case 'Authorized':
+                return 'warning';
+            case 'Settled':
+                return 'success';
+            case 'Declined':
+            case 'Cancelled':
+                return 'error';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaymentStateLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PaymentStateLabelComponent, selector: "vdr-payment-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\n    {{ state | stateI18nToken | translate }}\n</vdr-chip>\n", styles: [":host{display:flex;font-size:14px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaymentStateLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-payment-state-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\n    {{ state | stateI18nToken | translate }}\n</vdr-chip>\n", styles: [":host{display:flex;font-size:14px}\n"] }]
+        }], propDecorators: { state: [{
+                type: Input
+            }] } });
+
+class RefundStateLabelComponent {
+    get chipColorType() {
+        switch (this.state) {
+            case 'Pending':
+                return 'warning';
+            case 'Settled':
+                return 'success';
+            case 'Failed':
+                return 'error';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RefundStateLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RefundStateLabelComponent, selector: "vdr-refund-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\n    {{ state | stateI18nToken | translate }}\n</vdr-chip>\n", styles: [":host{display:flex;font-size:14px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RefundStateLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-refund-state-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\n    {{ state | stateI18nToken | translate }}\n</vdr-chip>\n", styles: [":host{display:flex;font-size:14px}\n"] }]
+        }], propDecorators: { state: [{
+                type: Input
+            }] } });
+
+class PaymentDetailComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaymentDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PaymentDetailComponent, selector: "vdr-payment-detail", inputs: { payment: "payment", currencyCode: "currencyCode" }, ngImport: i0, template: "<vdr-labeled-data [label]=\"'order.payment-method' | translate\">\n    {{ payment.method }}\n</vdr-labeled-data>\n<vdr-labeled-data [label]=\"'order.amount' | translate\">\n    {{ payment.amount | localeCurrency: currencyCode }}\n</vdr-labeled-data>\n<vdr-labeled-data *ngIf=\"payment.errorMessage\" [label]=\"'order.error-message' | translate\">\n    {{ payment.errorMessage }}\n</vdr-labeled-data>\n<vdr-labeled-data *ngIf=\"payment.transactionId\" [label]=\"'order.transaction-id' | translate\">\n    {{ payment.transactionId }}\n</vdr-labeled-data>\n<vdr-labeled-data [label]=\"'order.payment-metadata' | translate\">\n    <vdr-object-tree [value]=\"payment.metadata\"></vdr-object-tree>\n</vdr-labeled-data>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaymentDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-payment-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-labeled-data [label]=\"'order.payment-method' | translate\">\n    {{ payment.method }}\n</vdr-labeled-data>\n<vdr-labeled-data [label]=\"'order.amount' | translate\">\n    {{ payment.amount | localeCurrency: currencyCode }}\n</vdr-labeled-data>\n<vdr-labeled-data *ngIf=\"payment.errorMessage\" [label]=\"'order.error-message' | translate\">\n    {{ payment.errorMessage }}\n</vdr-labeled-data>\n<vdr-labeled-data *ngIf=\"payment.transactionId\" [label]=\"'order.transaction-id' | translate\">\n    {{ payment.transactionId }}\n</vdr-labeled-data>\n<vdr-labeled-data [label]=\"'order.payment-metadata' | translate\">\n    <vdr-object-tree [value]=\"payment.metadata\"></vdr-object-tree>\n</vdr-labeled-data>\n" }]
+        }], propDecorators: { payment: [{
+                type: Input
+            }], currencyCode: [{
+                type: Input
+            }] } });
+
+class OrderPaymentCardComponent {
+    constructor() {
+        this.settlePayment = new EventEmitter();
+        this.transitionPaymentState = new EventEmitter();
+        this.settleRefund = new EventEmitter();
+    }
+    refundHasMetadata(refund) {
+        return !!refund && Object.keys(refund.metadata).length > 0;
+    }
+    nextOtherStates() {
+        if (!this.payment) {
+            return [];
+        }
+        return this.payment.nextStates.filter(s => s !== 'Settled' && s !== 'Error');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderPaymentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderPaymentCardComponent, selector: "vdr-order-payment-card", inputs: { payment: "payment", currencyCode: "currencyCode" }, outputs: { settlePayment: "settlePayment", transitionPaymentState: "transitionPaymentState", settleRefund: "settleRefund" }, ngImport: i0, template: "<div class=\"card\">\n    <div class=\"card-header payment-header\">\n        <div>\n            {{ 'order.payment' | translate }}\n            <ng-container *ngIf=\"payment.amount\">{{ payment.amount | localeCurrency : currencyCode }}</ng-container>\n        </div>\n        <div class=\"payment-state\">\n            <vdr-payment-state-label [state]=\"payment.state\"></vdr-payment-state-label>\n        </div>\n    </div>\n    <div class=\"card-block\">\n        <vdr-payment-detail [payment]=\"payment\" [currencyCode]=\"currencyCode\"></vdr-payment-detail>\n    </div>\n    <ng-container *ngFor=\"let refund of payment.refunds\">\n        <div class=\"refund-wrapper card-block\">\n            <div class=\"card-header payment-header refund-header\">\n                <clr-icon shape=\"redo\" class=\"refund-icon\" dir=\"down\"></clr-icon>\n                {{ 'order.refund' | translate }} #{{ refund.id }}\n                <div class=\"clr-flex-fill\"></div>\n                <vdr-refund-state-label [state]=\"refund.state\"></vdr-refund-state-label>\n            </div>\n            <div class=\"card-block\">\n                <vdr-labeled-data [label]=\"'common.created-at' | translate\">\n                    {{ refund.createdAt | localeDate : 'medium' }}\n                </vdr-labeled-data>\n                <vdr-labeled-data [label]=\"'order.refund-total' | translate\">\n                    {{ refund.total | localeCurrency : currencyCode }}\n                </vdr-labeled-data>\n                <vdr-labeled-data [label]=\"'order.transaction-id' | translate\" *ngIf=\"refund.transactionId\">\n                    {{ refund.transactionId }}\n                </vdr-labeled-data>\n                <vdr-labeled-data [label]=\"'order.refund-reason' | translate\" *ngIf=\"refund.reason\">\n                    {{ refund.reason }}\n                </vdr-labeled-data>\n                <vdr-labeled-data\n                    [label]=\"'order.refund-metadata' | translate\"\n                    *ngIf=\"refundHasMetadata(refund)\"\n                >\n                    <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\n                </vdr-labeled-data>\n            </div>\n            <div class=\"card-footer\" *ngIf=\"refund.state === 'Pending'\">\n                <button class=\"btn btn-sm btn-primary\" (click)=\"settleRefund.emit(refund)\">\n                    {{ 'order.settle-refund' | translate }}\n                </button>\n            </div>\n        </div>\n    </ng-container>\n    <div class=\"card-footer\" *ngIf=\"payment.nextStates.length\">\n        <button\n            class=\"btn btn-sm btn-primary\"\n            *ngIf=\"payment.nextStates.includes('Settled')\"\n            (click)=\"settlePayment.emit(payment)\"\n        >\n            {{ 'order.settle-payment' | translate }}\n        </button>\n        <vdr-dropdown>\n            <button class=\"icon-button\" vdrDropdownTrigger>\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n            </button>\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\n                    <button\n                        type=\"button\"\n                        vdrDropdownItem\n                        (click)=\"transitionPaymentState.emit({ payment: payment, state: nextState })\"\n                    >\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\n                            {{\n                                'order.transition-to-state'\n                                    | translate : { state: (nextState | stateI18nToken | translate) }\n                            }}\n                        </ng-container>\n                        <ng-template #cancel>\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\n                            {{ 'order.cancel-payment' | translate }}\n                        </ng-template>\n                    </button>\n                </ng-container>\n            </vdr-dropdown-menu>\n        </vdr-dropdown>\n    </div>\n</div>\n", styles: [":host{display:block}.payment-header{display:flex;justify-content:space-between;align-items:center;line-break:anywhere}.refund-icon{margin-inline-end:6px;color:var(--color-grey-400)}.card-footer{display:flex;align-items:center;justify-content:flex-end}.refund-wrapper{font-size:var(--font-size-xs)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: PaymentStateLabelComponent, selector: "vdr-payment-state-label", inputs: ["state"] }, { kind: "component", type: RefundStateLabelComponent, selector: "vdr-refund-state-label", inputs: ["state"] }, { kind: "component", type: PaymentDetailComponent, selector: "vdr-payment-detail", inputs: ["payment", "currencyCode"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderPaymentCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-order-payment-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card\">\n    <div class=\"card-header payment-header\">\n        <div>\n            {{ 'order.payment' | translate }}\n            <ng-container *ngIf=\"payment.amount\">{{ payment.amount | localeCurrency : currencyCode }}</ng-container>\n        </div>\n        <div class=\"payment-state\">\n            <vdr-payment-state-label [state]=\"payment.state\"></vdr-payment-state-label>\n        </div>\n    </div>\n    <div class=\"card-block\">\n        <vdr-payment-detail [payment]=\"payment\" [currencyCode]=\"currencyCode\"></vdr-payment-detail>\n    </div>\n    <ng-container *ngFor=\"let refund of payment.refunds\">\n        <div class=\"refund-wrapper card-block\">\n            <div class=\"card-header payment-header refund-header\">\n                <clr-icon shape=\"redo\" class=\"refund-icon\" dir=\"down\"></clr-icon>\n                {{ 'order.refund' | translate }} #{{ refund.id }}\n                <div class=\"clr-flex-fill\"></div>\n                <vdr-refund-state-label [state]=\"refund.state\"></vdr-refund-state-label>\n            </div>\n            <div class=\"card-block\">\n                <vdr-labeled-data [label]=\"'common.created-at' | translate\">\n                    {{ refund.createdAt | localeDate : 'medium' }}\n                </vdr-labeled-data>\n                <vdr-labeled-data [label]=\"'order.refund-total' | translate\">\n                    {{ refund.total | localeCurrency : currencyCode }}\n                </vdr-labeled-data>\n                <vdr-labeled-data [label]=\"'order.transaction-id' | translate\" *ngIf=\"refund.transactionId\">\n                    {{ refund.transactionId }}\n                </vdr-labeled-data>\n                <vdr-labeled-data [label]=\"'order.refund-reason' | translate\" *ngIf=\"refund.reason\">\n                    {{ refund.reason }}\n                </vdr-labeled-data>\n                <vdr-labeled-data\n                    [label]=\"'order.refund-metadata' | translate\"\n                    *ngIf=\"refundHasMetadata(refund)\"\n                >\n                    <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\n                </vdr-labeled-data>\n            </div>\n            <div class=\"card-footer\" *ngIf=\"refund.state === 'Pending'\">\n                <button class=\"btn btn-sm btn-primary\" (click)=\"settleRefund.emit(refund)\">\n                    {{ 'order.settle-refund' | translate }}\n                </button>\n            </div>\n        </div>\n    </ng-container>\n    <div class=\"card-footer\" *ngIf=\"payment.nextStates.length\">\n        <button\n            class=\"btn btn-sm btn-primary\"\n            *ngIf=\"payment.nextStates.includes('Settled')\"\n            (click)=\"settlePayment.emit(payment)\"\n        >\n            {{ 'order.settle-payment' | translate }}\n        </button>\n        <vdr-dropdown>\n            <button class=\"icon-button\" vdrDropdownTrigger>\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n            </button>\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\n                    <button\n                        type=\"button\"\n                        vdrDropdownItem\n                        (click)=\"transitionPaymentState.emit({ payment: payment, state: nextState })\"\n                    >\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\n                            {{\n                                'order.transition-to-state'\n                                    | translate : { state: (nextState | stateI18nToken | translate) }\n                            }}\n                        </ng-container>\n                        <ng-template #cancel>\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\n                            {{ 'order.cancel-payment' | translate }}\n                        </ng-template>\n                    </button>\n                </ng-container>\n            </vdr-dropdown-menu>\n        </vdr-dropdown>\n    </div>\n</div>\n", styles: [":host{display:block}.payment-header{display:flex;justify-content:space-between;align-items:center;line-break:anywhere}.refund-icon{margin-inline-end:6px;color:var(--color-grey-400)}.card-footer{display:flex;align-items:center;justify-content:flex-end}.refund-wrapper{font-size:var(--font-size-xs)}\n"] }]
+        }], propDecorators: { payment: [{
+                type: Input
+            }], currencyCode: [{
+                type: Input
+            }], settlePayment: [{
+                type: Output
+            }], transitionPaymentState: [{
+                type: Output
+            }], settleRefund: [{
+                type: Output
+            }] } });
+
+class OrderHistoryEntryHostComponent {
+    constructor(historyEntryComponentService) {
+        this.historyEntryComponentService = historyEntryComponentService;
+        this.expandClick = new EventEmitter();
+    }
+    ngOnInit() {
+        const componentType = this.historyEntryComponentService.getComponent(this.entry.type);
+        const componentRef = this.portalRef.createComponent(componentType);
+        componentRef.instance.entry = this.entry;
+        componentRef.instance.order = this.order;
+        this.instance = componentRef.instance;
+        this.componentRef = componentRef;
+    }
+    ngOnDestroy() {
+        this.componentRef?.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderHistoryEntryHostComponent, deps: [{ token: i1.HistoryEntryComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderHistoryEntryHostComponent, selector: "vdr-order-history-entry-host", inputs: { entry: "entry", order: "order", expanded: "expanded" }, outputs: { expandClick: "expandClick" }, viewQueries: [{ propertyName: "portalRef", first: true, predicate: ["portal"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["historyEntry"], ngImport: i0, template: `<vdr-timeline-entry
+        [displayType]="instance.getDisplayType(entry)"
+        [iconShape]="instance.getIconShape && instance.getIconShape(entry)"
+        [createdAt]="entry.createdAt"
+        [name]="instance.getName && instance.getName(entry)"
+        [featured]="instance.isFeatured(entry)"
+        [collapsed]="!expanded && !instance.isFeatured(entry)"
+        (expandClick)="expandClick.emit()"
+    >
+        <div #portal></div>
+    </vdr-timeline-entry>`, isInline: true, dependencies: [{ kind: "component", type: i1.TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: ["displayType", "createdAt", "name", "featured", "iconShape", "isFirst", "isLast", "collapsed"], outputs: ["expandClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderHistoryEntryHostComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vdr-order-history-entry-host',
+                    template: `<vdr-timeline-entry
+        [displayType]="instance.getDisplayType(entry)"
+        [iconShape]="instance.getIconShape && instance.getIconShape(entry)"
+        [createdAt]="entry.createdAt"
+        [name]="instance.getName && instance.getName(entry)"
+        [featured]="instance.isFeatured(entry)"
+        [collapsed]="!expanded && !instance.isFeatured(entry)"
+        (expandClick)="expandClick.emit()"
+    >
+        <div #portal></div>
+    </vdr-timeline-entry>`,
+                    exportAs: 'historyEntry',
+                }]
+        }], ctorParameters: () => [{ type: i1.HistoryEntryComponentService }], propDecorators: { entry: [{
+                type: Input
+            }], order: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], expandClick: [{
+                type: Output
+            }], portalRef: [{
+                type: ViewChild,
+                args: ['portal', { static: true, read: ViewContainerRef }]
+            }] } });
+
+class OrderHistoryComponent {
+    constructor(historyEntryComponentService) {
+        this.historyEntryComponentService = historyEntryComponentService;
+        this.addNote = new EventEmitter();
+        this.updateNote = new EventEmitter();
+        this.deleteNote = new EventEmitter();
+        this.note = '';
+        this.noteIsPrivate = true;
+        this.expanded = false;
+        this.type = HistoryEntryType;
+    }
+    hasCustomComponent(type) {
+        return !!this.historyEntryComponentService.getComponent(type);
+    }
+    getDisplayType(entry) {
+        if (entry.type === HistoryEntryType.ORDER_STATE_TRANSITION) {
+            if (entry.data.to === 'Delivered') {
+                return 'success';
+            }
+            if (entry.data.to === 'Cancelled') {
+                return 'error';
+            }
+        }
+        if (entry.type === HistoryEntryType.ORDER_FULFILLMENT_TRANSITION) {
+            if (entry.data.to === 'Delivered') {
+                return 'success';
+            }
+        }
+        if (entry.type === HistoryEntryType.ORDER_PAYMENT_TRANSITION) {
+            if (entry.data.to === 'Declined' || entry.data.to === 'Cancelled') {
+                return 'error';
+            }
+        }
+        if (entry.type === HistoryEntryType.ORDER_CANCELLATION) {
+            return 'warning';
+        }
+        if (entry.type === HistoryEntryType.ORDER_REFUND_TRANSITION) {
+            return 'warning';
+        }
+        return 'default';
+    }
+    getTimelineIcon(entry) {
+        if (entry.type === HistoryEntryType.ORDER_STATE_TRANSITION) {
+            if (entry.data.to === 'Delivered') {
+                return ['success-standard', 'is-solid'];
+            }
+            if (entry.data.to === 'Cancelled') {
+                return 'ban';
+            }
+        }
+        if (entry.type === HistoryEntryType.ORDER_PAYMENT_TRANSITION) {
+            if (entry.data.to === 'Settled') {
+                return 'credit-card';
+            }
+        }
+        if (entry.type === HistoryEntryType.ORDER_REFUND_TRANSITION) {
+            if (entry.data.to === 'Settled') {
+                return 'credit-card';
+            }
+        }
+        if (entry.type === HistoryEntryType.ORDER_NOTE) {
+            return 'note';
+        }
+        if (entry.type === HistoryEntryType.ORDER_MODIFIED) {
+            return 'pencil';
+        }
+        if (entry.type === HistoryEntryType.ORDER_CUSTOMER_UPDATED) {
+            return 'switch';
+        }
+        if (entry.type === HistoryEntryType.ORDER_FULFILLMENT_TRANSITION) {
+            if (entry.data.to === 'Shipped') {
+                return 'truck';
+            }
+            if (entry.data.to === 'Delivered') {
+                return 'truck';
+            }
+        }
+    }
+    isFeatured(entry) {
+        switch (entry.type) {
+            case HistoryEntryType.ORDER_STATE_TRANSITION: {
+                return (entry.data.to === 'Delivered' ||
+                    entry.data.to === 'Cancelled' ||
+                    entry.data.to === 'Settled');
+            }
+            case HistoryEntryType.ORDER_REFUND_TRANSITION:
+                return entry.data.to === 'Settled';
+            case HistoryEntryType.ORDER_PAYMENT_TRANSITION:
+                return entry.data.to === 'Settled' || entry.data.to === 'Cancelled';
+            case HistoryEntryType.ORDER_FULFILLMENT_TRANSITION:
+                return entry.data.to === 'Delivered' || entry.data.to === 'Shipped';
+            case HistoryEntryType.ORDER_NOTE:
+            case HistoryEntryType.ORDER_MODIFIED:
+            case HistoryEntryType.ORDER_CUSTOMER_UPDATED:
+                return true;
+            default:
+                return false;
+        }
+    }
+    getFulfillment(entry) {
+        if ((entry.type === HistoryEntryType.ORDER_FULFILLMENT ||
+            entry.type === HistoryEntryType.ORDER_FULFILLMENT_TRANSITION) &&
+            this.order.fulfillments) {
+            return this.order.fulfillments.find(f => f.id === entry.data.fulfillmentId);
+        }
+    }
+    getPayment(entry) {
+        if (entry.type === HistoryEntryType.ORDER_PAYMENT_TRANSITION && this.order.payments) {
+            return this.order.payments.find(p => p.id === entry.data.paymentId);
+        }
+    }
+    getRefund(entry) {
+        if (entry.type === HistoryEntryType.ORDER_REFUND_TRANSITION && this.order.payments) {
+            const allRefunds = this.order.payments.reduce((refunds, payment) => refunds.concat(payment.refunds), []);
+            return allRefunds.find(r => r.id === entry.data.refundId);
+        }
+    }
+    getCancelledQuantity(entry) {
+        return entry.data.lines.reduce((total, line) => total + line.quantity, 0);
+    }
+    getCancelledItems(cancellationLines) {
+        const itemMap = new Map();
+        for (const line of this.order.lines) {
+            const cancellationLine = cancellationLines.find(l => l.orderLineId === line.id);
+            if (cancellationLine) {
+                const count = itemMap.get(line.productVariant.name);
+                itemMap.set(line.productVariant.name, cancellationLine.quantity);
+            }
+        }
+        return Array.from(itemMap.entries()).map(([name, quantity]) => ({ name, quantity }));
+    }
+    getModification(id) {
+        return this.order.modifications.find(m => m.id === id);
+    }
+    getName(entry) {
+        const { administrator } = entry;
+        if (administrator) {
+            return `${administrator.firstName} ${administrator.lastName}`;
+        }
+        else {
+            const customer = this.order.customer;
+            if (customer) {
+                return `${customer.firstName} ${customer.lastName}`;
+            }
+        }
+        return '';
+    }
+    addNoteToOrder() {
+        this.addNote.emit({ note: this.note, isPublic: !this.noteIsPrivate });
+        this.note = '';
+        this.noteIsPrivate = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderHistoryComponent, deps: [{ token: i1.HistoryEntryComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderHistoryComponent, selector: "vdr-order-history", inputs: { order: "order", history: "history" }, outputs: { addNote: "addNote", updateNote: "updateNote", deleteNote: "deleteNote" }, ngImport: i0, template: "<div class=\"entry-list\" [class.expanded]=\"expanded\">\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\" [isFirst]=\"true\">\n        <div class=\"note-entry\">\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToOrder()\">\n                {{ 'common.add-note' | translate }}\n            </button>\n        </div>\n        <div class=\"visibility-select\">\n            <clr-checkbox-wrapper>\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\n                <label>{{ 'order.note-is-private' | translate }}</label>\n            </clr-checkbox-wrapper>\n            <span *ngIf=\"noteIsPrivate\" class=\"private\">\n                {{ 'order.note-only-visible-to-administrators' | translate }}\n            </span>\n            <span *ngIf=\"!noteIsPrivate\" class=\"public\">\n                {{ 'order.note-visible-to-customer' | translate }}\n            </span>\n        </div>\n    </vdr-timeline-entry>\n    <ng-container *ngFor=\"let entry of history\">\n        <vdr-order-history-entry-host\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\n            [order]=\"order\"\n            [entry]=\"entry\"\n            [expanded]=\"expanded\"\n            (expandClick)=\"expanded = !expanded\"\n        ></vdr-order-history-entry-host>\n        <ng-template #defaultComponents>\n            <vdr-timeline-entry\n                [displayType]=\"getDisplayType(entry)\"\n                [iconShape]=\"getTimelineIcon(entry)\"\n                [createdAt]=\"entry.createdAt\"\n                [name]=\"getName(entry)\"\n                [featured]=\"isFeatured(entry)\"\n                [collapsed]=\"!expanded && !isFeatured(entry)\"\n                (expandClick)=\"expanded = !expanded\"\n            >\n                <ng-container [ngSwitch]=\"entry.type\">\n                    <ng-container *ngSwitchCase=\"type.ORDER_STATE_TRANSITION\">\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Delivered'\">\n                            {{ 'order.history-order-fulfilled' | translate }}\n                        </div>\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Cancelled'\">\n                            {{ 'order.history-order-cancelled' | translate }}\n                        </div>\n                        <ng-template [ngIf]=\"entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'\">\n                            {{\n                                'order.history-order-transition'\n                                    | translate : { from: entry.data.from, to: entry.data.to }\n                            }}\n                        </ng-template>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_MODIFIED\">\n                        <div class=\"title\">\n                            {{ 'order.history-order-modified' | translate }}\n                        </div>\n                        <div\n                            class=\"flex items-center\"\n                            *ngIf=\"getModification(entry.data.modificationId) as modification\"\n                        >\n                            {{ 'order.modify-order-price-difference' | translate }}:\n                            <strong>{{\n                                modification.priceChange | localeCurrency : order.currencyCode\n                            }}</strong>\n                            <vdr-chip colorType=\"success\" class=\"mx-1\" *ngIf=\"modification.isSettled\">{{\n                                'order.modification-settled' | translate\n                            }}</vdr-chip>\n                            <vdr-chip colorType=\"error\" class=\"mx-1\" *ngIf=\"!modification.isSettled\">{{\n                                'order.modification-not-settled' | translate\n                            }}</vdr-chip>\n                            <vdr-history-entry-detail>\n                                <vdr-modification-detail\n                                    [order]=\"order\"\n                                    [modification]=\"modification\"\n                                ></vdr-modification-detail>\n                            </vdr-history-entry-detail>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_PAYMENT_TRANSITION\">\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularPaymentTransition\">\n                            <div class=\"title\">\n                                {{ 'order.history-payment-settled' | translate }}\n                            </div>\n                            <div class=\"flex items-center\">\n                                <vdr-chip *ngIf=\"getPayment(entry) as payment\" class=\"mr-1\">{{\n                                    payment.amount | localeCurrency : order.currencyCode\n                                }}</vdr-chip>\n                                <vdr-history-entry-detail *ngIf=\"getPayment(entry) as payment\">\n                                    <vdr-payment-detail\n                                        [payment]=\"payment\"\n                                        [currencyCode]=\"order.currencyCode\"\n                                    ></vdr-payment-detail>\n                                </vdr-history-entry-detail>\n                            </div>\n                        </ng-container>\n                        <ng-template #regularPaymentTransition>\n                            {{\n                                'order.history-payment-transition'\n                                    | translate\n                                        : {\n                                              from: entry.data.from,\n                                              to: entry.data.to,\n                                              id: getPayment(entry)?.transactionId\n                                          }\n                            }}\n                        </ng-template>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_REFUND_TRANSITION\">\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularRefundTransition\">\n                            <ng-container *ngIf=\"getRefund(entry) as refund\">\n                                <div class=\"title\">{{ 'order.refund' | translate }} #{{ refund.id }}</div>\n                                <div class=\"flex items-center\">\n                                    <vdr-chip colorType=\"warning\" class=\"mr-1\">{{\n                                        refund.total | localeCurrency : order.currencyCode\n                                    }}</vdr-chip>\n                                    <vdr-history-entry-detail>\n                                        <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\n                                            {{ entry.data.reason }}\n                                        </vdr-labeled-data>\n                                        <vdr-labeled-data [label]=\"'order.contents' | translate\">\n                                            <vdr-simple-item-list\n                                                [items]=\"getCancelledItems(refund.lines)\"\n                                            ></vdr-simple-item-list>\n                                        </vdr-labeled-data>\n                                    </vdr-history-entry-detail>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                        <ng-template #regularRefundTransition>\n                            {{\n                                'order.history-refund-transition'\n                                    | translate\n                                        : {\n                                              from: entry.data.from,\n                                              to: entry.data.to,\n                                              id: entry.data.refundId\n                                          }\n                            }}\n                        </ng-template>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_CANCELLATION\">\n                        {{\n                            'order.history-items-cancelled'\n                                | translate : { count: getCancelledQuantity(entry) }\n                        }}\n                        <vdr-history-entry-detail *ngIf=\"getCancelledItems(entry.data.lines) as items\">\n                            <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\n                                {{ entry.data.reason }}\n                            </vdr-labeled-data>\n                            <vdr-labeled-data [label]=\"'order.contents' | translate\">\n                                <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\n                            </vdr-labeled-data>\n                            <vdr-labeled-data [label]=\"'order.shipping-cancelled' | translate\">\n                                {{ entry.data.shippingCancelled }}\n                            </vdr-labeled-data>\n                        </vdr-history-entry-detail>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT\">\n                        {{ 'order.history-fulfillment-created' | translate }}\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\n                            <vdr-fulfillment-detail\n                                [fulfillmentId]=\"fulfillment.id\"\n                                [order]=\"order\"\n                            ></vdr-fulfillment-detail>\n                        </vdr-history-entry-detail>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT_TRANSITION\">\n                        <ng-container *ngIf=\"entry.data.to === 'Delivered'\">\n                            <div class=\"title\">\n                                {{ 'order.history-fulfillment-delivered' | translate }}\n                            </div>\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\n                        </ng-container>\n                        <ng-container *ngIf=\"entry.data.to === 'Shipped'\">\n                            <div class=\"title\">\n                                {{ 'order.history-fulfillment-shipped' | translate }}\n                            </div>\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\n                        </ng-container>\n                        <ng-container *ngIf=\"entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'\">\n                            {{\n                                'order.history-fulfillment-transition'\n                                    | translate : { from: entry.data.from, to: entry.data.to }\n                            }}\n                        </ng-container>\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\n                            <vdr-fulfillment-detail\n                                [fulfillmentId]=\"fulfillment.id\"\n                                [order]=\"order\"\n                            ></vdr-fulfillment-detail>\n                        </vdr-history-entry-detail>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_NOTE\">\n                        <div class=\"flex\">\n                            <div class=\"note-text\">\n                                <span *ngIf=\"entry.isPublic\" class=\"note-visibility public\">{{\n                                    'common.public' | translate\n                                }}</span>\n                                <span *ngIf=\"!entry.isPublic\" class=\"note-visibility private\">{{\n                                    'common.private' | translate\n                                }}</span>\n                                {{ entry.data.note }}\n                            </div>\n                            <div class=\"flex-spacer\"></div>\n                            <vdr-dropdown>\n                                <button class=\"button-small ml-1\" vdrDropdownTrigger>\n                                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\n                                </button>\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n                                    <button\n                                        vdrDropdownItem\n                                        (click)=\"updateNote.emit(entry)\"\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\n                                    >\n                                        <clr-icon shape=\"edit\"></clr-icon>\n                                        {{ 'common.edit' | translate }}\n                                    </button>\n                                    <div class=\"dropdown-divider\"></div>\n                                    <button\n                                        vdrDropdownItem\n                                        (click)=\"deleteNote.emit(entry)\"\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\n                                    >\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n                                        {{ 'common.delete' | translate }}\n                                    </button>\n                                </vdr-dropdown-menu>\n                            </vdr-dropdown>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_APPLIED\">\n                        {{ 'order.history-coupon-code-applied' | translate }}:\n                        <vdr-chip>\n                            <a [routerLink]=\"['/marketing', 'promotions', entry.data.promotionId]\">{{\n                                entry.data.couponCode\n                            }}</a>\n                        </vdr-chip>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_REMOVED\">\n                        {{ 'order.history-coupon-code-removed' | translate }}:\n                        <vdr-chip\n                            ><span class=\"cancelled-coupon-code\">{{ entry.data.couponCode }}</span></vdr-chip\n                        >\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_CUSTOMER_UPDATED\">\n                        <div class=\"title\">\n                            {{\n                                'order.history-customer-updated'\n                                    | translate : { newCustomerName: entry.data.newCustomerName }\n                            }}\n                        </div>\n                        <div class=\"flex\">\n                            <div class=\"note-text\">\n                                {{ entry.data.note }}\n                            </div>\n                            <div class=\"flex-spacer\"></div>\n                            <vdr-history-entry-detail>\n                                <vdr-labeled-data [label]=\"'order.previous-customer' | translate\">\n                                    <a\n                                        *ngIf=\"entry.data.previousCustomerId\"\n                                        class=\"button-ghost\"\n                                        [routerLink]=\"[\n                                            '/customer',\n                                            'customers',\n                                            entry.data.previousCustomerId\n                                        ]\"\n                                    >\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\n                                        <span>{{ entry.data.previousCustomerName }}</span>\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\n                                    </a>\n                                </vdr-labeled-data>\n                                <vdr-labeled-data [label]=\"'order.new-customer' | translate\">\n                                    <a\n                                        *ngIf=\"entry.data.newCustomerId\"\n                                        class=\"button-ghost\"\n                                        [routerLink]=\"['/customer', 'customers', entry.data.newCustomerId]\"\n                                    >\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\n                                        <span>{{ entry.data.newCustomerName }}</span>\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\n                                    </a>\n                                </vdr-labeled-data>\n                            </vdr-history-entry-detail>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <div class=\"title\">\n                            {{ entry.type | translate }}\n                        </div>\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\n                        </vdr-history-entry-detail>\n                    </ng-container>\n                </ng-container>\n            </vdr-timeline-entry>\n        </ng-template>\n    </ng-container>\n\n    <vdr-timeline-entry [isLast]=\"true\" [createdAt]=\"order.createdAt\" [featured]=\"true\">\n        <div class=\"title\">\n            {{ 'order.history-order-created' | translate }}\n        </div>\n    </vdr-timeline-entry>\n</div>\n", styles: [":host{display:block}.entry-list{margin-inline-start:calc(var(--space-unit) * 2)}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}.visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-700)}.visibility-select .private{color:var(--color-success-700)}textarea.note{flex:1;height:36px;border-radius:3px;margin-inline-end:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap;max-width:580px}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-700)}.note-visibility.private{color:var(--color-success-700)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: i1.TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: ["displayType", "createdAt", "name", "featured", "iconShape", "isFirst", "isLast", "collapsed"], outputs: ["expandClick"] }, { kind: "component", type: i1.HistoryEntryDetailComponent, selector: "vdr-history-entry-detail" }, { kind: "component", type: FulfillmentDetailComponent, selector: "vdr-fulfillment-detail", inputs: ["fulfillmentId", "order"] }, { kind: "component", type: PaymentDetailComponent, selector: "vdr-payment-detail", inputs: ["payment", "currencyCode"] }, { kind: "component", type: SimpleItemListComponent, selector: "vdr-simple-item-list", inputs: ["items"] }, { kind: "component", type: ModificationDetailComponent, selector: "vdr-modification-detail", inputs: ["order", "modification"] }, { kind: "component", type: OrderHistoryEntryHostComponent, selector: "vdr-order-history-entry-host", inputs: ["entry", "order", "expanded"], outputs: ["expandClick"], exportAs: ["historyEntry"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderHistoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-order-history', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"entry-list\" [class.expanded]=\"expanded\">\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\" [isFirst]=\"true\">\n        <div class=\"note-entry\">\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToOrder()\">\n                {{ 'common.add-note' | translate }}\n            </button>\n        </div>\n        <div class=\"visibility-select\">\n            <clr-checkbox-wrapper>\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\n                <label>{{ 'order.note-is-private' | translate }}</label>\n            </clr-checkbox-wrapper>\n            <span *ngIf=\"noteIsPrivate\" class=\"private\">\n                {{ 'order.note-only-visible-to-administrators' | translate }}\n            </span>\n            <span *ngIf=\"!noteIsPrivate\" class=\"public\">\n                {{ 'order.note-visible-to-customer' | translate }}\n            </span>\n        </div>\n    </vdr-timeline-entry>\n    <ng-container *ngFor=\"let entry of history\">\n        <vdr-order-history-entry-host\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\n            [order]=\"order\"\n            [entry]=\"entry\"\n            [expanded]=\"expanded\"\n            (expandClick)=\"expanded = !expanded\"\n        ></vdr-order-history-entry-host>\n        <ng-template #defaultComponents>\n            <vdr-timeline-entry\n                [displayType]=\"getDisplayType(entry)\"\n                [iconShape]=\"getTimelineIcon(entry)\"\n                [createdAt]=\"entry.createdAt\"\n                [name]=\"getName(entry)\"\n                [featured]=\"isFeatured(entry)\"\n                [collapsed]=\"!expanded && !isFeatured(entry)\"\n                (expandClick)=\"expanded = !expanded\"\n            >\n                <ng-container [ngSwitch]=\"entry.type\">\n                    <ng-container *ngSwitchCase=\"type.ORDER_STATE_TRANSITION\">\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Delivered'\">\n                            {{ 'order.history-order-fulfilled' | translate }}\n                        </div>\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Cancelled'\">\n                            {{ 'order.history-order-cancelled' | translate }}\n                        </div>\n                        <ng-template [ngIf]=\"entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'\">\n                            {{\n                                'order.history-order-transition'\n                                    | translate : { from: entry.data.from, to: entry.data.to }\n                            }}\n                        </ng-template>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_MODIFIED\">\n                        <div class=\"title\">\n                            {{ 'order.history-order-modified' | translate }}\n                        </div>\n                        <div\n                            class=\"flex items-center\"\n                            *ngIf=\"getModification(entry.data.modificationId) as modification\"\n                        >\n                            {{ 'order.modify-order-price-difference' | translate }}:\n                            <strong>{{\n                                modification.priceChange | localeCurrency : order.currencyCode\n                            }}</strong>\n                            <vdr-chip colorType=\"success\" class=\"mx-1\" *ngIf=\"modification.isSettled\">{{\n                                'order.modification-settled' | translate\n                            }}</vdr-chip>\n                            <vdr-chip colorType=\"error\" class=\"mx-1\" *ngIf=\"!modification.isSettled\">{{\n                                'order.modification-not-settled' | translate\n                            }}</vdr-chip>\n                            <vdr-history-entry-detail>\n                                <vdr-modification-detail\n                                    [order]=\"order\"\n                                    [modification]=\"modification\"\n                                ></vdr-modification-detail>\n                            </vdr-history-entry-detail>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_PAYMENT_TRANSITION\">\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularPaymentTransition\">\n                            <div class=\"title\">\n                                {{ 'order.history-payment-settled' | translate }}\n                            </div>\n                            <div class=\"flex items-center\">\n                                <vdr-chip *ngIf=\"getPayment(entry) as payment\" class=\"mr-1\">{{\n                                    payment.amount | localeCurrency : order.currencyCode\n                                }}</vdr-chip>\n                                <vdr-history-entry-detail *ngIf=\"getPayment(entry) as payment\">\n                                    <vdr-payment-detail\n                                        [payment]=\"payment\"\n                                        [currencyCode]=\"order.currencyCode\"\n                                    ></vdr-payment-detail>\n                                </vdr-history-entry-detail>\n                            </div>\n                        </ng-container>\n                        <ng-template #regularPaymentTransition>\n                            {{\n                                'order.history-payment-transition'\n                                    | translate\n                                        : {\n                                              from: entry.data.from,\n                                              to: entry.data.to,\n                                              id: getPayment(entry)?.transactionId\n                                          }\n                            }}\n                        </ng-template>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_REFUND_TRANSITION\">\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularRefundTransition\">\n                            <ng-container *ngIf=\"getRefund(entry) as refund\">\n                                <div class=\"title\">{{ 'order.refund' | translate }} #{{ refund.id }}</div>\n                                <div class=\"flex items-center\">\n                                    <vdr-chip colorType=\"warning\" class=\"mr-1\">{{\n                                        refund.total | localeCurrency : order.currencyCode\n                                    }}</vdr-chip>\n                                    <vdr-history-entry-detail>\n                                        <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\n                                            {{ entry.data.reason }}\n                                        </vdr-labeled-data>\n                                        <vdr-labeled-data [label]=\"'order.contents' | translate\">\n                                            <vdr-simple-item-list\n                                                [items]=\"getCancelledItems(refund.lines)\"\n                                            ></vdr-simple-item-list>\n                                        </vdr-labeled-data>\n                                    </vdr-history-entry-detail>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                        <ng-template #regularRefundTransition>\n                            {{\n                                'order.history-refund-transition'\n                                    | translate\n                                        : {\n                                              from: entry.data.from,\n                                              to: entry.data.to,\n                                              id: entry.data.refundId\n                                          }\n                            }}\n                        </ng-template>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_CANCELLATION\">\n                        {{\n                            'order.history-items-cancelled'\n                                | translate : { count: getCancelledQuantity(entry) }\n                        }}\n                        <vdr-history-entry-detail *ngIf=\"getCancelledItems(entry.data.lines) as items\">\n                            <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\n                                {{ entry.data.reason }}\n                            </vdr-labeled-data>\n                            <vdr-labeled-data [label]=\"'order.contents' | translate\">\n                                <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\n                            </vdr-labeled-data>\n                            <vdr-labeled-data [label]=\"'order.shipping-cancelled' | translate\">\n                                {{ entry.data.shippingCancelled }}\n                            </vdr-labeled-data>\n                        </vdr-history-entry-detail>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT\">\n                        {{ 'order.history-fulfillment-created' | translate }}\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\n                            <vdr-fulfillment-detail\n                                [fulfillmentId]=\"fulfillment.id\"\n                                [order]=\"order\"\n                            ></vdr-fulfillment-detail>\n                        </vdr-history-entry-detail>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT_TRANSITION\">\n                        <ng-container *ngIf=\"entry.data.to === 'Delivered'\">\n                            <div class=\"title\">\n                                {{ 'order.history-fulfillment-delivered' | translate }}\n                            </div>\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\n                        </ng-container>\n                        <ng-container *ngIf=\"entry.data.to === 'Shipped'\">\n                            <div class=\"title\">\n                                {{ 'order.history-fulfillment-shipped' | translate }}\n                            </div>\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\n                        </ng-container>\n                        <ng-container *ngIf=\"entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'\">\n                            {{\n                                'order.history-fulfillment-transition'\n                                    | translate : { from: entry.data.from, to: entry.data.to }\n                            }}\n                        </ng-container>\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\n                            <vdr-fulfillment-detail\n                                [fulfillmentId]=\"fulfillment.id\"\n                                [order]=\"order\"\n                            ></vdr-fulfillment-detail>\n                        </vdr-history-entry-detail>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_NOTE\">\n                        <div class=\"flex\">\n                            <div class=\"note-text\">\n                                <span *ngIf=\"entry.isPublic\" class=\"note-visibility public\">{{\n                                    'common.public' | translate\n                                }}</span>\n                                <span *ngIf=\"!entry.isPublic\" class=\"note-visibility private\">{{\n                                    'common.private' | translate\n                                }}</span>\n                                {{ entry.data.note }}\n                            </div>\n                            <div class=\"flex-spacer\"></div>\n                            <vdr-dropdown>\n                                <button class=\"button-small ml-1\" vdrDropdownTrigger>\n                                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\n                                </button>\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n                                    <button\n                                        vdrDropdownItem\n                                        (click)=\"updateNote.emit(entry)\"\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\n                                    >\n                                        <clr-icon shape=\"edit\"></clr-icon>\n                                        {{ 'common.edit' | translate }}\n                                    </button>\n                                    <div class=\"dropdown-divider\"></div>\n                                    <button\n                                        vdrDropdownItem\n                                        (click)=\"deleteNote.emit(entry)\"\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\n                                    >\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\n                                        {{ 'common.delete' | translate }}\n                                    </button>\n                                </vdr-dropdown-menu>\n                            </vdr-dropdown>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_APPLIED\">\n                        {{ 'order.history-coupon-code-applied' | translate }}:\n                        <vdr-chip>\n                            <a [routerLink]=\"['/marketing', 'promotions', entry.data.promotionId]\">{{\n                                entry.data.couponCode\n                            }}</a>\n                        </vdr-chip>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_REMOVED\">\n                        {{ 'order.history-coupon-code-removed' | translate }}:\n                        <vdr-chip\n                            ><span class=\"cancelled-coupon-code\">{{ entry.data.couponCode }}</span></vdr-chip\n                        >\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"type.ORDER_CUSTOMER_UPDATED\">\n                        <div class=\"title\">\n                            {{\n                                'order.history-customer-updated'\n                                    | translate : { newCustomerName: entry.data.newCustomerName }\n                            }}\n                        </div>\n                        <div class=\"flex\">\n                            <div class=\"note-text\">\n                                {{ entry.data.note }}\n                            </div>\n                            <div class=\"flex-spacer\"></div>\n                            <vdr-history-entry-detail>\n                                <vdr-labeled-data [label]=\"'order.previous-customer' | translate\">\n                                    <a\n                                        *ngIf=\"entry.data.previousCustomerId\"\n                                        class=\"button-ghost\"\n                                        [routerLink]=\"[\n                                            '/customer',\n                                            'customers',\n                                            entry.data.previousCustomerId\n                                        ]\"\n                                    >\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\n                                        <span>{{ entry.data.previousCustomerName }}</span>\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\n                                    </a>\n                                </vdr-labeled-data>\n                                <vdr-labeled-data [label]=\"'order.new-customer' | translate\">\n                                    <a\n                                        *ngIf=\"entry.data.newCustomerId\"\n                                        class=\"button-ghost\"\n                                        [routerLink]=\"['/customer', 'customers', entry.data.newCustomerId]\"\n                                    >\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\n                                        <span>{{ entry.data.newCustomerName }}</span>\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\n                                    </a>\n                                </vdr-labeled-data>\n                            </vdr-history-entry-detail>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <div class=\"title\">\n                            {{ entry.type | translate }}\n                        </div>\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\n                        </vdr-history-entry-detail>\n                    </ng-container>\n                </ng-container>\n            </vdr-timeline-entry>\n        </ng-template>\n    </ng-container>\n\n    <vdr-timeline-entry [isLast]=\"true\" [createdAt]=\"order.createdAt\" [featured]=\"true\">\n        <div class=\"title\">\n            {{ 'order.history-order-created' | translate }}\n        </div>\n    </vdr-timeline-entry>\n</div>\n", styles: [":host{display:block}.entry-list{margin-inline-start:calc(var(--space-unit) * 2)}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}.visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-700)}.visibility-select .private{color:var(--color-success-700)}textarea.note{flex:1;height:36px;border-radius:3px;margin-inline-end:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap;max-width:580px}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-700)}.note-visibility.private{color:var(--color-success-700)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.HistoryEntryComponentService }], propDecorators: { order: [{
+                type: Input
+            }], history: [{
+                type: Input
+            }], addNote: [{
+                type: Output
+            }], updateNote: [{
+                type: Output
+            }], deleteNote: [{
+                type: Output
+            }] } });
+
+const GET_SELLER_ORDERS = gql `
+    query GetSellerOrders($orderId: ID!) {
+        order(id: $orderId) {
+            id
+            sellerOrders {
+                id
+                code
+                state
+                orderPlacedAt
+                currencyCode
+                totalWithTax
+                channels {
+                    id
+                    code
+                    seller {
+                        id
+                        name
+                    }
+                }
+            }
+        }
+    }
+`;
+
+class SellerOrdersCardComponent {
+    constructor(router, dataService, channelService) {
+        this.router = router;
+        this.dataService = dataService;
+        this.channelService = channelService;
+    }
+    ngOnInit() {
+        this.sellerOrders$ = this.dataService
+            .query(GET_SELLER_ORDERS, {
+            orderId: this.orderId,
+        })
+            .mapSingle(({ order }) => order?.sellerOrders ?? []);
+    }
+    getSeller(order) {
+        const sellerChannel = order.channels.find(channel => channel.code !== DEFAULT_CHANNEL_CODE);
+        return sellerChannel?.seller;
+    }
+    navigateToSellerOrder(order) {
+        this.router.navigate(['/orders', order.id]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SellerOrdersCardComponent, deps: [{ token: i1$1.Router }, { token: i1.DataService }, { token: i1.ChannelService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SellerOrdersCardComponent, selector: "vdr-seller-orders-card", inputs: { orderId: "orderId" }, ngImport: i0, template: "<vdr-card [title]=\"'order.seller-orders' | translate\">\n    <div class=\"form-grid\">\n        <div *ngFor=\"let order of sellerOrders$ | async\">\n            <a [routerLink]=\"['seller-orders', order.id]\" class=\"button-ghost mb-1\"\n                >{{ order.code }} <clr-icon shape=\"arrow right\"></clr-icon\n            ></a>\n            <vdr-labeled-data [label]=\"'order.state' | translate\">\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\n            </vdr-labeled-data>\n            <vdr-labeled-data *ngIf=\"getSeller(order) as seller\" [label]=\"'common.seller' | translate\">\n                {{ seller.name }}\n            </vdr-labeled-data>\n            <vdr-labeled-data *ngIf=\"getSeller(order) as seller\" [label]=\"'order.total' | translate\">\n                {{ order.totalWithTax | localeCurrency : order.currencyCode }}\n            </vdr-labeled-data>\n        </div>\n    </div>\n</vdr-card>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SellerOrdersCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-seller-orders-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-card [title]=\"'order.seller-orders' | translate\">\n    <div class=\"form-grid\">\n        <div *ngFor=\"let order of sellerOrders$ | async\">\n            <a [routerLink]=\"['seller-orders', order.id]\" class=\"button-ghost mb-1\"\n                >{{ order.code }} <clr-icon shape=\"arrow right\"></clr-icon\n            ></a>\n            <vdr-labeled-data [label]=\"'order.state' | translate\">\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\n            </vdr-labeled-data>\n            <vdr-labeled-data *ngIf=\"getSeller(order) as seller\" [label]=\"'common.seller' | translate\">\n                {{ seller.name }}\n            </vdr-labeled-data>\n            <vdr-labeled-data *ngIf=\"getSeller(order) as seller\" [label]=\"'order.total' | translate\">\n                {{ order.totalWithTax | localeCurrency : order.currencyCode }}\n            </vdr-labeled-data>\n        </div>\n    </div>\n</vdr-card>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1.DataService }, { type: i1.ChannelService }], propDecorators: { orderId: [{
+                type: Input
+            }] } });
+
+const ORDER_DETAIL_QUERY = gql `
+    query OrderDetailQuery($id: ID!) {
+        order(id: $id) {
+            ...OrderDetail
+        }
+    }
+    ${ORDER_DETAIL_FRAGMENT}
+`;
+const SET_ORDER_CUSTOMER_MUTATION = gql `
+    mutation SetOrderCustomer($input: SetOrderCustomerInput!) {
+        setOrderCustomer(input: $input) {
+            id
+            customer {
+                id
+                firstName
+                lastName
+                emailAddress
+            }
+        }
+    }
+`;
+class OrderDetailComponent extends TypedBaseDetailComponent {
+    constructor(changeDetector, dataService, notificationService, modalService, orderTransitionService, formBuilder) {
+        super();
+        this.changeDetector = changeDetector;
+        this.dataService = dataService;
+        this.notificationService = notificationService;
+        this.modalService = modalService;
+        this.orderTransitionService = orderTransitionService;
+        this.formBuilder = formBuilder;
+        this.customFields = this.getCustomFieldConfig('Order');
+        this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
+        this.detailForm = new FormGroup({
+            customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
+        });
+        this.fetchHistory = new Subject();
+        this.defaultStates = [
+            'AddingItems',
+            'ArrangingPayment',
+            'PaymentAuthorized',
+            'PaymentSettled',
+            'PartiallyShipped',
+            'Shipped',
+            'PartiallyDelivered',
+            'Delivered',
+            'Cancelled',
+            'Modifying',
+            'ArrangingAdditionalPayment',
+        ];
+    }
+    ngOnInit() {
+        this.init();
+        this.entity$.pipe(take(1)).subscribe(order => {
+            if (order.state === 'Modifying') {
+                this.router.navigate(['./', 'modify'], { relativeTo: this.route });
+            }
+        });
+        this.history$ = this.fetchHistory.pipe(startWith(null), switchMap(() => this.dataService.order
+            .getOrderHistory(this.id, {
+            sort: {
+                createdAt: SortOrder.DESC,
+            },
+        })
+            .mapStream(data => data.order?.history.items)));
+        this.nextStates$ = this.entity$.pipe(map(order => {
+            const isInCustomState = !this.defaultStates.includes(order.state);
+            return isInCustomState
+                ? order.nextStates
+                : order.nextStates.filter(s => !this.defaultStates.includes(s));
+        }));
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    openStateDiagram() {
+        this.entity$
+            .pipe(take(1), switchMap(order => this.modalService.fromComponent(OrderProcessGraphDialogComponent, {
+            closable: true,
+            locals: {
+                activeState: order.state,
+            },
+        })))
+            .subscribe();
+    }
+    setOrderCustomer() {
+        this.modalService
+            .fromComponent(SelectCustomerDialogComponent, {
+            locals: {
+                canCreateNew: false,
+                includeNoteInput: true,
+                title: marker('order.assign-order-to-another-customer'),
+            },
+        })
+            .pipe(switchMap(result => {
+            function isExisting(input) {
+                return typeof input === 'object' && !!input.id;
+            }
+            if (isExisting(result)) {
+                return this.dataService.mutate(SetOrderCustomerDocument, {
+                    input: {
+                        customerId: result.id,
+                        orderId: this.id,
+                        note: result.note,
+                    },
+                });
+            }
+            else {
+                return EMPTY;
+            }
+        }), switchMap(result => this.refetchOrder(result)))
+            .subscribe(result => {
+            if (result) {
+                this.notificationService.success(marker('order.set-customer-success'));
+            }
+        });
+    }
+    transitionToState(state) {
+        this.dataService.order.transitionToState(this.id, state).subscribe(({ transitionOrderToState }) => {
+            switch (transitionOrderToState?.__typename) {
+                case 'Order':
+                    this.notificationService.success(marker('order.transitioned-to-state-success'), { state });
+                    this.fetchHistory.next();
+                    break;
+                case 'OrderStateTransitionError':
+                    this.notificationService.error(transitionOrderToState.transitionError);
+            }
+        });
+    }
+    manuallyTransitionToState(order) {
+        this.orderTransitionService
+            .manuallyTransitionToState({
+            orderId: order.id,
+            nextStates: order.nextStates,
+            cancellable: true,
+            message: marker('order.manually-transition-to-state-message'),
+            retry: 0,
+        })
+            .subscribe();
+    }
+    transitionToModifying() {
+        this.dataService.order
+            .transitionToState(this.id, 'Modifying')
+            .subscribe(({ transitionOrderToState }) => {
+            switch (transitionOrderToState?.__typename) {
+                case 'Order':
+                    this.router.navigate(['./modify'], { relativeTo: this.route });
+                    break;
+                case 'OrderStateTransitionError':
+                    this.notificationService.error(transitionOrderToState.transitionError);
+            }
+        });
+    }
+    updateCustomFields() {
+        this.dataService.order
+            .updateOrderCustomFields({
+            id: this.id,
+            customFields: this.detailForm.value.customFields,
+        })
+            .subscribe(() => {
+            this.notificationService.success(marker('common.notify-update-success'), { entity: 'Order' });
+        });
+    }
+    getOrderAddressLines(orderAddress) {
+        if (!orderAddress) {
+            return [];
+        }
+        return Object.values(orderAddress)
+            .filter(val => val !== 'OrderAddress')
+            .filter(line => !!line);
+    }
+    settlePayment(payment) {
+        this.dataService.order.settlePayment(payment.id).subscribe(({ settlePayment }) => {
+            switch (settlePayment.__typename) {
+                case 'Payment':
+                    if (settlePayment.state === 'Settled') {
+                        this.notificationService.success(marker('order.settle-payment-success'));
+                    }
+                    else {
+                        this.notificationService.error(marker('order.settle-payment-error'));
+                    }
+                    this.dataService.order.getOrder(this.id).single$.subscribe();
+                    this.fetchHistory.next();
+                    break;
+                case 'OrderStateTransitionError':
+                case 'PaymentStateTransitionError':
+                case 'SettlePaymentError':
+                    this.notificationService.error(settlePayment.message);
+            }
+        });
+    }
+    transitionPaymentState({ payment, state }) {
+        if (state === 'Cancelled') {
+            this.dataService.order.cancelPayment(payment.id).subscribe(({ cancelPayment }) => {
+                switch (cancelPayment.__typename) {
+                    case 'Payment':
+                        this.notificationService.success(marker('order.transitioned-payment-to-state-success'), {
+                            state,
+                        });
+                        this.dataService.order.getOrder(this.id).single$.subscribe();
+                        this.fetchHistory.next();
+                        break;
+                    case 'PaymentStateTransitionError':
+                        this.notificationService.error(cancelPayment.transitionError);
+                        break;
+                    case 'CancelPaymentError':
+                        this.notificationService.error(cancelPayment.paymentErrorMessage);
+                        break;
+                }
+            });
+        }
+        else {
+            this.dataService.order
+                .transitionPaymentToState(payment.id, state)
+                .subscribe(({ transitionPaymentToState }) => {
+                switch (transitionPaymentToState.__typename) {
+                    case 'Payment':
+                        this.notificationService.success(marker('order.transitioned-payment-to-state-success'), {
+                            state,
+                        });
+                        this.dataService.order.getOrder(this.id).single$.subscribe();
+                        this.fetchHistory.next();
+                        break;
+                    case 'PaymentStateTransitionError':
+                        this.notificationService.error(transitionPaymentToState.message);
+                        break;
+                }
+            });
+        }
+    }
+    canAddFulfillment(order) {
+        const allFulfillmentLines = (order.fulfillments ?? [])
+            .filter(fulfillment => fulfillment.state !== 'Cancelled')
+            .reduce((all, fulfillment) => [...all, ...fulfillment.lines], []);
+        let allItemsFulfilled = true;
+        for (const line of order.lines) {
+            const totalFulfilledCount = allFulfillmentLines
+                .filter(row => row.orderLineId === line.id)
+                .reduce((sum, row) => sum + row.quantity, 0);
+            if (totalFulfilledCount < line.quantity) {
+                allItemsFulfilled = false;
+            }
+        }
+        return (!allItemsFulfilled &&
+            !this.hasUnsettledModifications(order) &&
+            this.outstandingPaymentAmount(order) === 0 &&
+            (order.nextStates.includes('Shipped') ||
+                order.nextStates.includes('PartiallyShipped') ||
+                order.nextStates.includes('Delivered')));
+    }
+    hasUnsettledModifications(order) {
+        return 0 < order.modifications.filter(m => !m.isSettled).length;
+    }
+    getOutstandingModificationAmount(order) {
+        return summate(order.modifications.filter(m => !m.isSettled), 'priceChange');
+    }
+    outstandingPaymentAmount(order) {
+        const paymentIsValid = (p) => p.state !== 'Cancelled' && p.state !== 'Declined' && p.state !== 'Error';
+        let amountCovered = 0;
+        for (const payment of order.payments?.filter(paymentIsValid) ?? []) {
+            const refunds = payment.refunds.filter(r => r.state !== 'Failed') ?? [];
+            const refundsTotal = summate(refunds, 'total');
+            amountCovered += payment.amount - refundsTotal;
+        }
+        return order.totalWithTax - amountCovered;
+    }
+    addManualPayment(order) {
+        const priorState = order.state;
+        this.modalService
+            .fromComponent(AddManualPaymentDialogComponent, {
+            closable: true,
+            locals: {
+                outstandingAmount: this.outstandingPaymentAmount(order),
+                currencyCode: order.currencyCode,
+            },
+        })
+            .pipe(switchMap(result => {
+            if (result) {
+                return this.dataService.order.addManualPaymentToOrder({
+                    orderId: this.id,
+                    transactionId: result.transactionId,
+                    method: result.method,
+                    metadata: result.metadata || {},
+                });
+            }
+            else {
+                return EMPTY;
+            }
+        }), switchMap(({ addManualPaymentToOrder }) => {
+            switch (addManualPaymentToOrder.__typename) {
+                case 'Order':
+                    this.notificationService.success(marker('order.add-payment-to-order-success'));
+                    if (priorState === 'ArrangingAdditionalPayment') {
+                        return this.orderTransitionService.transitionToPreModifyingState(order.id, order.nextStates);
+                    }
+                    else {
+                        return of('PaymentSettled');
+                    }
+                case 'ManualPaymentStateError':
+                    this.notificationService.error(addManualPaymentToOrder.message);
+                    return EMPTY;
+                default:
+                    return EMPTY;
+            }
+        }))
+            .subscribe(result => {
+            if (result) {
+                this.refetchOrder({ result });
+            }
+        });
+    }
+    fulfillOrder() {
+        this.entity$
+            .pipe(take(1), switchMap(order => this.modalService.fromComponent(FulfillOrderDialogComponent, {
+            size: 'xl',
+            locals: {
+                order,
+            },
+        })), switchMap(input => {
+            if (input) {
+                return this.dataService.order.createFulfillment(input);
+            }
+            else {
+                return of(undefined);
+            }
+        }), switchMap(result => this.refetchOrder(result).pipe(mapTo(result))))
+            .subscribe(result => {
+            if (result) {
+                const { addFulfillmentToOrder } = result;
+                switch (addFulfillmentToOrder.__typename) {
+                    case 'Fulfillment':
+                        this.notificationService.success(marker('order.create-fulfillment-success'));
+                        break;
+                    case 'EmptyOrderLineSelectionError':
+                    case 'InsufficientStockOnHandError':
+                    case 'ItemsAlreadyFulfilledError':
+                    case 'InvalidFulfillmentHandlerError':
+                        this.notificationService.error(addFulfillmentToOrder.message);
+                        break;
+                    case 'FulfillmentStateTransitionError':
+                        this.notificationService.error(addFulfillmentToOrder.transitionError);
+                        break;
+                    case 'CreateFulfillmentError':
+                        this.notificationService.error(addFulfillmentToOrder.fulfillmentHandlerError);
+                        break;
+                    case undefined:
+                        this.notificationService.error(JSON.stringify(addFulfillmentToOrder));
+                        break;
+                    default:
+                        assertNever(addFulfillmentToOrder);
+                }
+            }
+        });
+    }
+    transitionFulfillment(id, state) {
+        this.dataService.order
+            .transitionFulfillmentToState(id, state)
+            .pipe(switchMap(result => this.refetchOrder(result)))
+            .subscribe(() => {
+            this.notificationService.success(marker('order.successfully-updated-fulfillment'));
+        });
+    }
+    cancelOrRefund(order) {
+        const isRefundable = this.orderHasSettledPayments(order);
+        if (order.state === 'PaymentAuthorized' || order.active === true || !isRefundable) {
+            this.cancelOrder(order);
+        }
+        else {
+            this.refundOrder(order);
+        }
+    }
+    settleRefund(refund) {
+        this.modalService
+            .fromComponent(SettleRefundDialogComponent, {
+            size: 'md',
+            locals: {
+                refund,
+            },
+        })
+            .pipe(switchMap(transactionId => {
+            if (transactionId) {
+                return this.dataService.order.settleRefund({
+                    transactionId,
+                    id: refund.id,
+                }, this.id);
+            }
+            else {
+                return of(undefined);
+            }
+        }))
+            .subscribe(result => {
+            if (result) {
+                this.notificationService.success(marker('order.settle-refund-success'));
+            }
+        });
+    }
+    addNote(event) {
+        const { note, isPublic } = event;
+        this.dataService.order
+            .addNoteToOrder({
+            id: this.id,
+            note,
+            isPublic,
+        })
+            .pipe(switchMap(result => this.refetchOrder(result)))
+            .subscribe(result => {
+            this.notificationService.success(marker('common.notify-create-success'), {
+                entity: 'Note',
+            });
+        });
+    }
+    updateNote(entry) {
+        this.modalService
+            .fromComponent(EditNoteDialogComponent, {
+            closable: true,
+            locals: {
+                displayPrivacyControls: true,
+                note: entry.data.note,
+                noteIsPrivate: !entry.isPublic,
+            },
+        })
+            .pipe(switchMap(result => {
+            if (result) {
+                return this.dataService.order.updateOrderNote({
+                    noteId: entry.id,
+                    isPublic: !result.isPrivate,
+                    note: result.note,
+                });
+            }
+            else {
+                return EMPTY;
+            }
+        }))
+            .subscribe(result => {
+            this.fetchHistory.next();
+            this.notificationService.success(marker('common.notify-update-success'), {
+                entity: 'Note',
+            });
+        });
+    }
+    deleteNote(entry) {
+        return this.modalService
+            .dialog({
+            title: marker('common.confirm-delete-note'),
+            body: entry.data.note,
+            buttons: [
+                { type: 'secondary', label: marker('common.cancel') },
+                { type: 'danger', label: marker('common.delete'), returnValue: true },
+            ],
+        })
+            .pipe(switchMap(res => (res ? this.dataService.order.deleteOrderNote(entry.id) : EMPTY)))
+            .subscribe(() => {
+            this.fetchHistory.next();
+            this.notificationService.success(marker('common.notify-delete-success'), {
+                entity: 'Note',
+            });
+        });
+    }
+    orderHasSettledPayments(order) {
+        return !!order.payments?.find(p => p.state === 'Settled');
+    }
+    cancelOrder(order) {
+        this.modalService
+            .fromComponent(CancelOrderDialogComponent, {
+            size: 'xl',
+            locals: {
+                order,
+            },
+        })
+            .pipe(switchMap(input => {
+            if (input) {
+                return this.dataService.order.cancelOrder(input);
+            }
+            else {
+                return of(undefined);
+            }
+        }), switchMap(result => this.refetchOrder(result)))
+            .subscribe(result => {
+            if (result) {
+                this.notificationService.success(marker('order.cancelled-order-success'));
+            }
+        });
+    }
+    refundOrder(order) {
+        this.modalService
+            .fromComponent(RefundOrderDialogComponent, {
+            size: 'xl',
+            locals: {
+                order,
+            },
+        })
+            .pipe(switchMap(input => {
+            if (!input) {
+                return of(undefined);
+            }
+            if (input.cancel.lines?.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-items-success'), {
+                                count: summate(input.cancel.lines, 'quantity'),
+                            });
+                            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.refunds.length) {
+                return forkJoin(input.refunds.map(refund => this.dataService.order.refundOrder(refund).pipe(map(res => res.refundOrder))));
+            }
+            else {
+                return [undefined];
+            }
+        }))
+            .subscribe(results => {
+            for (const result of results ?? []) {
+                if (result) {
+                    switch (result.__typename) {
+                        case 'Refund':
+                            if (result.state === 'Failed') {
+                                this.notificationService.error(marker('order.refund-order-failed'));
+                            }
+                            else {
+                                this.notificationService.success(marker('order.refund-order-success'));
+                            }
+                            break;
+                        case 'AlreadyRefundedError':
+                        case 'NothingToRefundError':
+                        case 'PaymentOrderMismatchError':
+                        case 'RefundOrderStateError':
+                        case 'RefundStateTransitionError':
+                            this.notificationService.error(result.message);
+                            break;
+                    }
+                }
+            }
+            this.refetchOrder(results?.[0]).subscribe();
+        });
+    }
+    refetchOrder(result) {
+        this.fetchHistory.next();
+        if (result) {
+            return this.dataService.order.getOrder(this.id).single$;
+        }
+        else {
+            return of(undefined);
+        }
+    }
+    setFormValues(entity) {
+        if (this.customFields.length) {
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['customFields']), entity);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: OrderTransitionService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderDetailComponent, selector: "vdr-order-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n  <vdr-action-bar *ngIf=\"entity$ | async as order\">\n    <vdr-ab-left> </vdr-ab-left>\n\n    <vdr-ab-right>\n      <vdr-action-bar-items locationId=\"order-detail\"></vdr-action-bar-items>\n      <button\n        class=\"button primary mr-1\"\n        *ngIf=\"\n          order.type !== 'Aggregate' &&\n          (order.state === 'ArrangingPayment' ||\n            order.state === 'ArrangingAdditionalPayment') &&\n          (hasUnsettledModifications(order) ||\n            0 < outstandingPaymentAmount(order))\n        \"\n        (click)=\"addManualPayment(order)\"\n      >\n        {{ \"order.add-payment-to-order\" | translate }}\n        ({{\n          outstandingPaymentAmount(order) | localeCurrency : order.currencyCode\n        }})\n      </button>\n      <button\n        class=\"button primary mr-1\"\n        *ngIf=\"\n          order.type !== 'Aggregate' &&\n          order.active === false &&\n          order.state !== 'ArrangingAdditionalPayment' &&\n          order.state !== 'ArrangingPayment' &&\n          0 < outstandingPaymentAmount(order)\n        \"\n        (click)=\"transitionToState('ArrangingAdditionalPayment')\"\n      >\n        {{ \"order.arrange-additional-payment\" | translate }}\n      </button>\n      <button\n        *ngIf=\"order.type !== 'Aggregate'\"\n        class=\"button primary mr-1\"\n        (click)=\"fulfillOrder()\"\n        [disabled]=\"!canAddFulfillment(order)\"\n      >\n        {{ \"order.fulfill-order\" | translate }}\n      </button>\n      <vdr-action-bar-dropdown-menu\n        [alwaysShow]=\"true\"\n        locationId=\"order-detail\"\n      >\n        <ng-container\n          *ngIf=\"\n            order.type !== 'Aggregate' && order.nextStates.includes('Modifying')\n          \"\n        >\n          <button\n            type=\"button\"\n            vdrDropdownItem\n            (click)=\"transitionToModifying()\"\n          >\n            <clr-icon shape=\"pencil\"></clr-icon>\n            {{ \"order.modify-order\" | translate }}\n          </button>\n          <div class=\"dropdown-divider\"></div>\n        </ng-container>\n        <button\n          type=\"button\"\n          vdrDropdownItem\n          *ngIf=\"\n            order.type !== 'Aggregate' && order.nextStates.includes('Cancelled')\n          \"\n          (click)=\"cancelOrRefund(order)\"\n        >\n          <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\n          <ng-container *ngIf=\"orderHasSettledPayments(order); else cancelOnly\">\n            {{ \"order.refund-and-cancel-order\" | translate }}\n          </ng-container>\n          <ng-template #cancelOnly>\n            {{ \"order.cancel-order\" | translate }}\n          </ng-template>\n        </button>\n\n        <ng-container *ngIf=\"(nextStates$ | async)?.length\">\n          <div class=\"dropdown-divider\"></div>\n          <button\n            *ngFor=\"let nextState of nextStates$ | async\"\n            type=\"button\"\n            vdrDropdownItem\n            (click)=\"transitionToState(nextState)\"\n          >\n            <clr-icon shape=\"step-forward-2\"></clr-icon>\n            {{\n              \"order.transition-to-state\"\n                | translate\n                  : { state: (nextState | stateI18nToken | translate) }\n            }}\n          </button>\n        </ng-container>\n        <div class=\"dropdown-divider\"></div>\n        <button\n          type=\"button\"\n          vdrDropdownItem\n          (click)=\"manuallyTransitionToState(order)\"\n        >\n          <clr-icon shape=\"step-forward-2\" class=\"is-warning\"></clr-icon>\n          {{ \"order.manually-transition-to-state\" | translate }}\n        </button>\n      </vdr-action-bar-dropdown-menu>\n    </vdr-ab-right>\n  </vdr-action-bar>\n</vdr-page-block>\n\n<vdr-page-detail-layout *ngIf=\"entity$ | async as order\">\n  <vdr-page-detail-sidebar>\n    <vdr-card [title]=\"'order.state' | translate\">\n      <ng-template vdrCardControls>\n        <button\n          class=\"button-small\"\n          (click)=\"openStateDiagram()\"\n          [title]=\"'order.order-state-diagram' | translate\"\n        >\n          <clr-icon shape=\"list\"></clr-icon>\n        </button>\n      </ng-template>\n      <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\n    </vdr-card>\n    <vdr-card [title]=\"'order.customer' | translate\">\n      <ng-template vdrCardControls>\n        <button\n          *vdrIfPermissions=\"['UpdateOrder', 'ReadCustomer']\"\n          class=\"button-small\"\n          (click)=\"setOrderCustomer()\"\n          [title]=\"'order.assign-order-to-another-customer' | translate\"\n        >\n          <clr-icon shape=\"switch\"></clr-icon>\n        </button>\n      </ng-template>\n      <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\n      <vdr-labeled-data\n        class=\"mt-2\"\n        [label]=\"'order.shipping-address' | translate\"\n        *ngIf=\"getOrderAddressLines(order.shippingAddress).length\"\n      >\n        <vdr-formatted-address\n          [address]=\"order.shippingAddress\"\n          class=\"mt-1\"\n        ></vdr-formatted-address>\n      </vdr-labeled-data>\n      <vdr-labeled-data\n        [label]=\"'order.billing-address' | translate\"\n        *ngIf=\"getOrderAddressLines(order.billingAddress).length\"\n      >\n        <vdr-formatted-address\n          [address]=\"order.billingAddress\"\n          class=\"mt-1\"\n        ></vdr-formatted-address>\n      </vdr-labeled-data>\n    </vdr-card>\n    <vdr-card\n      [title]=\"'order.payments' | translate\"\n      *ngIf=\"order.payments?.length\"\n    >\n      <vdr-order-payment-card\n        *ngFor=\"let payment of order.payments\"\n        [currencyCode]=\"order.currencyCode\"\n        [payment]=\"payment\"\n        (settlePayment)=\"settlePayment($event)\"\n        (transitionPaymentState)=\"transitionPaymentState($event)\"\n        (settleRefund)=\"settleRefund($event)\"\n      ></vdr-order-payment-card>\n    </vdr-card>\n    <vdr-card *ngIf=\"order.fulfillments?.length\">\n      <vdr-fulfillment-card\n        *ngFor=\"let fulfillment of order.fulfillments\"\n        [fulfillment]=\"fulfillment\"\n        [order]=\"order\"\n        (transitionState)=\"transitionFulfillment(fulfillment.id, $event)\"\n      ></vdr-fulfillment-card>\n    </vdr-card>\n    <vdr-card>\n      <vdr-page-entity-info\n        *ngIf=\"entity$ | async as entity\"\n        [entity]=\"entity\"\n      />\n    </vdr-card>\n  </vdr-page-detail-sidebar>\n\n  <vdr-page-block>\n    <vdr-seller-orders-card\n      class=\"mb-2\"\n      *ngIf=\"order.sellerOrders.length\"\n      [orderId]=\"order.id\"\n    ></vdr-seller-orders-card>\n    <vdr-card [paddingX]=\"false\">\n      <vdr-order-table\n        [order]=\"order\"\n        [orderLineCustomFields]=\"orderLineCustomFields\"\n      ></vdr-order-table>\n    </vdr-card>\n    <vdr-card [title]=\"'order.tax-summary' | translate\" [paddingX]=\"false\">\n      <table class=\"table\">\n        <thead>\n          <tr>\n            <th>{{ \"common.description\" | translate }}</th>\n            <th>{{ \"order.tax-rate\" | translate }}</th>\n            <th>{{ \"order.tax-base\" | translate }}</th>\n            <th>{{ \"order.tax-total\" | translate }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of order.taxSummary\">\n            <td>{{ row.description }}</td>\n            <td>{{ row.taxRate / 100 | percent : \"0.0-2\" }}</td>\n            <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\n            <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </vdr-card>\n    <vdr-card\n      [title]=\"'common.custom-fields' | translate\"\n      *ngIf=\"customFields.length\"\n    >\n      <vdr-tabbed-custom-fields\n        entityName=\"Order\"\n        [customFields]=\"customFields\"\n        [customFieldsFormGroup]=\"detailForm.get('customFields')\"\n        [readonly]=\"!('UpdateOrder' | hasPermission)\"\n      />\n      <button\n        style=\"margin-top: 1rem\"\n        class=\"button primary\"\n        (click)=\"updateCustomFields()\"\n        [disabled]=\"\n          detailForm.get('customFields')?.pristine ||\n          detailForm.get('customFields')?.invalid\n        \"\n      >\n        {{ \"common.update\" | translate }}\n      </button>\n    </vdr-card>\n    <vdr-custom-detail-component-host\n      locationId=\"order-detail\"\n      [entity$]=\"entity$\"\n      [detailForm]=\"detailForm\"\n    ></vdr-custom-detail-component-host>\n\n    <vdr-card [title]=\"'order.order-history' | translate\">\n      <vdr-order-history\n        [order]=\"order\"\n        [history]=\"history$ | async\"\n        (addNote)=\"addNote($event)\"\n        (updateNote)=\"updateNote($event)\"\n        (deleteNote)=\"deleteNote($event)\"\n      ></vdr-order-history>\n    </vdr-card>\n  </vdr-page-block>\n</vdr-page-detail-layout>\n", styles: [".shipping-address{list-style-type:none;line-height:1.3em}.order-cards h6{margin-top:6px;color:var(--color-text-200)}vdr-order-payment-card+vdr-order-payment-card{margin-top:calc(var(--space-unit) * 2)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "component", type: OrderPaymentCardComponent, selector: "vdr-order-payment-card", inputs: ["payment", "currencyCode"], outputs: ["settlePayment", "transitionPaymentState", "settleRefund"] }, { kind: "component", type: OrderHistoryComponent, selector: "vdr-order-history", inputs: ["order", "history"], outputs: ["addNote", "updateNote", "deleteNote"] }, { kind: "component", type: FulfillmentCardComponent, selector: "vdr-fulfillment-card", inputs: ["fulfillment", "order"], outputs: ["transitionState"] }, { kind: "component", type: OrderTableComponent, selector: "vdr-order-table", inputs: ["order", "orderLineCustomFields", "isDraft"], outputs: ["adjust", "remove"] }, { kind: "component", type: SellerOrdersCardComponent, selector: "vdr-seller-orders-card", inputs: ["orderId"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-order-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\n  <vdr-action-bar *ngIf=\"entity$ | async as order\">\n    <vdr-ab-left> </vdr-ab-left>\n\n    <vdr-ab-right>\n      <vdr-action-bar-items locationId=\"order-detail\"></vdr-action-bar-items>\n      <button\n        class=\"button primary mr-1\"\n        *ngIf=\"\n          order.type !== 'Aggregate' &&\n          (order.state === 'ArrangingPayment' ||\n            order.state === 'ArrangingAdditionalPayment') &&\n          (hasUnsettledModifications(order) ||\n            0 < outstandingPaymentAmount(order))\n        \"\n        (click)=\"addManualPayment(order)\"\n      >\n        {{ \"order.add-payment-to-order\" | translate }}\n        ({{\n          outstandingPaymentAmount(order) | localeCurrency : order.currencyCode\n        }})\n      </button>\n      <button\n        class=\"button primary mr-1\"\n        *ngIf=\"\n          order.type !== 'Aggregate' &&\n          order.active === false &&\n          order.state !== 'ArrangingAdditionalPayment' &&\n          order.state !== 'ArrangingPayment' &&\n          0 < outstandingPaymentAmount(order)\n        \"\n        (click)=\"transitionToState('ArrangingAdditionalPayment')\"\n      >\n        {{ \"order.arrange-additional-payment\" | translate }}\n      </button>\n      <button\n        *ngIf=\"order.type !== 'Aggregate'\"\n        class=\"button primary mr-1\"\n        (click)=\"fulfillOrder()\"\n        [disabled]=\"!canAddFulfillment(order)\"\n      >\n        {{ \"order.fulfill-order\" | translate }}\n      </button>\n      <vdr-action-bar-dropdown-menu\n        [alwaysShow]=\"true\"\n        locationId=\"order-detail\"\n      >\n        <ng-container\n          *ngIf=\"\n            order.type !== 'Aggregate' && order.nextStates.includes('Modifying')\n          \"\n        >\n          <button\n            type=\"button\"\n            vdrDropdownItem\n            (click)=\"transitionToModifying()\"\n          >\n            <clr-icon shape=\"pencil\"></clr-icon>\n            {{ \"order.modify-order\" | translate }}\n          </button>\n          <div class=\"dropdown-divider\"></div>\n        </ng-container>\n        <button\n          type=\"button\"\n          vdrDropdownItem\n          *ngIf=\"\n            order.type !== 'Aggregate' && order.nextStates.includes('Cancelled')\n          \"\n          (click)=\"cancelOrRefund(order)\"\n        >\n          <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\n          <ng-container *ngIf=\"orderHasSettledPayments(order); else cancelOnly\">\n            {{ \"order.refund-and-cancel-order\" | translate }}\n          </ng-container>\n          <ng-template #cancelOnly>\n            {{ \"order.cancel-order\" | translate }}\n          </ng-template>\n        </button>\n\n        <ng-container *ngIf=\"(nextStates$ | async)?.length\">\n          <div class=\"dropdown-divider\"></div>\n          <button\n            *ngFor=\"let nextState of nextStates$ | async\"\n            type=\"button\"\n            vdrDropdownItem\n            (click)=\"transitionToState(nextState)\"\n          >\n            <clr-icon shape=\"step-forward-2\"></clr-icon>\n            {{\n              \"order.transition-to-state\"\n                | translate\n                  : { state: (nextState | stateI18nToken | translate) }\n            }}\n          </button>\n        </ng-container>\n        <div class=\"dropdown-divider\"></div>\n        <button\n          type=\"button\"\n          vdrDropdownItem\n          (click)=\"manuallyTransitionToState(order)\"\n        >\n          <clr-icon shape=\"step-forward-2\" class=\"is-warning\"></clr-icon>\n          {{ \"order.manually-transition-to-state\" | translate }}\n        </button>\n      </vdr-action-bar-dropdown-menu>\n    </vdr-ab-right>\n  </vdr-action-bar>\n</vdr-page-block>\n\n<vdr-page-detail-layout *ngIf=\"entity$ | async as order\">\n  <vdr-page-detail-sidebar>\n    <vdr-card [title]=\"'order.state' | translate\">\n      <ng-template vdrCardControls>\n        <button\n          class=\"button-small\"\n          (click)=\"openStateDiagram()\"\n          [title]=\"'order.order-state-diagram' | translate\"\n        >\n          <clr-icon shape=\"list\"></clr-icon>\n        </button>\n      </ng-template>\n      <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\n    </vdr-card>\n    <vdr-card [title]=\"'order.customer' | translate\">\n      <ng-template vdrCardControls>\n        <button\n          *vdrIfPermissions=\"['UpdateOrder', 'ReadCustomer']\"\n          class=\"button-small\"\n          (click)=\"setOrderCustomer()\"\n          [title]=\"'order.assign-order-to-another-customer' | translate\"\n        >\n          <clr-icon shape=\"switch\"></clr-icon>\n        </button>\n      </ng-template>\n      <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\n      <vdr-labeled-data\n        class=\"mt-2\"\n        [label]=\"'order.shipping-address' | translate\"\n        *ngIf=\"getOrderAddressLines(order.shippingAddress).length\"\n      >\n        <vdr-formatted-address\n          [address]=\"order.shippingAddress\"\n          class=\"mt-1\"\n        ></vdr-formatted-address>\n      </vdr-labeled-data>\n      <vdr-labeled-data\n        [label]=\"'order.billing-address' | translate\"\n        *ngIf=\"getOrderAddressLines(order.billingAddress).length\"\n      >\n        <vdr-formatted-address\n          [address]=\"order.billingAddress\"\n          class=\"mt-1\"\n        ></vdr-formatted-address>\n      </vdr-labeled-data>\n    </vdr-card>\n    <vdr-card\n      [title]=\"'order.payments' | translate\"\n      *ngIf=\"order.payments?.length\"\n    >\n      <vdr-order-payment-card\n        *ngFor=\"let payment of order.payments\"\n        [currencyCode]=\"order.currencyCode\"\n        [payment]=\"payment\"\n        (settlePayment)=\"settlePayment($event)\"\n        (transitionPaymentState)=\"transitionPaymentState($event)\"\n        (settleRefund)=\"settleRefund($event)\"\n      ></vdr-order-payment-card>\n    </vdr-card>\n    <vdr-card *ngIf=\"order.fulfillments?.length\">\n      <vdr-fulfillment-card\n        *ngFor=\"let fulfillment of order.fulfillments\"\n        [fulfillment]=\"fulfillment\"\n        [order]=\"order\"\n        (transitionState)=\"transitionFulfillment(fulfillment.id, $event)\"\n      ></vdr-fulfillment-card>\n    </vdr-card>\n    <vdr-card>\n      <vdr-page-entity-info\n        *ngIf=\"entity$ | async as entity\"\n        [entity]=\"entity\"\n      />\n    </vdr-card>\n  </vdr-page-detail-sidebar>\n\n  <vdr-page-block>\n    <vdr-seller-orders-card\n      class=\"mb-2\"\n      *ngIf=\"order.sellerOrders.length\"\n      [orderId]=\"order.id\"\n    ></vdr-seller-orders-card>\n    <vdr-card [paddingX]=\"false\">\n      <vdr-order-table\n        [order]=\"order\"\n        [orderLineCustomFields]=\"orderLineCustomFields\"\n      ></vdr-order-table>\n    </vdr-card>\n    <vdr-card [title]=\"'order.tax-summary' | translate\" [paddingX]=\"false\">\n      <table class=\"table\">\n        <thead>\n          <tr>\n            <th>{{ \"common.description\" | translate }}</th>\n            <th>{{ \"order.tax-rate\" | translate }}</th>\n            <th>{{ \"order.tax-base\" | translate }}</th>\n            <th>{{ \"order.tax-total\" | translate }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let row of order.taxSummary\">\n            <td>{{ row.description }}</td>\n            <td>{{ row.taxRate / 100 | percent : \"0.0-2\" }}</td>\n            <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\n            <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </vdr-card>\n    <vdr-card\n      [title]=\"'common.custom-fields' | translate\"\n      *ngIf=\"customFields.length\"\n    >\n      <vdr-tabbed-custom-fields\n        entityName=\"Order\"\n        [customFields]=\"customFields\"\n        [customFieldsFormGroup]=\"detailForm.get('customFields')\"\n        [readonly]=\"!('UpdateOrder' | hasPermission)\"\n      />\n      <button\n        style=\"margin-top: 1rem\"\n        class=\"button primary\"\n        (click)=\"updateCustomFields()\"\n        [disabled]=\"\n          detailForm.get('customFields')?.pristine ||\n          detailForm.get('customFields')?.invalid\n        \"\n      >\n        {{ \"common.update\" | translate }}\n      </button>\n    </vdr-card>\n    <vdr-custom-detail-component-host\n      locationId=\"order-detail\"\n      [entity$]=\"entity$\"\n      [detailForm]=\"detailForm\"\n    ></vdr-custom-detail-component-host>\n\n    <vdr-card [title]=\"'order.order-history' | translate\">\n      <vdr-order-history\n        [order]=\"order\"\n        [history]=\"history$ | async\"\n        (addNote)=\"addNote($event)\"\n        (updateNote)=\"updateNote($event)\"\n        (deleteNote)=\"deleteNote($event)\"\n      ></vdr-order-history>\n    </vdr-card>\n  </vdr-page-block>\n</vdr-page-detail-layout>\n", styles: [".shipping-address{list-style-type:none;line-height:1.3em}.order-cards h6{margin-top:6px;color:var(--color-text-200)}vdr-order-payment-card+vdr-order-payment-card{margin-top:calc(var(--space-unit) * 2)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i1.NotificationService }, { type: i1.ModalService }, { type: OrderTransitionService }, { type: i2.FormBuilder }] });
+
+class OrderModificationSummaryComponent {
+    get adjustedLines() {
+        return (this.modifyOrderInput.adjustOrderLines || [])
+            .map(l => {
+            const line = this.orderSnapshot.lines.find(line => line.id === l.orderLineId);
+            if (line) {
+                const delta = l.quantity - line.quantity;
+                const sign = delta === 0 ? '' : delta > 0 ? '+' : '-';
+                return delta
+                    ? `${sign}${Math.abs(delta)} ${line.productVariant.name}`
+                    : line.productVariant.name;
+            }
+        })
+            .filter(notNullOrUndefined);
+    }
+    getModifiedFields(formGroup) {
+        if (!formGroup.dirty) {
+            return '';
+        }
+        return Object.entries(formGroup.controls)
+            .map(([key, control]) => {
+            if (control.dirty) {
+                return key;
+            }
+        })
+            .filter(notNullOrUndefined)
+            .join(', ');
+    }
+    getUpdatedShippingMethodLines() {
+        return Object.entries(this.updatedShippingMethods || {})
+            .map(([lineId, shippingMethod]) => {
+            const previousMethod = this.orderSnapshot.shippingLines.find(l => l.id === lineId);
+            if (!previousMethod) {
+                return;
+            }
+            const previousName = previousMethod.shippingMethod.name || previousMethod.shippingMethod.code;
+            const newName = shippingMethod.name || shippingMethod.code;
+            return `${previousName} -> ${newName}`;
+        })
+            .filter(notNullOrUndefined);
+    }
+    get couponCodeChanges() {
+        const originalCodes = this.orderSnapshot.couponCodes || [];
+        const newCodes = this.couponCodesControl.value || [];
+        const addedCodes = newCodes.filter(c => !originalCodes.includes(c)).map(c => `+ ${c}`);
+        const removedCodes = originalCodes.filter(c => !newCodes.includes(c)).map(c => `- ${c}`);
+        return [...addedCodes, ...removedCodes];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderModificationSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderModificationSummaryComponent, selector: "vdr-order-modification-summary", inputs: { orderSnapshot: "orderSnapshot", modifyOrderInput: "modifyOrderInput", addedLines: "addedLines", shippingAddressForm: "shippingAddressForm", billingAddressForm: "billingAddressForm", updatedShippingMethods: "updatedShippingMethods", couponCodesControl: "couponCodesControl" }, ngImport: i0, template: "<vdr-labeled-data\n        *ngIf=\"modifyOrderInput.adjustOrderLines?.length\"\n        [label]=\"\n                    'order.modification-adjusting-lines'\n                        | translate : { count: modifyOrderInput.adjustOrderLines?.length }\n                \"\n>\n    <div *ngFor=\"let line of adjustedLines\" class=\"mb-1\">\n        {{ line }}\n    </div>\n</vdr-labeled-data>\n<vdr-labeled-data\n        *ngIf=\"modifyOrderInput.addItems?.length\"\n        [label]=\"\n                    'order.modification-adding-items'\n                        | translate : { count: modifyOrderInput.addItems?.length }\n                \"\n>\n    <div *ngFor=\"let item of addedLines\">\n        {{ item.productVariant.name }} x {{ item.quantity }}\n    </div>\n</vdr-labeled-data>\n<vdr-labeled-data\n        *ngIf=\"modifyOrderInput.surcharges?.length\"\n        [label]=\"\n                    'order.modification-adding-surcharges'\n                        | translate : { count: modifyOrderInput.surcharges?.length }\n                \"\n>\n    <div *ngFor=\"let surcharge of modifyOrderInput.surcharges\" class=\"mb-1\">\n        {{ surcharge.description }}: {{ surcharge.price | localeCurrency : orderSnapshot.currencyCode }}\n    </div>\n</vdr-labeled-data>\n<vdr-labeled-data\n        *ngIf=\"getModifiedFields(shippingAddressForm) as updatedShippingFields\"\n        [label]=\"'order.modification-updating-shipping-address' | translate\"\n>\n    {{ updatedShippingFields }}\n</vdr-labeled-data>\n<vdr-labeled-data\n        *ngIf=\"getModifiedFields(billingAddressForm) as updatedBillingFields\"\n        [label]=\"'order.modification-updating-billing-address' | translate\"\n>\n    {{ updatedBillingFields }}\n</vdr-labeled-data>\n<vdr-labeled-data *ngIf=\"couponCodeChanges.length\" [label]=\"'order.set-coupon-codes' | translate\">\n    <div *ngFor=\"let change of couponCodeChanges\" class=\"mb-1\">{{ change }}</div>\n</vdr-labeled-data>\n<ng-container *ngIf=\"getUpdatedShippingMethodLines() as updatedShippingMethods\">\n    <vdr-labeled-data *ngIf=\"updatedShippingMethods.length\" [label]=\"'order.shipping-method' | translate\">\n        <div *ngFor=\"let change of updatedShippingMethods\" class=\"mb-1\">{{ change }}</div>\n    </vdr-labeled-data>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderModificationSummaryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-order-modification-summary', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-labeled-data\n        *ngIf=\"modifyOrderInput.adjustOrderLines?.length\"\n        [label]=\"\n                    'order.modification-adjusting-lines'\n                        | translate : { count: modifyOrderInput.adjustOrderLines?.length }\n                \"\n>\n    <div *ngFor=\"let line of adjustedLines\" class=\"mb-1\">\n        {{ line }}\n    </div>\n</vdr-labeled-data>\n<vdr-labeled-data\n        *ngIf=\"modifyOrderInput.addItems?.length\"\n        [label]=\"\n                    'order.modification-adding-items'\n                        | translate : { count: modifyOrderInput.addItems?.length }\n                \"\n>\n    <div *ngFor=\"let item of addedLines\">\n        {{ item.productVariant.name }} x {{ item.quantity }}\n    </div>\n</vdr-labeled-data>\n<vdr-labeled-data\n        *ngIf=\"modifyOrderInput.surcharges?.length\"\n        [label]=\"\n                    'order.modification-adding-surcharges'\n                        | translate : { count: modifyOrderInput.surcharges?.length }\n                \"\n>\n    <div *ngFor=\"let surcharge of modifyOrderInput.surcharges\" class=\"mb-1\">\n        {{ surcharge.description }}: {{ surcharge.price | localeCurrency : orderSnapshot.currencyCode }}\n    </div>\n</vdr-labeled-data>\n<vdr-labeled-data\n        *ngIf=\"getModifiedFields(shippingAddressForm) as updatedShippingFields\"\n        [label]=\"'order.modification-updating-shipping-address' | translate\"\n>\n    {{ updatedShippingFields }}\n</vdr-labeled-data>\n<vdr-labeled-data\n        *ngIf=\"getModifiedFields(billingAddressForm) as updatedBillingFields\"\n        [label]=\"'order.modification-updating-billing-address' | translate\"\n>\n    {{ updatedBillingFields }}\n</vdr-labeled-data>\n<vdr-labeled-data *ngIf=\"couponCodeChanges.length\" [label]=\"'order.set-coupon-codes' | translate\">\n    <div *ngFor=\"let change of couponCodeChanges\" class=\"mb-1\">{{ change }}</div>\n</vdr-labeled-data>\n<ng-container *ngIf=\"getUpdatedShippingMethodLines() as updatedShippingMethods\">\n    <vdr-labeled-data *ngIf=\"updatedShippingMethods.length\" [label]=\"'order.shipping-method' | translate\">\n        <div *ngFor=\"let change of updatedShippingMethods\" class=\"mb-1\">{{ change }}</div>\n    </vdr-labeled-data>\n</ng-container>" }]
+        }], propDecorators: { orderSnapshot: [{
+                type: Input
+            }], modifyOrderInput: [{
+                type: Input
+            }], addedLines: [{
+                type: Input
+            }], shippingAddressForm: [{
+                type: Input
+            }], billingAddressForm: [{
+                type: Input
+            }], updatedShippingMethods: [{
+                type: Input
+            }], couponCodesControl: [{
+                type: Input
+            }] } });
+
+var OrderEditResultType;
+(function (OrderEditResultType) {
+    OrderEditResultType[OrderEditResultType["Refund"] = 0] = "Refund";
+    OrderEditResultType[OrderEditResultType["Payment"] = 1] = "Payment";
+    OrderEditResultType[OrderEditResultType["PriceUnchanged"] = 2] = "PriceUnchanged";
+    OrderEditResultType[OrderEditResultType["Cancel"] = 3] = "Cancel";
+})(OrderEditResultType || (OrderEditResultType = {}));
+class OrderEditsPreviewDialogComponent {
+    get priceDifference() {
+        return this.order.totalWithTax - this.orderSnapshot.totalWithTax;
+    }
+    get amountToRefundTotal() {
+        return this.refundablePayments.reduce((total, payment) => total + payment.amountToRefundControl.value, 0);
+    }
+    ngOnInit() {
+        this.refundNote = this.modifyOrderInput.note || '';
+        this.refundablePayments = getRefundablePayments(this.order.payments || []);
+        this.refundablePayments.forEach(rp => {
+            rp.amountToRefundControl.addValidators(Validators.max(this.priceDifference * -1));
+        });
+        if (this.priceDifference < 0 && this.refundablePayments.length) {
+            this.onPaymentSelected(this.refundablePayments[0], true);
+        }
+    }
+    onPaymentSelected(payment, selected) {
+        if (selected) {
+            const outstandingRefundAmount = this.priceDifference * -1 -
+                this.refundablePayments
+                    .filter(p => p.id !== payment.id)
+                    .reduce((total, p) => total + p.amountToRefundControl.value, 0);
+            if (0 < outstandingRefundAmount) {
+                payment.amountToRefundControl.setValue(Math.min(outstandingRefundAmount, payment.refundableAmount));
+            }
+        }
+        else {
+            payment.amountToRefundControl.setValue(0);
+        }
+    }
+    refundsCoverDifference() {
+        return this.priceDifference * -1 === this.amountToRefundTotal;
+    }
+    cancel() {
+        this.resolveWith({
+            result: OrderEditResultType.Cancel,
+        });
+    }
+    submit() {
+        if (0 < this.priceDifference) {
+            this.resolveWith({
+                result: OrderEditResultType.Payment,
+            });
+        }
+        else if (this.priceDifference < 0) {
+            this.resolveWith({
+                result: OrderEditResultType.Refund,
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                refunds: this.refundablePayments
+                    .filter(rp => rp.selected && 0 < rp.amountToRefundControl.value)
+                    .map(payment => {
+                    return {
+                        reason: this.refundNote || this.modifyOrderInput.note,
+                        paymentId: payment.id,
+                        amount: payment.amountToRefundControl.value,
+                    };
+                }),
+            });
+        }
+        else {
+            this.resolveWith({
+                result: OrderEditResultType.PriceUnchanged,
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderEditsPreviewDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderEditsPreviewDialogComponent, selector: "vdr-order-edits-preview-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.confirm-modifications' | translate }}</ng-template>\n<vdr-order-table\n    [order]=\"order\"\n    [orderLineCustomFields]=\"orderLineCustomFields\"\n    class=\"order-edits-preview-table\"\n></vdr-order-table>\n<div class=\"payments-wrapper mb-2\">\n    <div class=\"flex-spacer\">\n        <vdr-payment-for-refund-selector\n            *ngIf=\"priceDifference < 0\"\n            class=\"\"\n            [refundablePayments]=\"refundablePayments\"\n            (paymentSelected)=\"onPaymentSelected($event.payment, $event.selected)\"\n            [order]=\"order\"\n        ></vdr-payment-for-refund-selector>\n    </div>\n    <div class=\"flex-spacer\">\n        <vdr-card [title]=\"'order.modify-order' | translate\">\n            <vdr-order-modification-summary\n                [orderSnapshot]=\"orderSnapshot\"\n                [modifyOrderInput]=\"modifyOrderInput\"\n                [addedLines]=\"addedLines\"\n                [shippingAddressForm]=\"shippingAddressForm\"\n                [billingAddressForm]=\"billingAddressForm\"\n                [couponCodesControl]=\"couponCodesControl\"\n                [updatedShippingMethods]=\"updatedShippingMethods\"\n            ></vdr-order-modification-summary>\n            <vdr-labeled-data [label]=\"'order.note' | translate\">\n                {{ modifyOrderInput.note || '-' }}\n            </vdr-labeled-data>\n            <vdr-form-field\n                [label]=\"'order.refund-cancellation-reason' | translate\"\n                *ngIf=\"priceDifference < 0\"\n            >\n                <textarea [(ngModel)]=\"refundNote\" name=\"refundNote\" required></textarea>\n            </vdr-form-field>\n        </vdr-card>\n    </div>\n</div>\n<ng-template vdrDialogButtons>\n    <div>\n        <div class=\"errors\">\n            <clr-alert\n                class=\"mb-1\"\n                *ngIf=\"priceDifference < 0 && !refundsCoverDifference()\"\n                [clrAlertType]=\"'danger'\"\n                [clrAlertClosable]=\"false\"\n            >\n                <clr-alert-item>\n                    {{ 'order.refund-total-warning' | translate }}\n                </clr-alert-item>\n            </clr-alert>\n        </div>\n        <div class=\"modal-buttons\">\n            <clr-alert class=\"\" [clrAlertType]=\"'primary'\" [clrAlertClosable]=\"false\">\n                <clr-alert-item>\n                    {{ 'order.modify-order-price-difference' | translate }}\n                    {{ 0 < priceDifference ? '+' : ''\n                    }}{{ priceDifference | localeCurrency : order.currencyCode }}\n                </clr-alert-item>\n            </clr-alert>\n            <button type=\"button\" class=\"btn\" (click)=\"cancel()\">\n                {{ 'common.cancel' | translate }}\n            </button>\n            <button\n                type=\"submit\"\n                (click)=\"submit()\"\n                [disabled]=\"priceDifference < 0 ? !refundsCoverDifference() : false\"\n                class=\"btn btn-primary\"\n            >\n                {{ 'common.confirm' | translate }}\n            </button>\n        </div>\n    </div>\n</ng-template>\n", styles: ["::ng-deep .order-edits-preview-table .table-wrapper{max-width:initial!important}.payments-wrapper{display:flex;gap:calc(var(--space-unit) * 2)}.modal-buttons{display:flex;justify-content:flex-end;gap:.6rem;gap:var(--clr-modal-footer-gap, .6rem)}\n"], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i3.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: OrderTableComponent, selector: "vdr-order-table", inputs: ["order", "orderLineCustomFields", "isDraft"], outputs: ["adjust", "remove"] }, { kind: "component", type: PaymentForRefundSelectorComponent, selector: "vdr-payment-for-refund-selector", inputs: ["refundablePayments", "order"], outputs: ["paymentSelected"] }, { kind: "component", type: OrderModificationSummaryComponent, selector: "vdr-order-modification-summary", inputs: ["orderSnapshot", "modifyOrderInput", "addedLines", "shippingAddressForm", "billingAddressForm", "updatedShippingMethods", "couponCodesControl"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderEditsPreviewDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-order-edits-preview-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.confirm-modifications' | translate }}</ng-template>\n<vdr-order-table\n    [order]=\"order\"\n    [orderLineCustomFields]=\"orderLineCustomFields\"\n    class=\"order-edits-preview-table\"\n></vdr-order-table>\n<div class=\"payments-wrapper mb-2\">\n    <div class=\"flex-spacer\">\n        <vdr-payment-for-refund-selector\n            *ngIf=\"priceDifference < 0\"\n            class=\"\"\n            [refundablePayments]=\"refundablePayments\"\n            (paymentSelected)=\"onPaymentSelected($event.payment, $event.selected)\"\n            [order]=\"order\"\n        ></vdr-payment-for-refund-selector>\n    </div>\n    <div class=\"flex-spacer\">\n        <vdr-card [title]=\"'order.modify-order' | translate\">\n            <vdr-order-modification-summary\n                [orderSnapshot]=\"orderSnapshot\"\n                [modifyOrderInput]=\"modifyOrderInput\"\n                [addedLines]=\"addedLines\"\n                [shippingAddressForm]=\"shippingAddressForm\"\n                [billingAddressForm]=\"billingAddressForm\"\n                [couponCodesControl]=\"couponCodesControl\"\n                [updatedShippingMethods]=\"updatedShippingMethods\"\n            ></vdr-order-modification-summary>\n            <vdr-labeled-data [label]=\"'order.note' | translate\">\n                {{ modifyOrderInput.note || '-' }}\n            </vdr-labeled-data>\n            <vdr-form-field\n                [label]=\"'order.refund-cancellation-reason' | translate\"\n                *ngIf=\"priceDifference < 0\"\n            >\n                <textarea [(ngModel)]=\"refundNote\" name=\"refundNote\" required></textarea>\n            </vdr-form-field>\n        </vdr-card>\n    </div>\n</div>\n<ng-template vdrDialogButtons>\n    <div>\n        <div class=\"errors\">\n            <clr-alert\n                class=\"mb-1\"\n                *ngIf=\"priceDifference < 0 && !refundsCoverDifference()\"\n                [clrAlertType]=\"'danger'\"\n                [clrAlertClosable]=\"false\"\n            >\n                <clr-alert-item>\n                    {{ 'order.refund-total-warning' | translate }}\n                </clr-alert-item>\n            </clr-alert>\n        </div>\n        <div class=\"modal-buttons\">\n            <clr-alert class=\"\" [clrAlertType]=\"'primary'\" [clrAlertClosable]=\"false\">\n                <clr-alert-item>\n                    {{ 'order.modify-order-price-difference' | translate }}\n                    {{ 0 < priceDifference ? '+' : ''\n                    }}{{ priceDifference | localeCurrency : order.currencyCode }}\n                </clr-alert-item>\n            </clr-alert>\n            <button type=\"button\" class=\"btn\" (click)=\"cancel()\">\n                {{ 'common.cancel' | translate }}\n            </button>\n            <button\n                type=\"submit\"\n                (click)=\"submit()\"\n                [disabled]=\"priceDifference < 0 ? !refundsCoverDifference() : false\"\n                class=\"btn btn-primary\"\n            >\n                {{ 'common.confirm' | translate }}\n            </button>\n        </div>\n    </div>\n</ng-template>\n", styles: ["::ng-deep .order-edits-preview-table .table-wrapper{max-width:initial!important}.payments-wrapper{display:flex;gap:calc(var(--space-unit) * 2)}.modal-buttons{display:flex;justify-content:flex-end;gap:.6rem;gap:var(--clr-modal-footer-gap, .6rem)}\n"] }]
+        }] });
+
+class OrderEditorComponent extends TypedBaseDetailComponent {
+    constructor(dataService, notificationService, modalService, orderTransitionService, changeDetectorRef) {
+        super();
+        this.dataService = dataService;
+        this.notificationService = notificationService;
+        this.modalService = modalService;
+        this.orderTransitionService = orderTransitionService;
+        this.changeDetectorRef = changeDetectorRef;
+        this.detailForm = new UntypedFormGroup({});
+        this.couponCodesControl = new FormControl([]);
+        this.modifyOrderInput = {
+            dryRun: true,
+            orderId: '',
+            addItems: [],
+            adjustOrderLines: [],
+            surcharges: [],
+            note: '',
+            refunds: [],
+            updateShippingAddress: {},
+            updateBillingAddress: {},
+        };
+        this.surchargeForm = new FormGroup({
+            description: new FormControl('', Validators.minLength(1)),
+            sku: new FormControl(''),
+            price: new FormControl(0),
+            priceIncludesTax: new FormControl(true),
+            taxRate: new FormControl(0),
+            taxDescription: new FormControl(''),
+        });
+        this.shippingAddressForm = new FormGroup({
+            fullName: new FormControl(''),
+            company: new FormControl(''),
+            streetLine1: new FormControl(''),
+            streetLine2: new FormControl(''),
+            city: new FormControl(''),
+            province: new FormControl(''),
+            postalCode: new FormControl(''),
+            countryCode: new FormControl(''),
+            phoneNumber: new FormControl(''),
+        });
+        this.billingAddressForm = new FormGroup({
+            fullName: new FormControl(''),
+            company: new FormControl(''),
+            streetLine1: new FormControl(''),
+            streetLine2: new FormControl(''),
+            city: new FormControl(''),
+            province: new FormControl(''),
+            postalCode: new FormControl(''),
+            countryCode: new FormControl(''),
+            phoneNumber: new FormControl(''),
+        });
+        this.note = '';
+        this.recalculateShipping = true;
+        this.editingShippingAddress = false;
+        this.editingBillingAddress = false;
+        this.updatedShippingMethods = {};
+        this.addedVariants = new Map();
+    }
+    ngOnInit() {
+        this.init();
+        this.addressCustomFields = this.getCustomFieldConfig('Address');
+        this.modifyOrderInput.orderId = this.route.snapshot.paramMap.get('id');
+        this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
+        this.entity$.pipe(take(1)).subscribe(order => {
+            this.orderSnapshot = this.createOrderSnapshot(order);
+            if (order.couponCodes.length) {
+                this.couponCodesControl.setValue(order.couponCodes);
+            }
+            this.surchargeForm.reset();
+            for (const [name, control] of Object.entries(this.shippingAddressForm.controls)) {
+                control.setValue(order.shippingAddress?.[name]);
+            }
+            this.addAddressCustomFieldsFormGroup(this.shippingAddressForm, order.shippingAddress);
+            for (const [name, control] of Object.entries(this.billingAddressForm.controls)) {
+                control.setValue(order.billingAddress?.[name]);
+            }
+            this.addAddressCustomFieldsFormGroup(this.billingAddressForm, order.billingAddress);
+            this.orderLineCustomFieldsFormArray = new UntypedFormArray([]);
+            for (const line of order.lines) {
+                const formGroup = new UntypedFormGroup({});
+                for (const { name } of this.orderLineCustomFields) {
+                    formGroup.addControl(name, new UntypedFormControl(line.customFields[name]));
+                }
+                formGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
+                    let modifyRow = this.modifyOrderInput.adjustOrderLines.find(l => l.orderLineId === line.id);
+                    if (!modifyRow) {
+                        modifyRow = {
+                            orderLineId: line.id,
+                            quantity: line.quantity,
+                        };
+                        this.modifyOrderInput.adjustOrderLines.push(modifyRow);
+                    }
+                    if (this.orderLineCustomFields.length) {
+                        modifyRow.customFields = value;
+                    }
+                });
+                this.orderLineCustomFieldsFormArray.push(formGroup);
+            }
+        });
+        this.addItemCustomFieldsFormArray = new UntypedFormArray([]);
+        this.addItemCustomFieldsForm = new UntypedFormGroup({});
+        for (const customField of this.orderLineCustomFields) {
+            this.addItemCustomFieldsForm.addControl(customField.name, new UntypedFormControl());
+        }
+        this.availableCountries$ = this.dataService.settings
+            .getAvailableCountries()
+            .mapSingle(result => result.countries.items)
+            .pipe(shareReplay(1));
+        this.dataService.order
+            .getOrderHistory(this.id, {
+            take: 1,
+            sort: {
+                createdAt: SortOrder.DESC,
+            },
+            filter: { type: { eq: HistoryEntryType.ORDER_STATE_TRANSITION } },
+        })
+            .single$.subscribe(({ order }) => {
+            this.previousState = order?.history.items[0].data.from;
+        });
+        this.uiLanguage$ = this.dataService.client
+            .uiState()
+            .stream$.pipe(map(({ uiState }) => uiState.language));
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    get addedLines() {
+        const getSinglePriceValue = (price) => price.__typename === 'SinglePrice' ? price.value : 0;
+        return (this.modifyOrderInput.addItems || [])
+            .map(row => {
+            const variantInfo = this.addedVariants.get(row.productVariantId);
+            if (variantInfo) {
+                return {
+                    id: this.getIdForAddedItem(row),
+                    featuredAsset: variantInfo.productAsset,
+                    productVariant: {
+                        id: variantInfo.productVariantId,
+                        name: variantInfo.productVariantName,
+                        sku: variantInfo.sku,
+                    },
+                    unitPrice: getSinglePriceValue(variantInfo.price),
+                    unitPriceWithTax: getSinglePriceValue(variantInfo.priceWithTax),
+                    quantity: row.quantity,
+                };
+            }
+        })
+            .filter(notNullOrUndefined);
+    }
+    getIdForAddedItem(row) {
+        return `added-${row.productVariantId}-${JSON.stringify(row.customFields || {})}`;
+    }
+    transitionToPriorState(order) {
+        this.orderTransitionService
+            .transitionToPreModifyingState(order.id, order.nextStates)
+            .subscribe(result => {
+            this.router.navigate(['..'], { relativeTo: this.route });
+        });
+    }
+    hasModifications() {
+        const { addItems, adjustOrderLines, surcharges } = this.modifyOrderInput;
+        return (!!addItems?.length ||
+            !!surcharges?.length ||
+            !!adjustOrderLines?.length ||
+            (this.shippingAddressForm.dirty && this.shippingAddressForm.valid) ||
+            (this.billingAddressForm.dirty && this.billingAddressForm.valid) ||
+            this.couponCodesControl.dirty ||
+            Object.entries(this.updatedShippingMethods).length > 0);
+    }
+    isLineModified(line) {
+        return !!this.modifyOrderInput.adjustOrderLines?.find(l => l.orderLineId === line.id && l.quantity !== line.quantity);
+    }
+    getInitialLineQuantity(lineId) {
+        const adjustedLine = this.modifyOrderInput.adjustOrderLines?.find(l => l.orderLineId === lineId);
+        if (adjustedLine) {
+            return adjustedLine.quantity;
+        }
+        const addedLine = this.modifyOrderInput.addItems?.find(l => this.getIdForAddedItem(l) === lineId);
+        if (addedLine) {
+            return addedLine.quantity ?? 1;
+        }
+        const line = this.orderSnapshot.lines.find(l => l.id === lineId);
+        return line ? line.quantity : 1;
+    }
+    updateLineQuantity(line, quantity) {
+        const { adjustOrderLines } = this.modifyOrderInput;
+        if (this.isAddedLine(line)) {
+            const row = this.modifyOrderInput.addItems?.find(l => l.productVariantId === line.productVariant.id);
+            if (row) {
+                row.quantity = +quantity;
+            }
+        }
+        else {
+            let row = adjustOrderLines?.find(l => l.orderLineId === line.id);
+            if (row && +quantity === line.quantity) {
+                // Remove the modification if the quantity is the same as
+                // the original order
+                adjustOrderLines?.splice(adjustOrderLines?.indexOf(row), 1);
+            }
+            if (!row) {
+                row = { orderLineId: line.id, quantity: +quantity };
+                adjustOrderLines?.push(row);
+            }
+            row.quantity = +quantity;
+        }
+    }
+    isAddedLine(line) {
+        return line.id.startsWith('added-');
+    }
+    updateAddedItemQuantity(item, quantity) {
+        const row = this.modifyOrderInput.addItems?.find(l => l.productVariantId === item.productVariant.id);
+        if (row) {
+            row.quantity = +quantity;
+        }
+    }
+    trackByProductVariantId(index, item) {
+        return item.productVariant.id;
+    }
+    getSelectedItemPrice(result) {
+        switch (result?.priceWithTax.__typename) {
+            case 'SinglePrice':
+                return result.priceWithTax.value;
+            default:
+                return 0;
+        }
+    }
+    addItemToOrder(result) {
+        if (!result) {
+            return;
+        }
+        const customFields = this.orderLineCustomFields.length
+            ? this.addItemCustomFieldsForm.value
+            : undefined;
+        let row = this.modifyOrderInput.addItems?.find(l => this.isMatchingAddItemRow(l, result, customFields));
+        if (!row) {
+            row = { productVariantId: result.productVariantId, quantity: 1 };
+            if (customFields) {
+                row.customFields = customFields;
+            }
+            this.modifyOrderInput.addItems?.push(row);
+        }
+        else {
+            row.quantity++;
+        }
+        if (customFields) {
+            const formGroup = new UntypedFormGroup({});
+            for (const [key, value] of Object.entries(customFields)) {
+                formGroup.addControl(key, new UntypedFormControl(value));
+            }
+            this.addItemCustomFieldsFormArray.push(formGroup);
+            formGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
+                if (row) {
+                    row.customFields = value;
+                }
+            });
+        }
+        this.addItemCustomFieldsForm.reset({});
+        this.addItemSelectedVariant = undefined;
+        this.addedVariants.set(result.productVariantId, result);
+    }
+    getShippingLineDetails(shippingLine) {
+        const updatedMethod = this.updatedShippingMethods[shippingLine.id];
+        if (updatedMethod) {
+            return {
+                name: updatedMethod.name || updatedMethod.code,
+                price: updatedMethod.priceWithTax,
+            };
+        }
+        else {
+            return {
+                name: shippingLine.shippingMethod.name || shippingLine.shippingMethod.code,
+                price: shippingLine.discountedPriceWithTax,
+            };
+        }
+    }
+    setShippingMethod(shippingLineId) {
+        const currentShippingMethod = this.updatedShippingMethods[shippingLineId] ??
+            this.entity?.shippingLines.find(l => l.id === shippingLineId)?.shippingMethod;
+        if (!currentShippingMethod) {
+            return;
+        }
+        this.dataService.order
+            .getDraftOrderEligibleShippingMethods(this.id)
+            .mapSingle(({ eligibleShippingMethodsForDraftOrder }) => eligibleShippingMethodsForDraftOrder)
+            .pipe(switchMap(methods => this.modalService
+            .fromComponent(SelectShippingMethodDialogComponent, {
+            locals: {
+                eligibleShippingMethods: methods,
+                currencyCode: this.entity?.currencyCode,
+                currentSelectionId: currentShippingMethod.id,
+            },
+        })
+            .pipe(map(result => {
+            if (result) {
+                return methods.find(method => method.id === result);
+            }
+        }))))
+            .subscribe(result => {
+            if (result) {
+                this.updatedShippingMethods[shippingLineId] = result;
+                this.changeDetectorRef.markForCheck();
+            }
+        });
+    }
+    isMatchingAddItemRow(row, result, customFields) {
+        return (row.productVariantId === result.productVariantId &&
+            JSON.stringify(row.customFields) === JSON.stringify(customFields));
+    }
+    removeAddedItem(id) {
+        this.modifyOrderInput.addItems = this.modifyOrderInput.addItems?.filter(l => {
+            const itemId = this.getIdForAddedItem(l);
+            return itemId !== id;
+        });
+    }
+    getSurchargePrices(surcharge) {
+        const priceWithTax = surcharge.priceIncludesTax
+            ? surcharge.price
+            : Math.round(surcharge.price * ((100 + (surcharge.taxRate || 0)) / 100));
+        const price = surcharge.priceIncludesTax
+            ? Math.round(surcharge.price / ((100 + (surcharge.taxRate || 0)) / 100))
+            : surcharge.price;
+        return {
+            price,
+            priceWithTax,
+        };
+    }
+    addSurcharge(value) {
+        this.modifyOrderInput.surcharges?.push(value);
+        this.surchargeForm.reset({
+            price: 0,
+            priceIncludesTax: true,
+            taxRate: 0,
+        });
+    }
+    removeSurcharge(index) {
+        this.modifyOrderInput.surcharges?.splice(index, 1);
+    }
+    previewAndModify(order) {
+        const modifyOrderInput = {
+            ...this.modifyOrderInput,
+            adjustOrderLines: this.modifyOrderInput.adjustOrderLines.map(line => transformRelationCustomFieldInputs(simpleDeepClone(line), this.orderLineCustomFields)),
+        };
+        const input = {
+            ...modifyOrderInput,
+            ...(this.billingAddressForm.dirty ? { updateBillingAddress: this.billingAddressForm.value } : {}),
+            ...(this.shippingAddressForm.dirty
+                ? { updateShippingAddress: this.shippingAddressForm.value }
+                : {}),
+            dryRun: true,
+            couponCodes: this.couponCodesControl.dirty ? this.couponCodesControl.value : undefined,
+            note: this.note ?? '',
+            options: {
+                recalculateShipping: this.recalculateShipping,
+            },
+        };
+        if (Object.entries(this.updatedShippingMethods).length) {
+            input.shippingMethodIds = order.shippingLines.map(l => this.updatedShippingMethods[l.id]
+                ? this.updatedShippingMethods[l.id].id
+                : l.shippingMethod.id);
+        }
+        this.dataService.order
+            .modifyOrder(input)
+            .pipe(switchMap(({ modifyOrder }) => {
+            switch (modifyOrder.__typename) {
+                case 'Order':
+                    return this.modalService.fromComponent(OrderEditsPreviewDialogComponent, {
+                        size: 'xl',
+                        closable: false,
+                        locals: {
+                            order: modifyOrder,
+                            orderSnapshot: this.orderSnapshot,
+                            orderLineCustomFields: this.orderLineCustomFields,
+                            modifyOrderInput: input,
+                            addedLines: this.addedLines,
+                            shippingAddressForm: this.shippingAddressForm,
+                            billingAddressForm: this.billingAddressForm,
+                            couponCodesControl: this.couponCodesControl,
+                            updatedShippingMethods: this.updatedShippingMethods,
+                        },
+                    });
+                case 'InsufficientStockError':
+                case 'NegativeQuantityError':
+                case 'NoChangesSpecifiedError':
+                case 'OrderLimitError':
+                case 'OrderModificationStateError':
+                case 'PaymentMethodMissingError':
+                case 'RefundPaymentIdMissingError':
+                case 'CouponCodeLimitError':
+                case 'CouponCodeExpiredError':
+                case 'IneligibleShippingMethodError':
+                case 'CouponCodeInvalidError': {
+                    this.notificationService.error(modifyOrder.message);
+                    return of(false);
+                }
+                case null:
+                case undefined:
+                    return of(false);
+                default:
+                    assertNever(modifyOrder);
+            }
+        }), switchMap(result => {
+            if (!result || result.result === OrderEditResultType.Cancel) {
+                // re-fetch so that the preview values get overwritten in the cache.
+                return this.dataService.order.getOrder(this.id).mapSingle(() => false);
+            }
+            else {
+                // Do the modification
+                const wetRunInput = {
+                    ...input,
+                    dryRun: false,
+                };
+                if (result.result === OrderEditResultType.Refund) {
+                    wetRunInput.refunds = result.refunds;
+                }
+                return this.dataService.order.modifyOrder(wetRunInput).pipe(switchMap(({ modifyOrder }) => {
+                    if (modifyOrder.__typename === 'Order') {
+                        const priceDelta = modifyOrder.totalWithTax - this.orderSnapshot.totalWithTax;
+                        const nextState = 0 < priceDelta ? 'ArrangingAdditionalPayment' : this.previousState;
+                        return this.dataService.order
+                            .transitionToState(order.id, nextState)
+                            .pipe(mapTo(true));
+                    }
+                    else {
+                        this.notificationService.error(modifyOrder.message);
+                        return EMPTY;
+                    }
+                }));
+            }
+        }))
+            .subscribe(result => {
+            if (result) {
+                this.router.navigate(['../'], { relativeTo: this.route });
+            }
+        });
+    }
+    addAddressCustomFieldsFormGroup(parentFormGroup, address) {
+        if (address && this.addressCustomFields.length) {
+            const addressCustomFieldsFormGroup = new UntypedFormGroup({});
+            for (const customFieldDef of this.addressCustomFields) {
+                const name = customFieldDef.name;
+                const value = address.customFields?.[name];
+                addressCustomFieldsFormGroup.addControl(name, new UntypedFormControl(value));
+            }
+            parentFormGroup.addControl('customFields', addressCustomFieldsFormGroup);
+        }
+    }
+    createOrderSnapshot(order) {
+        return {
+            totalWithTax: order.totalWithTax,
+            currencyCode: order.currencyCode,
+            couponCodes: order.couponCodes,
+            lines: [...order.lines].map(line => ({ ...line })),
+            shippingLines: [...order.shippingLines].map(line => ({ ...line })),
+        };
+    }
+    setFormValues(entity, languageCode) {
+        /* not used */
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderEditorComponent, deps: [{ token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: OrderTransitionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderEditorComponent, selector: "vdr-order-editor", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\n        <vdr-ab-left>\n            <div class=\"flex clr-align-items-center\"></div>\n        </vdr-ab-left>\n\n        <vdr-ab-right>\n            <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\n                {{ 'order.cancel-modification' | translate }}\n            </button>\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n\n<vdr-page-detail-layout *ngIf=\"entity as order\">\n    <vdr-page-detail-sidebar>\n        <vdr-card [title]=\"'order.modification-summary' | translate\">\n            <vdr-order-modification-summary\n                [orderSnapshot]=\"orderSnapshot\"\n                [modifyOrderInput]=\"modifyOrderInput\"\n                [addedLines]=\"addedLines\"\n                [shippingAddressForm]=\"shippingAddressForm\"\n                [billingAddressForm]=\"billingAddressForm\"\n                [couponCodesControl]=\"couponCodesControl\"\n                [updatedShippingMethods]=\"updatedShippingMethods\"\n            ></vdr-order-modification-summary>\n\n            <div *ngIf=\"!hasModifications()\" class=\"no-modifications\">\n                {{ 'order.no-modifications-made' | translate }}\n            </div>\n\n            <div class=\"summary-controls\">\n                <vdr-form-field [label]=\"'order.note' | translate\">\n                    <textarea\n                        [(ngModel)]=\"note\"\n                        name=\"note\"\n                        required\n                        [disabled]=\"!hasModifications()\"\n                    ></textarea>\n                </vdr-form-field>\n                <label class=\"flex items-center\">\n                    <input\n                        type=\"checkbox\"\n                        [(ngModel)]=\"recalculateShipping\"\n                        [disabled]=\"!hasModifications()\"\n                    />\n                    <div class=\"ml-1\">{{ 'order.modification-recalculate-shipping' | translate }}</div>\n                </label>\n                <button\n                    class=\"btn btn-primary mt-2\"\n                    [disabled]=\"!hasModifications()\"\n                    (click)=\"previewAndModify(order)\"\n                >\n                    {{ 'order.preview-changes' | translate }}\n                </button>\n            </div>\n        </vdr-card>\n        <vdr-card [title]=\"'order.set-coupon-codes' | translate\">\n            <vdr-coupon-code-selector [control]=\"couponCodesControl\"></vdr-coupon-code-selector>\n        </vdr-card>\n        <vdr-card [title]=\"'order.shipping-address' | translate\">\n            <ng-template vdrCardControls>\n                <button\n                    class=\"button-small\"\n                    [title]=\"'order.edit-shipping-address' | translate\"\n                    (click)=\"editingShippingAddress = !editingShippingAddress\"\n                >\n                    <clr-icon shape=\"edit\"></clr-icon>\n                </button>\n            </ng-template>\n            <vdr-formatted-address\n                *ngIf=\"!editingShippingAddress\"\n                [address]=\"shippingAddressForm.value\"\n            ></vdr-formatted-address>\n            <vdr-address-form\n                *ngIf=\"editingShippingAddress\"\n                [formGroup]=\"shippingAddressForm\"\n                [availableCountries]=\"availableCountries$ | async\"\n                [customFields]=\"addressCustomFields\"\n            ></vdr-address-form>\n        </vdr-card>\n        <vdr-card [title]=\"'order.billing-address' | translate\">\n            <ng-template vdrCardControls>\n                <button\n                    class=\"button-small\"\n                    [title]=\"'order.edit-billing-address' | translate\"\n                    (click)=\"editingBillingAddress = !editingBillingAddress\"\n                >\n                    <clr-icon shape=\"edit\"></clr-icon>\n                </button>\n            </ng-template>\n            <vdr-formatted-address\n                *ngIf=\"!editingBillingAddress\"\n                [address]=\"billingAddressForm.value\"\n            ></vdr-formatted-address>\n            <vdr-address-form\n                *ngIf=\"editingBillingAddress\"\n                [formGroup]=\"billingAddressForm\"\n                [availableCountries]=\"availableCountries$ | async\"\n                [customFields]=\"addressCustomFields\"\n            ></vdr-address-form>\n        </vdr-card>\n    </vdr-page-detail-sidebar>\n\n    <vdr-page-block>\n        <vdr-card [paddingX]=\"false\">\n            <vdr-data-table-2 id=\"modify-order\" class=\"order-table\" [items]=\"order.lines.concat(addedLines)\">\n                <!-- Here we define all the available columns -->\n                <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\n                    <ng-template let-line=\"item\">\n                        {{ line.id }}\n                    </ng-template>\n                </vdr-dt2-column>\n                <vdr-dt2-column\n                    id=\"created-at\"\n                    [heading]=\"'common.created-at' | translate\"\n                    [hiddenByDefault]=\"true\"\n                >\n                    <ng-template let-line=\"item\">\n                        {{ line.createdAt | localeDate : 'short' }}\n                    </ng-template>\n                </vdr-dt2-column>\n                <vdr-dt2-column\n                    id=\"updated-at\"\n                    [heading]=\"'common.updated-at' | translate\"\n                    [hiddenByDefault]=\"true\"\n                >\n                    <ng-template let-line=\"item\">\n                        {{ line.updatedAt | localeDate : 'short' }}\n                    </ng-template>\n                </vdr-dt2-column>\n                <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n                    <ng-template let-line=\"item\">\n                        <div class=\"image-placeholder\">\n                            <img\n                                *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\n                                [src]=\"asset | assetPreview : 'tiny'\"\n                            />\n                            <ng-template #imagePlaceholder>\n                                <div class=\"placeholder\">\n                                    <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n                                </div>\n                            </ng-template>\n                        </div>\n                    </ng-template>\n                </vdr-dt2-column>\n                <vdr-dt2-column\n                    id=\"product-name\"\n                    [heading]=\"'order.product-name' | translate\"\n                    [optional]=\"false\"\n                >\n                    <ng-template let-line=\"item\">\n                        {{ line.productVariant.name }}\n                    </ng-template>\n                </vdr-dt2-column>\n                <vdr-dt2-column id=\"product-sku\" [heading]=\"'order.product-sku' | translate\">\n                    <ng-template let-line=\"item\">\n                        {{ line.productVariant.sku }}\n                    </ng-template>\n                </vdr-dt2-column>\n                <vdr-dt2-column id=\"unit-price\" [heading]=\"'order.unit-price' | translate\">\n                    <ng-template let-line=\"item\">\n                        <div class=\"text-center\">\n                            <div>{{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}</div>\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                                {{ line.unitPrice | localeCurrency : order.currencyCode }}\n                            </div>\n                        </div>\n                    </ng-template>\n                </vdr-dt2-column>\n                <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\" [optional]=\"false\">\n                    <ng-template let-line=\"item\">\n                        <input\n                            type=\"number\"\n                            class=\"draft-qty mr-1\"\n                            min=\"0\"\n                            [value]=\"getInitialLineQuantity(line.id)\"\n                            (input)=\"updateLineQuantity(line, $event.target.value)\"\n                        />\n                        <button\n                            class=\"button-small\"\n                            *ngIf=\"isAddedLine(line)\"\n                            (click)=\"removeAddedItem(line.id)\"\n                        >\n                            <clr-icon shape=\"trash\"></clr-icon>\n                        </button>\n                        <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\n                        <vdr-line-fulfillment\n                            [line]=\"line\"\n                            [allOrderFulfillments]=\"order.fulfillments\"\n                            [orderState]=\"order.state\"\n                        ></vdr-line-fulfillment>\n                    </ng-template>\n                </vdr-dt2-column>\n                <vdr-dt2-column\n                    *ngFor=\"let customField of orderLineCustomFields\"\n                    [id]=\"customField.name\"\n                    [heading]=\"customField | customFieldLabel : (uiLanguage$ | async)\"\n                    [hiddenByDefault]=\"true\"\n                >\n                    <ng-template let-line=\"item\" let-index=\"index\">\n                        <vdr-custom-field-control\n                            [compact]=\"true\"\n                            [entityName]=\"'OrderLine'\"\n                            [customField]=\"customField\"\n                            [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.at(index)\"\n                        />\n                    </ng-template>\n                </vdr-dt2-column>\n            </vdr-data-table-2>\n        </vdr-card>\n        <vdr-card [title]=\"'order.add-item-to-order' | translate\">\n            <vdr-product-variant-selector class=\"mb-4\" (productSelected)=\"addItemSelectedVariant = $event\">\n            </vdr-product-variant-selector>\n            <div class=\"flex\">\n                <div>\n                    <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb-4\">\n                        <img\n                            *ngIf=\"addItemSelectedVariant.productAsset as asset\"\n                            [src]=\"asset | assetPreview : 'tiny'\"\n                            class=\"mr-4 add-item-thumb\"\n                        />\n                        <div>\n                            <strong class=\"mr-4\">{{ addItemSelectedVariant.productVariantName }}</strong>\n                            <small>{{ addItemSelectedVariant.sku }}</small>\n                            <div>\n                                {{\n                                    getSelectedItemPrice(addItemSelectedVariant)\n                                        | localeCurrency : order.currencyCode\n                                }}\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"form-grid\" *ngIf=\"addItemSelectedVariant\">\n                        <ng-container *ngFor=\"let customField of orderLineCustomFields\">\n                            <vdr-custom-field-control\n                                [readonly]=\"!addItemSelectedVariant\"\n                                [customField]=\"customField\"\n                                [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\n                                entityName=\"OrderLine\"\n                                [compact]=\"true\"\n                            ></vdr-custom-field-control>\n                        </ng-container>\n                    </div>\n                </div>\n                <div class=\"flex-spacer\"></div>\n                <div>\n                    <button\n                        *ngIf=\"addItemSelectedVariant\"\n                        class=\"btn btn-secondary\"\n                        [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\n                        (click)=\"addItemToOrder(addItemSelectedVariant)\"\n                    >\n                        {{ 'order.add-item-to-order' | translate }}\n                    </button>\n                </div>\n            </div>\n        </vdr-card>\n        <vdr-card [title]=\"'order.shipping' | translate\">\n            <div *ngFor=\"let shippingLine of order.shippingLines\" class=\"flex items-center\">\n                <ng-container *ngIf=\"getShippingLineDetails(shippingLine) as details\">\n                    <div>{{ details.name }}:</div>\n                    <div class=\"mx-1\">\n                        {{ details.price | localeCurrency : order.currencyCode }}\n                    </div>\n                    <button class=\"button-small\" (click)=\"setShippingMethod(shippingLine.id)\">\n                        {{ 'order.set-shipping-method' | translate }}\n                    </button>\n                </ng-container>\n            </div>\n        </vdr-card>\n        <vdr-card [title]=\"'order.add-surcharge' | translate\">\n            <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\n                <div class=\"form-grid\">\n                    <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\n                        ><input id=\"description\" type=\"text\" formControlName=\"description\"\n                    /></vdr-form-field>\n                    <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\n                        ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\n                    /></vdr-form-field>\n                    <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\n                        <vdr-currency-input\n                            [currencyCode]=\"order.currencyCode\"\n                            id=\"price\"\n                            formControlName=\"price\"\n                        ></vdr-currency-input>\n                    </vdr-form-field>\n                    <vdr-form-field\n                        [label]=\"\n                            'catalog.price-includes-tax-at'\n                                | translate : { rate: surchargeForm.get('taxRate')?.value ?? 0 }\n                        \"\n                        for=\"priceIncludesTax\"\n                        ><input\n                            id=\"priceIncludesTax\"\n                            type=\"checkbox\"\n                            clrCheckbox\n                            formControlName=\"priceIncludesTax\"\n                    /></vdr-form-field>\n                    <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\n                        <vdr-affixed-input suffix=\"%\"\n                            ><input id=\"taxRate\" type=\"number\" min=\"0\" max=\"100\" formControlName=\"taxRate\"\n                        /></vdr-affixed-input>\n                    </vdr-form-field>\n                    <vdr-form-field [label]=\"'order.tax-description' | translate\" for=\"taxDescription\"\n                        ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\n                    /></vdr-form-field>\n                </div>\n                <button\n                    class=\"btn btn-secondary mt-2\"\n                    [disabled]=\"\n                        surchargeForm.invalid ||\n                        surchargeForm.pristine ||\n                        surchargeForm.get('price')?.value === 0 ||\n                        !surchargeForm.get('description')?.value\n                    \"\n                >\n                    {{ 'order.add-surcharge' | translate }}\n                </button>\n            </form>\n        </vdr-card>\n    </vdr-page-block>\n</vdr-page-detail-layout>\n", styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table img{border-radius:var(--border-radius-img)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}.order-table .draft-qty{max-width:48px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}.order-table .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .thumb img{width:50px;height:50px}.order-table .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.order-table .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}.add-item-thumb{max-width:50px}.no-modifications{color:var(--color-grey-400)}.summary-controls{border-top:1px solid var(--color-weight-200);margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 1)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "component", type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "component", type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: ["couponCodes", "control"], outputs: ["addCouponCode", "removeCouponCode"] }, { kind: "component", type: OrderModificationSummaryComponent, selector: "vdr-order-modification-summary", inputs: ["orderSnapshot", "modifyOrderInput", "addedLines", "shippingAddressForm", "billingAddressForm", "updatedShippingMethods", "couponCodesControl"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.CustomFieldLabelPipe, name: "customFieldLabel" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-order-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\n        <vdr-ab-left>\n            <div class=\"flex clr-align-items-center\"></div>\n        </vdr-ab-left>\n\n        <vdr-ab-right>\n            <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\n                {{ 'order.cancel-modification' | translate }}\n            </button>\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n\n<vdr-page-detail-layout *ngIf=\"entity as order\">\n    <vdr-page-detail-sidebar>\n        <vdr-card [title]=\"'order.modification-summary' | translate\">\n            <vdr-order-modification-summary\n                [orderSnapshot]=\"orderSnapshot\"\n                [modifyOrderInput]=\"modifyOrderInput\"\n                [addedLines]=\"addedLines\"\n                [shippingAddressForm]=\"shippingAddressForm\"\n                [billingAddressForm]=\"billingAddressForm\"\n                [couponCodesControl]=\"couponCodesControl\"\n                [updatedShippingMethods]=\"updatedShippingMethods\"\n            ></vdr-order-modification-summary>\n\n            <div *ngIf=\"!hasModifications()\" class=\"no-modifications\">\n                {{ 'order.no-modifications-made' | translate }}\n            </div>\n\n            <div class=\"summary-controls\">\n                <vdr-form-field [label]=\"'order.note' | translate\">\n                    <textarea\n                        [(ngModel)]=\"note\"\n                        name=\"note\"\n                        required\n                        [disabled]=\"!hasModifications()\"\n                    ></textarea>\n                </vdr-form-field>\n                <label class=\"flex items-center\">\n                    <input\n                        type=\"checkbox\"\n                        [(ngModel)]=\"recalculateShipping\"\n                        [disabled]=\"!hasModifications()\"\n                    />\n                    <div class=\"ml-1\">{{ 'order.modification-recalculate-shipping' | translate }}</div>\n                </label>\n                <button\n                    class=\"btn btn-primary mt-2\"\n                    [disabled]=\"!hasModifications()\"\n                    (click)=\"previewAndModify(order)\"\n                >\n                    {{ 'order.preview-changes' | translate }}\n                </button>\n            </div>\n        </vdr-card>\n        <vdr-card [title]=\"'order.set-coupon-codes' | translate\">\n            <vdr-coupon-code-selector [control]=\"couponCodesControl\"></vdr-coupon-code-selector>\n        </vdr-card>\n        <vdr-card [title]=\"'order.shipping-address' | translate\">\n            <ng-template vdrCardControls>\n                <button\n                    class=\"button-small\"\n                    [title]=\"'order.edit-shipping-address' | translate\"\n                    (click)=\"editingShippingAddress = !editingShippingAddress\"\n                >\n                    <clr-icon shape=\"edit\"></clr-icon>\n                </button>\n            </ng-template>\n            <vdr-formatted-address\n                *ngIf=\"!editingShippingAddress\"\n                [address]=\"shippingAddressForm.value\"\n            ></vdr-formatted-address>\n            <vdr-address-form\n                *ngIf=\"editingShippingAddress\"\n                [formGroup]=\"shippingAddressForm\"\n                [availableCountries]=\"availableCountries$ | async\"\n                [customFields]=\"addressCustomFields\"\n            ></vdr-address-form>\n        </vdr-card>\n        <vdr-card [title]=\"'order.billing-address' | translate\">\n            <ng-template vdrCardControls>\n                <button\n                    class=\"button-small\"\n                    [title]=\"'order.edit-billing-address' | translate\"\n                    (click)=\"editingBillingAddress = !editingBillingAddress\"\n                >\n                    <clr-icon shape=\"edit\"></clr-icon>\n                </button>\n            </ng-template>\n            <vdr-formatted-address\n                *ngIf=\"!editingBillingAddress\"\n                [address]=\"billingAddressForm.value\"\n            ></vdr-formatted-address>\n            <vdr-address-form\n                *ngIf=\"editingBillingAddress\"\n                [formGroup]=\"billingAddressForm\"\n                [availableCountries]=\"availableCountries$ | async\"\n                [customFields]=\"addressCustomFields\"\n            ></vdr-address-form>\n        </vdr-card>\n    </vdr-page-detail-sidebar>\n\n    <vdr-page-block>\n        <vdr-card [paddingX]=\"false\">\n            <vdr-data-table-2 id=\"modify-order\" class=\"order-table\" [items]=\"order.lines.concat(addedLines)\">\n                <!-- Here we define all the available columns -->\n                <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\n                    <ng-template let-line=\"item\">\n                        {{ line.id }}\n                    </ng-template>\n                </vdr-dt2-column>\n                <vdr-dt2-column\n                    id=\"created-at\"\n                    [heading]=\"'common.created-at' | translate\"\n                    [hiddenByDefault]=\"true\"\n                >\n                    <ng-template let-line=\"item\">\n                        {{ line.createdAt | localeDate : 'short' }}\n                    </ng-template>\n                </vdr-dt2-column>\n                <vdr-dt2-column\n                    id=\"updated-at\"\n                    [heading]=\"'common.updated-at' | translate\"\n                    [hiddenByDefault]=\"true\"\n                >\n                    <ng-template let-line=\"item\">\n                        {{ line.updatedAt | localeDate : 'short' }}\n                    </ng-template>\n                </vdr-dt2-column>\n                <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n                    <ng-template let-line=\"item\">\n                        <div class=\"image-placeholder\">\n                            <img\n                                *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\n                                [src]=\"asset | assetPreview : 'tiny'\"\n                            />\n                            <ng-template #imagePlaceholder>\n                                <div class=\"placeholder\">\n                                    <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n                                </div>\n                            </ng-template>\n                        </div>\n                    </ng-template>\n                </vdr-dt2-column>\n                <vdr-dt2-column\n                    id=\"product-name\"\n                    [heading]=\"'order.product-name' | translate\"\n                    [optional]=\"false\"\n                >\n                    <ng-template let-line=\"item\">\n                        {{ line.productVariant.name }}\n                    </ng-template>\n                </vdr-dt2-column>\n                <vdr-dt2-column id=\"product-sku\" [heading]=\"'order.product-sku' | translate\">\n                    <ng-template let-line=\"item\">\n                        {{ line.productVariant.sku }}\n                    </ng-template>\n                </vdr-dt2-column>\n                <vdr-dt2-column id=\"unit-price\" [heading]=\"'order.unit-price' | translate\">\n                    <ng-template let-line=\"item\">\n                        <div class=\"text-center\">\n                            <div>{{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}</div>\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                                {{ line.unitPrice | localeCurrency : order.currencyCode }}\n                            </div>\n                        </div>\n                    </ng-template>\n                </vdr-dt2-column>\n                <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\" [optional]=\"false\">\n                    <ng-template let-line=\"item\">\n                        <input\n                            type=\"number\"\n                            class=\"draft-qty mr-1\"\n                            min=\"0\"\n                            [value]=\"getInitialLineQuantity(line.id)\"\n                            (input)=\"updateLineQuantity(line, $event.target.value)\"\n                        />\n                        <button\n                            class=\"button-small\"\n                            *ngIf=\"isAddedLine(line)\"\n                            (click)=\"removeAddedItem(line.id)\"\n                        >\n                            <clr-icon shape=\"trash\"></clr-icon>\n                        </button>\n                        <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\n                        <vdr-line-fulfillment\n                            [line]=\"line\"\n                            [allOrderFulfillments]=\"order.fulfillments\"\n                            [orderState]=\"order.state\"\n                        ></vdr-line-fulfillment>\n                    </ng-template>\n                </vdr-dt2-column>\n                <vdr-dt2-column\n                    *ngFor=\"let customField of orderLineCustomFields\"\n                    [id]=\"customField.name\"\n                    [heading]=\"customField | customFieldLabel : (uiLanguage$ | async)\"\n                    [hiddenByDefault]=\"true\"\n                >\n                    <ng-template let-line=\"item\" let-index=\"index\">\n                        <vdr-custom-field-control\n                            [compact]=\"true\"\n                            [entityName]=\"'OrderLine'\"\n                            [customField]=\"customField\"\n                            [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.at(index)\"\n                        />\n                    </ng-template>\n                </vdr-dt2-column>\n            </vdr-data-table-2>\n        </vdr-card>\n        <vdr-card [title]=\"'order.add-item-to-order' | translate\">\n            <vdr-product-variant-selector class=\"mb-4\" (productSelected)=\"addItemSelectedVariant = $event\">\n            </vdr-product-variant-selector>\n            <div class=\"flex\">\n                <div>\n                    <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb-4\">\n                        <img\n                            *ngIf=\"addItemSelectedVariant.productAsset as asset\"\n                            [src]=\"asset | assetPreview : 'tiny'\"\n                            class=\"mr-4 add-item-thumb\"\n                        />\n                        <div>\n                            <strong class=\"mr-4\">{{ addItemSelectedVariant.productVariantName }}</strong>\n                            <small>{{ addItemSelectedVariant.sku }}</small>\n                            <div>\n                                {{\n                                    getSelectedItemPrice(addItemSelectedVariant)\n                                        | localeCurrency : order.currencyCode\n                                }}\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"form-grid\" *ngIf=\"addItemSelectedVariant\">\n                        <ng-container *ngFor=\"let customField of orderLineCustomFields\">\n                            <vdr-custom-field-control\n                                [readonly]=\"!addItemSelectedVariant\"\n                                [customField]=\"customField\"\n                                [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\n                                entityName=\"OrderLine\"\n                                [compact]=\"true\"\n                            ></vdr-custom-field-control>\n                        </ng-container>\n                    </div>\n                </div>\n                <div class=\"flex-spacer\"></div>\n                <div>\n                    <button\n                        *ngIf=\"addItemSelectedVariant\"\n                        class=\"btn btn-secondary\"\n                        [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\n                        (click)=\"addItemToOrder(addItemSelectedVariant)\"\n                    >\n                        {{ 'order.add-item-to-order' | translate }}\n                    </button>\n                </div>\n            </div>\n        </vdr-card>\n        <vdr-card [title]=\"'order.shipping' | translate\">\n            <div *ngFor=\"let shippingLine of order.shippingLines\" class=\"flex items-center\">\n                <ng-container *ngIf=\"getShippingLineDetails(shippingLine) as details\">\n                    <div>{{ details.name }}:</div>\n                    <div class=\"mx-1\">\n                        {{ details.price | localeCurrency : order.currencyCode }}\n                    </div>\n                    <button class=\"button-small\" (click)=\"setShippingMethod(shippingLine.id)\">\n                        {{ 'order.set-shipping-method' | translate }}\n                    </button>\n                </ng-container>\n            </div>\n        </vdr-card>\n        <vdr-card [title]=\"'order.add-surcharge' | translate\">\n            <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\n                <div class=\"form-grid\">\n                    <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\n                        ><input id=\"description\" type=\"text\" formControlName=\"description\"\n                    /></vdr-form-field>\n                    <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\n                        ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\n                    /></vdr-form-field>\n                    <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\n                        <vdr-currency-input\n                            [currencyCode]=\"order.currencyCode\"\n                            id=\"price\"\n                            formControlName=\"price\"\n                        ></vdr-currency-input>\n                    </vdr-form-field>\n                    <vdr-form-field\n                        [label]=\"\n                            'catalog.price-includes-tax-at'\n                                | translate : { rate: surchargeForm.get('taxRate')?.value ?? 0 }\n                        \"\n                        for=\"priceIncludesTax\"\n                        ><input\n                            id=\"priceIncludesTax\"\n                            type=\"checkbox\"\n                            clrCheckbox\n                            formControlName=\"priceIncludesTax\"\n                    /></vdr-form-field>\n                    <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\n                        <vdr-affixed-input suffix=\"%\"\n                            ><input id=\"taxRate\" type=\"number\" min=\"0\" max=\"100\" formControlName=\"taxRate\"\n                        /></vdr-affixed-input>\n                    </vdr-form-field>\n                    <vdr-form-field [label]=\"'order.tax-description' | translate\" for=\"taxDescription\"\n                        ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\n                    /></vdr-form-field>\n                </div>\n                <button\n                    class=\"btn btn-secondary mt-2\"\n                    [disabled]=\"\n                        surchargeForm.invalid ||\n                        surchargeForm.pristine ||\n                        surchargeForm.get('price')?.value === 0 ||\n                        !surchargeForm.get('description')?.value\n                    \"\n                >\n                    {{ 'order.add-surcharge' | translate }}\n                </button>\n            </form>\n        </vdr-card>\n    </vdr-page-block>\n</vdr-page-detail-layout>\n", styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table img{border-radius:var(--border-radius-img)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}.order-table .draft-qty{max-width:48px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}.order-table .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .thumb img{width:50px;height:50px}.order-table .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.order-table .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}.add-item-thumb{max-width:50px}.no-modifications{color:var(--color-grey-400)}.summary-controls{border-top:1px solid var(--color-weight-200);margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 1)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DataService }, { type: i1.NotificationService }, { type: i1.ModalService }, { type: OrderTransitionService }, { type: i0.ChangeDetectorRef }] });
+
+class OrderListComponent extends TypedBaseListComponent {
+    constructor(serverConfigService, channelService) {
+        super();
+        this.serverConfigService = serverConfigService;
+        this.channelService = channelService;
+        this.orderStates = this.serverConfigService.getOrderProcessStates().map(item => item.name);
+        this.OrderType = OrderType;
+        this.customFields = this.getCustomFieldConfig('Order');
+        this.filters = this.createFilterCollection()
+            .addIdFilter()
+            .addDateFilters()
+            .addFilter({
+            name: 'active',
+            type: { kind: 'boolean' },
+            label: marker('order.filter-is-active'),
+            filterField: 'active',
+        })
+            .addFilter({
+            name: 'totalWithTax',
+            type: { kind: 'number', inputType: 'currency', currencyCode: 'USD' },
+            label: marker('order.total'),
+            filterField: 'totalWithTax',
+        })
+            .addFilter({
+            name: 'state',
+            type: {
+                kind: 'select',
+                options: this.orderStates.map(s => ({ value: s, label: getOrderStateTranslationToken(s) })),
+            },
+            label: marker('order.state'),
+            filterField: 'state',
+        })
+            .addFilter({
+            name: 'type',
+            type: {
+                kind: 'select',
+                options: [
+                    { value: OrderType.Regular, label: marker('order.order-type-regular') },
+                    { value: OrderType.Aggregate, label: marker('order.order-type-aggregate') },
+                    { value: OrderType.Seller, label: marker('order.order-type-seller') },
+                ],
+            },
+            label: marker('order.order-type'),
+            filterField: 'type',
+        })
+            .addFilter({
+            name: 'orderPlacedAt',
+            type: { kind: 'dateRange' },
+            label: marker('order.placed-at'),
+            filterField: 'orderPlacedAt',
+        })
+            .addFilter({
+            name: 'customerLastName',
+            type: { kind: 'text' },
+            label: marker('customer.last-name'),
+            filterField: 'customerLastName',
+        })
+            .addFilter({
+            name: 'transactionId',
+            type: { kind: 'text' },
+            label: marker('order.transaction-id'),
+            filterField: 'transactionId',
+        })
+            .addCustomFieldFilters(this.customFields)
+            .connectToRoute(this.route);
+        this.sorts = this.createSortCollection()
+            .defaultSort('updatedAt', 'DESC')
+            .addSort({ name: 'id' })
+            .addSort({ name: 'createdAt' })
+            .addSort({ name: 'updatedAt' })
+            .addSort({ name: 'orderPlacedAt' })
+            .addSort({ name: 'customerLastName' })
+            .addSort({ name: 'state' })
+            .addSort({ name: 'totalWithTax' })
+            .addCustomFieldSorts(this.customFields)
+            .connectToRoute(this.route);
+        this.canCreateDraftOrder = false;
+        this.activeChannelIsDefaultChannel = false;
+        super.configure({
+            document: GetOrderListDocument,
+            getItems: result => result.orders,
+            setVariables: (skip, take) => this.createQueryOptions(skip, take, this.searchTermControl.value),
+            refreshListOnChanges: [this.filters.valueChanges, this.sorts.valueChanges],
+        });
+        this.canCreateDraftOrder = !!this.serverConfigService
+            .getOrderProcessStates()
+            .find(state => state.name === 'Created')
+            ?.to.includes('Draft');
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        const isDefaultChannel$ = this.channelService.defaultChannelIsActive$.pipe(tap(isDefault => (this.activeChannelIsDefaultChannel = isDefault)));
+        super.refreshListOnChanges(this.filters.valueChanges, this.sorts.valueChanges, isDefaultChannel$);
+    }
+    createQueryOptions(
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    skip, take, searchTerm) {
+        let filterInput = this.filters.createFilterInput();
+        if (this.activeChannelIsDefaultChannel) {
+            filterInput = {
+                ...(filterInput ?? {}),
+            };
+        }
+        if (searchTerm) {
+            filterInput = {
+                code: {
+                    contains: searchTerm,
+                },
+                customerLastName: {
+                    contains: searchTerm,
+                },
+                transactionId: {
+                    contains: searchTerm,
+                },
+            };
+        }
+        return {
+            options: {
+                skip,
+                take,
+                filter: {
+                    ...(filterInput ?? {}),
+                },
+                filterOperator: searchTerm ? LogicalOperator.OR : LogicalOperator.AND,
+                sort: this.sorts.createSortInput(),
+            },
+        };
+    }
+    getShippingNames(order) {
+        if (order.shippingLines.length) {
+            return order.shippingLines.map(shippingLine => shippingLine.shippingMethod.name).join(', ');
+        }
+        else {
+            return '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderListComponent, deps: [{ token: i1.ServerConfigService }, { token: i1.ChannelService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderListComponent, selector: "vdr-order-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n    <vdr-action-bar>\n        <vdr-ab-right>\n            <vdr-action-bar-items locationId=\"order-list\" />\n            <ng-container *ngIf=\"canCreateDraftOrder\">\n                <a class=\"btn\" *vdrIfPermissions=\"['CreateOrder']\" [routerLink]=\"['./draft/create']\">\n                    <clr-icon shape=\"plus\"></clr-icon>\n                    {{ 'catalog.create-draft-order' | translate }}\n                </a>\n            </ng-container>\n            <vdr-action-bar-dropdown-menu locationId=\"order-list\" />\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n<vdr-data-table-2\n    class=\"mt-2\"\n    id=\"order-list\"\n    [items]=\"items$ | async\"\n    [itemsPerPage]=\"itemsPerPage$ | async\"\n    [totalItems]=\"totalItems$ | async\"\n    [currentPage]=\"currentPage$ | async\"\n    [filters]=\"filters\"\n    (pageChange)=\"setPageNumber($event)\"\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\n>\n    <vdr-bulk-action-menu\n        locationId=\"order-list\"\n        [hostComponent]=\"this\"\n        [selectionManager]=\"selectionManager\"\n    ></vdr-bulk-action-menu>\n    <vdr-dt2-search\n        [searchTermControl]=\"searchTermControl\"\n        [searchTermPlaceholder]=\"'order.search-by-order-filters' | translate\"\n    />\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\n        <ng-template let-order=\"item\">\n            {{ order.id }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\n        <ng-template let-order=\"item\">\n            {{ order.createdAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\">\n        <ng-template let-order=\"item\">\n            <a class=\"button-ghost\" [routerLink]=\"order.state === 'Draft' ? ['./draft', order.id] : ['./', order.id]\"\n                ><span>{{ order.code }}</span>\n                <clr-icon shape=\"arrow right\"></clr-icon>\n            </a>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.customer' | translate\" id=\"customer\" [sort]=\"sorts.get('customerLastName')\">\n        <ng-template let-order=\"item\">\n            <vdr-customer-label\n                [customer]=\"order.customer\"\n                (click)=\"$event.stopPropagation()\"\n            ></vdr-customer-label>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.order-type' | translate\" id=\"order-type\" [hiddenByDefault]=\"true\">\n        <ng-template let-order=\"item\">\n            <vdr-chip *ngIf=\"order.type === OrderType.Regular\">{{ 'order.order-type-regular' | translate }}</vdr-chip>\n            <vdr-chip *ngIf=\"order.type === OrderType.Aggregate\">{{ 'order.order-type-aggregate' | translate }}</vdr-chip>\n            <vdr-chip *ngIf=\"order.type === OrderType.Seller\">{{ 'order.order-type-seller' | translate }}</vdr-chip>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\" [sort]=\"sorts.get('state')\">\n        <ng-template let-order=\"item\">\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.total' | translate\" id=\"total\" [sort]=\"sorts.get('totalWithTax')\">\n        <ng-template let-order=\"item\">\n            {{ order.totalWithTax | localeCurrency : order.currencyCode }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\">\n        <ng-template let-order=\"item\">\n            {{ order.updatedAt | timeAgo }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.placed-at' | translate\" id=\"placed-at\" [sort]=\"sorts.get('orderPlacedAt')\">\n        <ng-template let-order=\"item\">\n            {{ order.orderPlacedAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.shipping' | translate\" id=\"shipping\">\n        <ng-template let-order=\"item\">\n            {{ getShippingNames(order) }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-custom-field-column\n        *ngFor=\"let customField of customFields\"\n        [customField]=\"customField\"\n        [sorts]=\"sorts\"\n    />\n</vdr-data-table-2>\n", styles: [".search-form{display:flex;flex-direction:column;align-items:baseline;width:100%;max-width:100vw;margin-bottom:6px}.filter-presets{max-width:90vw;overflow-x:auto}.search-input{margin-top:6px;min-width:300px}.custom-filters{overflow:hidden;max-height:0;padding-bottom:6px}.custom-filters.expanded{max-height:initial}.custom-filters>form{display:flex;flex-direction:column;align-items:center}.custom-filters>form>div{width:100%}ng-select{flex:1;min-width:200px;height:36px}ng-select ::ng-deep .ng-select-container{height:36px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-order-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\n    <vdr-action-bar>\n        <vdr-ab-right>\n            <vdr-action-bar-items locationId=\"order-list\" />\n            <ng-container *ngIf=\"canCreateDraftOrder\">\n                <a class=\"btn\" *vdrIfPermissions=\"['CreateOrder']\" [routerLink]=\"['./draft/create']\">\n                    <clr-icon shape=\"plus\"></clr-icon>\n                    {{ 'catalog.create-draft-order' | translate }}\n                </a>\n            </ng-container>\n            <vdr-action-bar-dropdown-menu locationId=\"order-list\" />\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n<vdr-data-table-2\n    class=\"mt-2\"\n    id=\"order-list\"\n    [items]=\"items$ | async\"\n    [itemsPerPage]=\"itemsPerPage$ | async\"\n    [totalItems]=\"totalItems$ | async\"\n    [currentPage]=\"currentPage$ | async\"\n    [filters]=\"filters\"\n    (pageChange)=\"setPageNumber($event)\"\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\n>\n    <vdr-bulk-action-menu\n        locationId=\"order-list\"\n        [hostComponent]=\"this\"\n        [selectionManager]=\"selectionManager\"\n    ></vdr-bulk-action-menu>\n    <vdr-dt2-search\n        [searchTermControl]=\"searchTermControl\"\n        [searchTermPlaceholder]=\"'order.search-by-order-filters' | translate\"\n    />\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\n        <ng-template let-order=\"item\">\n            {{ order.id }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\n        <ng-template let-order=\"item\">\n            {{ order.createdAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\">\n        <ng-template let-order=\"item\">\n            <a class=\"button-ghost\" [routerLink]=\"order.state === 'Draft' ? ['./draft', order.id] : ['./', order.id]\"\n                ><span>{{ order.code }}</span>\n                <clr-icon shape=\"arrow right\"></clr-icon>\n            </a>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.customer' | translate\" id=\"customer\" [sort]=\"sorts.get('customerLastName')\">\n        <ng-template let-order=\"item\">\n            <vdr-customer-label\n                [customer]=\"order.customer\"\n                (click)=\"$event.stopPropagation()\"\n            ></vdr-customer-label>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.order-type' | translate\" id=\"order-type\" [hiddenByDefault]=\"true\">\n        <ng-template let-order=\"item\">\n            <vdr-chip *ngIf=\"order.type === OrderType.Regular\">{{ 'order.order-type-regular' | translate }}</vdr-chip>\n            <vdr-chip *ngIf=\"order.type === OrderType.Aggregate\">{{ 'order.order-type-aggregate' | translate }}</vdr-chip>\n            <vdr-chip *ngIf=\"order.type === OrderType.Seller\">{{ 'order.order-type-seller' | translate }}</vdr-chip>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\" [sort]=\"sorts.get('state')\">\n        <ng-template let-order=\"item\">\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.total' | translate\" id=\"total\" [sort]=\"sorts.get('totalWithTax')\">\n        <ng-template let-order=\"item\">\n            {{ order.totalWithTax | localeCurrency : order.currencyCode }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\">\n        <ng-template let-order=\"item\">\n            {{ order.updatedAt | timeAgo }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.placed-at' | translate\" id=\"placed-at\" [sort]=\"sorts.get('orderPlacedAt')\">\n        <ng-template let-order=\"item\">\n            {{ order.orderPlacedAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.shipping' | translate\" id=\"shipping\">\n        <ng-template let-order=\"item\">\n            {{ getShippingNames(order) }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-custom-field-column\n        *ngFor=\"let customField of customFields\"\n        [customField]=\"customField\"\n        [sorts]=\"sorts\"\n    />\n</vdr-data-table-2>\n", styles: [".search-form{display:flex;flex-direction:column;align-items:baseline;width:100%;max-width:100vw;margin-bottom:6px}.filter-presets{max-width:90vw;overflow-x:auto}.search-input{margin-top:6px;min-width:300px}.custom-filters{overflow:hidden;max-height:0;padding-bottom:6px}.custom-filters.expanded{max-height:initial}.custom-filters>form{display:flex;flex-direction:column;align-items:center}.custom-filters>form>div{width:100%}ng-select{flex:1;min-width:200px;height:36px}ng-select ::ng-deep .ng-select-container{height:36px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.ServerConfigService }, { type: i1.ChannelService }] });
+
+class RefundDetailComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RefundDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RefundDetailComponent, selector: "vdr-refund-detail", inputs: { refund: "refund", currencyCode: "currencyCode" }, ngImport: i0, template: "<vdr-labeled-data [label]=\"'order.amount' | translate\">\n    {{ refund.total | localeCurrency: currencyCode }}\n</vdr-labeled-data>\n<vdr-labeled-data *ngIf=\"refund.transactionId\" [label]=\"'order.transaction-id' | translate\">\n    {{ refund.transactionId }}\n</vdr-labeled-data>\n<vdr-labeled-data [label]=\"'order.payment-metadata' | translate\">\n    <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\n</vdr-labeled-data>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RefundDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-refund-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-labeled-data [label]=\"'order.amount' | translate\">\n    {{ refund.total | localeCurrency: currencyCode }}\n</vdr-labeled-data>\n<vdr-labeled-data *ngIf=\"refund.transactionId\" [label]=\"'order.transaction-id' | translate\">\n    {{ refund.transactionId }}\n</vdr-labeled-data>\n<vdr-labeled-data [label]=\"'order.payment-metadata' | translate\">\n    <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\n</vdr-labeled-data>\n" }]
+        }], propDecorators: { refund: [{
+                type: Input
+            }], currencyCode: [{
+                type: Input
+            }] } });
+
+const GET_CUSTOMER_ADDRESSES = gql `
+    query GetCustomerAddresses($customerId: ID!) {
+        customer(id: $customerId) {
+            id
+            addresses {
+                ...Address
+            }
+        }
+    }
+    ${ADDRESS_FRAGMENT}
+`;
+
+const GET_ORDER_STATE = gql `
+    query GetOrderState($id: ID!) {
+        order(id: $id) {
+            id
+            state
+        }
+    }
+`;
+class OrderGuard {
+    constructor(dataService, router) {
+        this.dataService = dataService;
+        this.router = router;
+    }
+    canActivate(route, state) {
+        const isDraft = state.url.includes('orders/draft');
+        const isModifying = state.url.includes('/modify');
+        const id = route.paramMap.get('id');
+        if (isDraft) {
+            if (id === 'create') {
+                return this.dataService.order
+                    .createDraftOrder()
+                    .pipe(map(({ createDraftOrder }) => this.router.parseUrl(`/orders/draft/${createDraftOrder.id}`)));
+            }
+            else {
+                return true;
+            }
+        }
+        else {
+            return (this.dataService
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                .query(GET_ORDER_STATE, { id: id })
+                .single$.pipe(map(({ order }) => {
+                if (order?.state === 'Modifying' && !isModifying) {
+                    return this.router.parseUrl(`/orders/${id}/modify`);
+                }
+                else {
+                    return true;
+                }
+            })));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderGuard, deps: [{ token: i1.DataService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderGuard, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderGuard, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.DataService }, { type: i1$1.Router }] });
+
+const createRoutes = (pageService) => [
+    {
+        path: '',
+        component: PageComponent,
+        pathMatch: 'full',
+        data: {
+            locationId: 'order-list',
+            breadcrumb: marker('breadcrumb.orders'),
+        },
+        children: pageService.getPageTabRoutes('order-list'),
+    },
+    {
+        path: 'draft/:id',
+        component: PageComponent,
+        canActivate: [OrderGuard],
+        data: {
+            locationId: 'draft-order-detail',
+            breadcrumb: { label: marker('breadcrumb.orders'), link: ['../'] },
+        },
+        children: pageService.getPageTabRoutes('draft-order-detail'),
+    },
+    {
+        path: ':id',
+        component: PageComponent,
+        canActivate: [OrderGuard],
+        data: {
+            locationId: 'order-detail',
+            breadcrumb: { label: marker('breadcrumb.orders'), link: ['../'] },
+        },
+        children: pageService.getPageTabRoutes('order-detail'),
+    },
+    {
+        path: ':aggregateOrderId/seller-orders/:id',
+        component: PageComponent,
+        canActivate: [OrderGuard],
+        data: {
+            locationId: 'order-detail',
+            breadcrumb: { label: marker('breadcrumb.orders'), link: ['../'] },
+        },
+        children: pageService.getPageTabRoutes('order-detail'),
+    },
+    {
+        path: ':id/modify',
+        component: PageComponent,
+        canActivate: [OrderGuard],
+        data: {
+            locationId: 'modify-order',
+            breadcrumb: { label: marker('breadcrumb.orders'), link: ['../'] },
+        },
+        children: pageService.getPageTabRoutes('modify-order'),
+    },
+];
+
+class OrderModule {
+    static { this.hasRegisteredTabsAndBulkActions = false; }
+    constructor(pageService) {
+        if (OrderModule.hasRegisteredTabsAndBulkActions) {
+            return;
+        }
+        pageService.registerPageTab({
+            priority: 0,
+            location: 'order-list',
+            tab: marker('order.orders'),
+            route: '',
+            component: OrderListComponent,
+        });
+        pageService.registerPageTab({
+            priority: 0,
+            location: 'order-detail',
+            tab: marker('order.order'),
+            route: '',
+            component: detailComponentWithResolver({
+                component: OrderDetailComponent,
+                query: OrderDetailQueryDocument,
+                entityKey: 'order',
+                getBreadcrumbs: entity => entity?.type !== OrderType.Seller || !entity?.aggregateOrder
+                    ? [
+                        {
+                            label: `${entity?.code}`,
+                            link: [entity?.id],
+                        },
+                    ]
+                    : [
+                        {
+                            label: `${entity?.aggregateOrder?.code}`,
+                            link: ['/orders/', entity?.aggregateOrder?.id],
+                        },
+                        {
+                            label: marker('breadcrumb.seller-orders'),
+                            link: ['/orders/', entity?.aggregateOrder?.id],
+                        },
+                        {
+                            label: `${entity?.code}`,
+                            link: [entity?.id],
+                        },
+                    ],
+            }),
+        });
+        pageService.registerPageTab({
+            priority: 0,
+            location: 'draft-order-detail',
+            tab: marker('order.order'),
+            route: '',
+            component: detailComponentWithResolver({
+                component: DraftOrderDetailComponent,
+                query: OrderDetailQueryDocument,
+                entityKey: 'order',
+                getBreadcrumbs: entity => [
+                    {
+                        label: marker('order.draft-order'),
+                        link: [entity?.id],
+                    },
+                ],
+            }),
+        });
+        pageService.registerPageTab({
+            priority: 0,
+            location: 'modify-order',
+            tab: marker('order.order'),
+            route: '',
+            component: detailComponentWithResolver({
+                component: OrderEditorComponent,
+                query: OrderDetailQueryDocument,
+                entityKey: 'order',
+                getBreadcrumbs: entity => [
+                    {
+                        label: entity?.code || 'order',
+                        link: ['/orders/', entity?.id],
+                    },
+                    {
+                        label: marker('breadcrumb.modifying-order'),
+                        link: [entity?.id],
+                    },
+                ],
+            }),
+        });
+        OrderModule.hasRegisteredTabsAndBulkActions = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderModule, deps: [{ token: i1.PageService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: OrderModule, declarations: [OrderListComponent,
+            OrderDetailComponent,
+            FulfillOrderDialogComponent,
+            LineFulfillmentComponent,
+            RefundOrderDialogComponent,
+            CancelOrderDialogComponent,
+            PaymentStateLabelComponent,
+            LineRefundsComponent,
+            OrderPaymentCardComponent,
+            RefundStateLabelComponent,
+            SettleRefundDialogComponent,
+            OrderHistoryComponent,
+            FulfillmentDetailComponent,
+            PaymentDetailComponent,
+            SimpleItemListComponent,
+            OrderCustomFieldsCardComponent,
+            OrderProcessGraphComponent,
+            OrderProcessNodeComponent,
+            OrderProcessEdgeComponent,
+            OrderProcessGraphDialogComponent,
+            FulfillmentStateLabelComponent,
+            FulfillmentCardComponent,
+            OrderEditorComponent,
+            OrderTableComponent,
+            OrderEditsPreviewDialogComponent,
+            ModificationDetailComponent,
+            AddManualPaymentDialogComponent,
+            OrderStateSelectDialogComponent,
+            DraftOrderDetailComponent,
+            DraftOrderVariantSelectorComponent,
+            SelectCustomerDialogComponent,
+            SelectAddressDialogComponent,
+            CouponCodeSelectorComponent,
+            SelectShippingMethodDialogComponent,
+            OrderHistoryEntryHostComponent,
+            SellerOrdersCardComponent,
+            OrderDataTableComponent,
+            OrderTotalColumnComponent,
+            PaymentForRefundSelectorComponent,
+            OrderModificationSummaryComponent,
+            RefundDetailComponent], imports: [SharedModule, i1$1.RouterModule], exports: [OrderCustomFieldsCardComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderModule, providers: [
+            {
+                provide: ROUTES,
+                useFactory: (pageService) => createRoutes(pageService),
+                multi: true,
+                deps: [PageService],
+            },
+        ], imports: [SharedModule, RouterModule.forChild([])] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SharedModule, RouterModule.forChild([])],
+                    providers: [
+                        {
+                            provide: ROUTES,
+                            useFactory: (pageService) => createRoutes(pageService),
+                            multi: true,
+                            deps: [PageService],
+                        },
+                    ],
+                    declarations: [
+                        OrderListComponent,
+                        OrderDetailComponent,
+                        FulfillOrderDialogComponent,
+                        LineFulfillmentComponent,
+                        RefundOrderDialogComponent,
+                        CancelOrderDialogComponent,
+                        PaymentStateLabelComponent,
+                        LineRefundsComponent,
+                        OrderPaymentCardComponent,
+                        RefundStateLabelComponent,
+                        SettleRefundDialogComponent,
+                        OrderHistoryComponent,
+                        FulfillmentDetailComponent,
+                        PaymentDetailComponent,
+                        SimpleItemListComponent,
+                        OrderCustomFieldsCardComponent,
+                        OrderProcessGraphComponent,
+                        OrderProcessNodeComponent,
+                        OrderProcessEdgeComponent,
+                        OrderProcessGraphDialogComponent,
+                        FulfillmentStateLabelComponent,
+                        FulfillmentCardComponent,
+                        OrderEditorComponent,
+                        OrderTableComponent,
+                        OrderEditsPreviewDialogComponent,
+                        ModificationDetailComponent,
+                        AddManualPaymentDialogComponent,
+                        OrderStateSelectDialogComponent,
+                        DraftOrderDetailComponent,
+                        DraftOrderVariantSelectorComponent,
+                        SelectCustomerDialogComponent,
+                        SelectAddressDialogComponent,
+                        CouponCodeSelectorComponent,
+                        SelectShippingMethodDialogComponent,
+                        OrderHistoryEntryHostComponent,
+                        SellerOrdersCardComponent,
+                        OrderDataTableComponent,
+                        OrderTotalColumnComponent,
+                        PaymentForRefundSelectorComponent,
+                        OrderModificationSummaryComponent,
+                        RefundDetailComponent,
+                    ],
+                    exports: [OrderCustomFieldsCardComponent],
+                }]
+        }], ctorParameters: () => [{ type: i1.PageService }] });
+
+// This file was generated by the build-public-api.ts script
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AddManualPaymentDialogComponent, CancelOrderDialogComponent, CouponCodeSelectorComponent, DraftOrderDetailComponent, DraftOrderVariantSelectorComponent, FulfillOrderDialogComponent, FulfillmentCardComponent, FulfillmentDetailComponent, FulfillmentStateLabelComponent, GET_COUPON_CODE_SELECTOR_PROMOTION_LIST, GET_CUSTOMER_ADDRESSES, GET_ORDER_STATE, GET_SELLER_ORDERS, LineFulfillmentComponent, LineRefundsComponent, ModificationDetailComponent, NODE_HEIGHT, ORDER_DETAIL_QUERY, OrderCustomFieldsCardComponent, OrderDataTableComponent, OrderDetailComponent, OrderEditResultType, OrderEditorComponent, OrderEditsPreviewDialogComponent, OrderGuard, OrderHistoryComponent, OrderHistoryEntryHostComponent, OrderListComponent, OrderModificationSummaryComponent, OrderModule, OrderPaymentCardComponent, OrderProcessEdgeComponent, OrderProcessGraphComponent, OrderProcessGraphDialogComponent, OrderProcessNodeComponent, OrderStateSelectDialogComponent, OrderTableComponent, OrderTotalColumnComponent, OrderTransitionService, PaymentDetailComponent, PaymentForRefundSelectorComponent, PaymentStateLabelComponent, RefundDetailComponent, RefundOrderDialogComponent, RefundStateLabelComponent, SET_ORDER_CUSTOMER_MUTATION, SelectAddressDialogComponent, SelectCustomerDialogComponent, SelectShippingMethodDialogComponent, SellerOrdersCardComponent, SettleRefundDialogComponent, SimpleItemListComponent, createRoutes, getRefundablePayments };
+//# sourceMappingURL=deenruv-admin-ui-order.mjs.map