@vendure/admin-ui 3.2.0 → 3.2.2

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

@@ -38,21 +38,21 @@ function getRefundablePayments(payments) {
     });
 }
 
-const GET_PAYMENT_METHODS_FOR_MANUAL_ADD = gql `
-    query GetAddManualPaymentMethodList($options: PaymentMethodListOptions!) {
-        paymentMethods(options: $options) {
-            items {
-                id
-                createdAt
-                updatedAt
-                name
-                code
-                description
-                enabled
-            }
-            totalItems
-        }
-    }
+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) {
@@ -82,11 +82,11 @@ class AddManualPaymentDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: AddManualPaymentDialogComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: AddManualPaymentDialogComponent, isStandalone: false, selector: "vdr-add-manual-payment-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.add-payment-to-order' | translate }}</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'order.payment-method' | translate\" for=\"method\">\r\n        <ng-select\r\n            [items]=\"paymentMethods$ | async\"\r\n            bindLabel=\"code\"\r\n            appendTo=\"body\"\r\n            autofocus\r\n            bindValue=\"code\"\r\n            [addTag]=\"true\"\r\n            formControlName=\"method\"\r\n        ></ng-select>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'order.transaction-id' | translate\" for=\"transactionId\">\r\n        <input id=\"transactionId\" type=\"text\" formControlName=\"transactionId\" />\r\n    </vdr-form-field>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"submit()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || form.pristine\">\r\n        {{ 'order.add-payment' | translate }}  ({{ outstandingAmount | localeCurrency: currencyCode }})\r\n    </button>\r\n</ng-template>\r\n", styles: [".ng-select{min-width:100%}\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "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", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: AddManualPaymentDialogComponent, isStandalone: false, 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: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "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", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], 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: "19.2.4", ngImport: i0, type: AddManualPaymentDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-add-manual-payment-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>{{ 'order.add-payment-to-order' | translate }}</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'order.payment-method' | translate\" for=\"method\">\r\n        <ng-select\r\n            [items]=\"paymentMethods$ | async\"\r\n            bindLabel=\"code\"\r\n            appendTo=\"body\"\r\n            autofocus\r\n            bindValue=\"code\"\r\n            [addTag]=\"true\"\r\n            formControlName=\"method\"\r\n        ></ng-select>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'order.transaction-id' | translate\" for=\"transactionId\">\r\n        <input id=\"transactionId\" type=\"text\" formControlName=\"transactionId\" />\r\n    </vdr-form-field>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"submit()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || form.pristine\">\r\n        {{ 'order.add-payment' | translate }}  ({{ outstandingAmount | localeCurrency: currencyCode }})\r\n    </button>\r\n</ng-template>\r\n", styles: [".ng-select{min-width:100%}\n"] }]
+            args: [{ selector: 'vdr-add-manual-payment-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 {
@@ -152,24 +152,24 @@ class CancelOrderDialogComponent {
             .filter(l => 0 < l.quantity);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CancelOrderDialogComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CancelOrderDialogComponent, isStandalone: false, selector: "vdr-cancel-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-lines\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.is-disabled]=\"cancelAll\"\r\n                [class.is-cancelled]=\"line.quantity === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.quantity }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"line.quantity > 0 && !order.active; else nonEditable\"\r\n                        [(ngModel)]=\"lineQuantities[line.id]\"\r\n                        (input)=\"checkIfAllSelected()\"\r\n                        [disabled]=\"cancelAll\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                    />\r\n                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"cancellation-details\">\r\n        <ng-container *ngIf=\"order.active !== true\">\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"true\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-entire-order' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"false\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-specified-items' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n        </ng-container>\r\n        <label class=\"clr-control-label\">{{ 'order.cancellation-reason' | translate }}</label>\r\n        <ng-select\r\n            [items]=\"reasons\"\r\n            bindLabel=\"name\"\r\n            autofocus\r\n            bindValue=\"id\"\r\n            [addTag]=\"true\"\r\n            [(ngModel)]=\"reason\"\r\n        ></ng-select>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"!reason || (!order.active && selectionCount === 0)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        <ng-container *ngIf=\"!order.active\">\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-container>\r\n        <ng-container *ngIf=\"order.active\">\r\n            {{ 'order.cancel-order' | translate }}\r\n        </ng-container>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}@media screen and (min-width: 768px){.fulfillment-wrapper .cancellation-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .order-lines{flex:1;overflow-y:auto}.fulfillment-wrapper .order-lines table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}.fulfillment-wrapper .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.fulfillment-wrapper .is-disabled td,.fulfillment-wrapper .is-disabled td input{background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["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: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "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", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CancelOrderDialogComponent, isStandalone: false, 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: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "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", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], 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: "19.2.4", ngImport: i0, type: CancelOrderDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-cancel-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>{{ 'order.cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-lines\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.is-disabled]=\"cancelAll\"\r\n                [class.is-cancelled]=\"line.quantity === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.quantity }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"line.quantity > 0 && !order.active; else nonEditable\"\r\n                        [(ngModel)]=\"lineQuantities[line.id]\"\r\n                        (input)=\"checkIfAllSelected()\"\r\n                        [disabled]=\"cancelAll\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                    />\r\n                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"cancellation-details\">\r\n        <ng-container *ngIf=\"order.active !== true\">\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"true\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-entire-order' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"false\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-specified-items' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n        </ng-container>\r\n        <label class=\"clr-control-label\">{{ 'order.cancellation-reason' | translate }}</label>\r\n        <ng-select\r\n            [items]=\"reasons\"\r\n            bindLabel=\"name\"\r\n            autofocus\r\n            bindValue=\"id\"\r\n            [addTag]=\"true\"\r\n            [(ngModel)]=\"reason\"\r\n        ></ng-select>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"!reason || (!order.active && selectionCount === 0)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        <ng-container *ngIf=\"!order.active\">\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-container>\r\n        <ng-container *ngIf=\"order.active\">\r\n            {{ 'order.cancel-order' | translate }}\r\n        </ng-container>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}@media screen and (min-width: 768px){.fulfillment-wrapper .cancellation-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .order-lines{flex:1;overflow-y:auto}.fulfillment-wrapper .order-lines table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}.fulfillment-wrapper .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.fulfillment-wrapper .is-disabled td,.fulfillment-wrapper .is-disabled td input{background-color:var(--color-component-bg-200)}\n"] }]
+            args: [{ selector: 'vdr-cancel-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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
-        }
-    }
+const GET_COUPON_CODE_SELECTOR_PROMOTION_LIST = gql `
+    query GetCouponCodeSelectorPromotionList($options: PromotionListOptions) {
+        promotions(options: $options) {
+            items {
+                id
+                name
+                couponCode
+            }
+            totalItems
+        }
+    }
 `;
 class CouponCodeSelectorComponent {
     constructor(dataService) {
@@ -198,11 +198,11 @@ class CouponCodeSelectorComponent {
         this.removeCouponCode.emit(code);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: CouponCodeSelectorComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CouponCodeSelectorComponent, isStandalone: false, selector: "vdr-coupon-code-selector", inputs: { couponCodes: "couponCodes", control: "control" }, outputs: { addCouponCode: "addCouponCode", removeCouponCode: "removeCouponCode" }, ngImport: i0, template: "<ng-select\r\n    [items]=\"availableCouponCodes$ | async\"\r\n    appendTo=\"body\"\r\n    bindLabel=\"code\"\r\n    bindValue=\"code\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"true\"\r\n    [hideSelected]=\"true\"\r\n    [minTermLength]=\"2\"\r\n    typeToSearchText=\"\"\r\n    [typeahead]=\"couponCodeInput$\"\r\n    [formControl]=\"control\"\r\n    (add)=\"addCouponCode.emit($event.code)\"\r\n    (remove)=\"remove($event.code)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <div class=\"flex items-center\">\r\n            <vdr-chip class=\"mr-1\">{{ item.code }}</vdr-chip>\r\n            <span>{{ item.promotionName }}</span>\r\n        </div>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "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", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: CouponCodeSelectorComponent, isStandalone: false, 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)=\"remove($event.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: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "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", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], 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: "19.2.4", ngImport: i0, type: CouponCodeSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-coupon-code-selector', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-select\r\n    [items]=\"availableCouponCodes$ | async\"\r\n    appendTo=\"body\"\r\n    bindLabel=\"code\"\r\n    bindValue=\"code\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"true\"\r\n    [hideSelected]=\"true\"\r\n    [minTermLength]=\"2\"\r\n    typeToSearchText=\"\"\r\n    [typeahead]=\"couponCodeInput$\"\r\n    [formControl]=\"control\"\r\n    (add)=\"addCouponCode.emit($event.code)\"\r\n    (remove)=\"remove($event.code)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <div class=\"flex items-center\">\r\n            <vdr-chip class=\"mr-1\">{{ item.code }}</vdr-chip>\r\n            <span>{{ item.promotionName }}</span>\r\n        </div>\r\n    </ng-template>\r\n</ng-select>\r\n" }]
+            args: [{ selector: 'vdr-coupon-code-selector', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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)=\"remove($event.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: [{
@@ -283,11 +283,11 @@ class SelectAddressDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", 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: "19.2.4", type: SelectAddressDialogComponent, isStandalone: false, selector: "vdr-select-address-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.select-address' | translate }}</ng-template>\r\n\r\n<clr-tabs *ngIf=\"addresses$ | async as addresses\">\r\n    <clr-tab *ngIf=\"customerId && addresses.length\">\r\n        <button clrTabLink>{{ 'order.existing-address' | translate }}</button>\r\n        <ng-template [(clrIfActive)]=\"useExisting\">\r\n            <clr-tab-content>\r\n                <vdr-radio-card-fieldset\r\n                    class=\"block mt-4\"\r\n                    [idFn]=\"addressIdFn\"\r\n                    [selectedItemId]=\"selectedAddress && addressIdFn(selectedAddress)\"\r\n                    (selectItem)=\"selectedAddress = $event\"\r\n                >\r\n                    <vdr-radio-card *ngFor=\"let address of addresses\" [item]=\"address\">\r\n                        <vdr-formatted-address [address]=\"address\"></vdr-formatted-address>\r\n                    </vdr-radio-card>\r\n                </vdr-radio-card-fieldset>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'customer.create-new-address' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"createNew\">\r\n            <clr-tab-content>\r\n                <vdr-address-form\r\n                    [formGroup]=\"addressForm\"\r\n                    [availableCountries]=\"availableCountries$ | async\"\r\n                ></vdr-address-form>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n</clr-tabs>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"(useExisting && !selectedAddress) || (createNew && addressForm.invalid)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }, { kind: "component", type: i3.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { kind: "component", type: i3.ClrTab, selector: "clr-tab" }, { kind: "component", type: i3.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { kind: "directive", type: i3.ClrTabLink, selector: "[clrTabLink]", inputs: ["id", "clrTabLinkInOverflow"] }, { kind: "directive", type: i3.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { kind: "directive", type: i3.ÇlrActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { kind: "component", type: i1.RadioCardComponent, selector: "vdr-radio-card", inputs: ["item"], exportAs: ["VdrRadioCard"] }, { kind: "component", type: i1.RadioCardFieldsetComponent, selector: "vdr-radio-card-fieldset", inputs: ["selectedItemId", "idFn"], outputs: ["selectItem"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SelectAddressDialogComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: SelectAddressDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-select-address-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>{{ 'order.select-address' | translate }}</ng-template>\r\n\r\n<clr-tabs *ngIf=\"addresses$ | async as addresses\">\r\n    <clr-tab *ngIf=\"customerId && addresses.length\">\r\n        <button clrTabLink>{{ 'order.existing-address' | translate }}</button>\r\n        <ng-template [(clrIfActive)]=\"useExisting\">\r\n            <clr-tab-content>\r\n                <vdr-radio-card-fieldset\r\n                    class=\"block mt-4\"\r\n                    [idFn]=\"addressIdFn\"\r\n                    [selectedItemId]=\"selectedAddress && addressIdFn(selectedAddress)\"\r\n                    (selectItem)=\"selectedAddress = $event\"\r\n                >\r\n                    <vdr-radio-card *ngFor=\"let address of addresses\" [item]=\"address\">\r\n                        <vdr-formatted-address [address]=\"address\"></vdr-formatted-address>\r\n                    </vdr-radio-card>\r\n                </vdr-radio-card-fieldset>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'customer.create-new-address' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"createNew\">\r\n            <clr-tab-content>\r\n                <vdr-address-form\r\n                    [formGroup]=\"addressForm\"\r\n                    [availableCountries]=\"availableCountries$ | async\"\r\n                ></vdr-address-form>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n</clr-tabs>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"(useExisting && !selectedAddress) || (createNew && addressForm.invalid)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n" }]
+            args: [{ selector: 'vdr-select-address-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 {
@@ -336,11 +336,11 @@ class SelectCustomerDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", 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: "19.2.4", type: SelectCustomerDialogComponent, isStandalone: false, selector: "vdr-select-customer-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ title | translate }}</ng-template>\r\n\r\n<ng-container *ngIf=\"!canCreateNew\">\r\n    <ng-container *ngTemplateOutlet=\"customerSelect\"></ng-container>\r\n    <vdr-form-field [label]=\"'common.add-note' | translate\" *ngIf=\"includeNoteInput\" class=\"mt-4\">\r\n        <textarea [(ngModel)]=\"note\"></textarea>\r\n    </vdr-form-field>\r\n</ng-container>\r\n\r\n<clr-tabs *ngIf=\"canCreateNew\" class=\"pt-1\">\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'order.existing-customer' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"useExisting\">\r\n            <clr-tab-content>\r\n                <div class=\"mt-4\">\r\n                    <ng-container *ngTemplateOutlet=\"customerSelect\"></ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n    <clr-tab *ngIf=\"canCreateNew\">\r\n        <button clrTabLink>{{ 'customer.create-new-customer' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"createNew\">\r\n            <clr-tab-content>\r\n                <form [formGroup]=\"customerForm\">\r\n                    <vdr-form-field [label]=\"'customer.title' | translate\" for=\"title\">\r\n                        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.first-name' | translate\" for=\"firstName\">\r\n                        <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.last-name' | translate\" for=\"lastName\">\r\n                        <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.email-address' | translate\" for=\"emailAddress\">\r\n                        <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.phone-number' | translate\" for=\"phoneNumber\">\r\n                        <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\r\n                    </vdr-form-field>\r\n                </form>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n</clr-tabs>\r\n\r\n<ng-template #customerSelect>\r\n    <ng-select\r\n        [items]=\"customers$ | async\"\r\n        appendTo=\"body\"\r\n        bindLabel=\"name\"\r\n        [addTag]=\"false\"\r\n        [multiple]=\"true\"\r\n        [hideSelected]=\"true\"\r\n        [trackByFn]=\"trackByFn\"\r\n        [minTermLength]=\"2\"\r\n        [loading]=\"isLoading\"\r\n        [typeahead]=\"input$\"\r\n        [(ngModel)]=\"selectedCustomer\"\r\n    >\r\n        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"item-row\">\r\n                <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\r\n                ><span class=\"mx-1\">{{ item.firstName }} {{ item.lastName }}</span>\r\n                <vdr-chip>{{ item.emailAddress }}</vdr-chip>\r\n            </span>\r\n        </ng-template>\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <span class=\"item-row\">\r\n                <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\r\n                ><span class=\"mx-1\">{{ item.firstName }} {{ item.lastName }}</span>\r\n                <vdr-chip>{{ item.emailAddress }}</vdr-chip>\r\n            </span>\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"(useExisting && selectedCustomer.length === 0) || (createNew && customerForm.invalid)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".item-row{display:flex;align-items:center}clr-tabs{display:block}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }, { kind: "component", type: i3.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { kind: "component", type: i3.ClrTab, selector: "clr-tab" }, { kind: "component", type: i3.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { kind: "directive", type: i3.ClrTabLink, selector: "[clrTabLink]", inputs: ["id", "clrTabLinkInOverflow"] }, { kind: "directive", type: i3.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { kind: "directive", type: i3.ÇlrActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "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", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SelectCustomerDialogComponent, isStandalone: false, 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: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "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", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], 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: "19.2.4", ngImport: i0, type: SelectCustomerDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-select-customer-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>{{ title | translate }}</ng-template>\r\n\r\n<ng-container *ngIf=\"!canCreateNew\">\r\n    <ng-container *ngTemplateOutlet=\"customerSelect\"></ng-container>\r\n    <vdr-form-field [label]=\"'common.add-note' | translate\" *ngIf=\"includeNoteInput\" class=\"mt-4\">\r\n        <textarea [(ngModel)]=\"note\"></textarea>\r\n    </vdr-form-field>\r\n</ng-container>\r\n\r\n<clr-tabs *ngIf=\"canCreateNew\" class=\"pt-1\">\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'order.existing-customer' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"useExisting\">\r\n            <clr-tab-content>\r\n                <div class=\"mt-4\">\r\n                    <ng-container *ngTemplateOutlet=\"customerSelect\"></ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n    <clr-tab *ngIf=\"canCreateNew\">\r\n        <button clrTabLink>{{ 'customer.create-new-customer' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"createNew\">\r\n            <clr-tab-content>\r\n                <form [formGroup]=\"customerForm\">\r\n                    <vdr-form-field [label]=\"'customer.title' | translate\" for=\"title\">\r\n                        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.first-name' | translate\" for=\"firstName\">\r\n                        <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.last-name' | translate\" for=\"lastName\">\r\n                        <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.email-address' | translate\" for=\"emailAddress\">\r\n                        <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'customer.phone-number' | translate\" for=\"phoneNumber\">\r\n                        <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\r\n                    </vdr-form-field>\r\n                </form>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n</clr-tabs>\r\n\r\n<ng-template #customerSelect>\r\n    <ng-select\r\n        [items]=\"customers$ | async\"\r\n        appendTo=\"body\"\r\n        bindLabel=\"name\"\r\n        [addTag]=\"false\"\r\n        [multiple]=\"true\"\r\n        [hideSelected]=\"true\"\r\n        [trackByFn]=\"trackByFn\"\r\n        [minTermLength]=\"2\"\r\n        [loading]=\"isLoading\"\r\n        [typeahead]=\"input$\"\r\n        [(ngModel)]=\"selectedCustomer\"\r\n    >\r\n        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"item-row\">\r\n                <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\r\n                ><span class=\"mx-1\">{{ item.firstName }} {{ item.lastName }}</span>\r\n                <vdr-chip>{{ item.emailAddress }}</vdr-chip>\r\n            </span>\r\n        </ng-template>\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <span class=\"item-row\">\r\n                <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\r\n                ><span class=\"mx-1\">{{ item.firstName }} {{ item.lastName }}</span>\r\n                <vdr-chip>{{ item.emailAddress }}</vdr-chip>\r\n            </span>\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"(useExisting && selectedCustomer.length === 0) || (createNew && customerForm.invalid)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".item-row{display:flex;align-items:center}clr-tabs{display:block}\n"] }]
+            args: [{ selector: 'vdr-select-customer-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 {
@@ -361,11 +361,11 @@ class SelectShippingMethodDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SelectShippingMethodDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SelectShippingMethodDialogComponent, isStandalone: false, selector: "vdr-select-shipping-method-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.select-shipping-method' | translate }}</ng-template>\r\n<vdr-radio-card-fieldset\r\n    [idFn]=\"methodIdFn\"\r\n    [selectedItemId]=\"selectedMethod?.id\"\r\n    (selectItem)=\"selectedMethod = $event\"\r\n>\r\n    <vdr-radio-card *ngFor=\"let quote of eligibleShippingMethods\" [item]=\"quote\">\r\n        <div class=\"result-details\">\r\n            <vdr-labeled-data [label]=\"'settings.shipping-method' | translate\">\r\n                {{ quote.name }}\r\n            </vdr-labeled-data>\r\n            <div class=\"price-row\">\r\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                    {{ quote.price | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'common.price-with-tax' | translate\">\r\n                    {{ quote.priceWithTax | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <vdr-object-tree *ngIf=\"quote.metadata\" [value]=\"quote.metadata\"></vdr-object-tree>\r\n        </div>\r\n    </vdr-radio-card>\r\n</vdr-radio-card-fieldset>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"!selectedMethod\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SelectShippingMethodDialogComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: SelectShippingMethodDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-select-shipping-method-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>{{ 'order.select-shipping-method' | translate }}</ng-template>\r\n<vdr-radio-card-fieldset\r\n    [idFn]=\"methodIdFn\"\r\n    [selectedItemId]=\"selectedMethod?.id\"\r\n    (selectItem)=\"selectedMethod = $event\"\r\n>\r\n    <vdr-radio-card *ngFor=\"let quote of eligibleShippingMethods\" [item]=\"quote\">\r\n        <div class=\"result-details\">\r\n            <vdr-labeled-data [label]=\"'settings.shipping-method' | translate\">\r\n                {{ quote.name }}\r\n            </vdr-labeled-data>\r\n            <div class=\"price-row\">\r\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                    {{ quote.price | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'common.price-with-tax' | translate\">\r\n                    {{ quote.priceWithTax | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <vdr-object-tree *ngIf=\"quote.metadata\" [value]=\"quote.metadata\"></vdr-object-tree>\r\n        </div>\r\n    </vdr-radio-card>\r\n</vdr-radio-card-fieldset>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"!selectedMethod\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n" }]
+            args: [{ selector: 'vdr-select-shipping-method-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 {
@@ -383,11 +383,11 @@ class OrderStateSelectDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OrderStateSelectDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderStateSelectDialogComponent, isStandalone: false, selector: "vdr-order-state-select-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.select-state' | translate }}</ng-template>\r\n<p>{{ message | translate }}</p>\r\n<vdr-form-field>\r\n    <select name=\"state\" [(ngModel)]=\"selectedState\">\r\n        <option *ngFor=\"let state of nextStates\" [value]=\"state\">\r\n            {{ state | stateI18nToken | translate }}\r\n        </option>\r\n    </select>\r\n</vdr-form-field>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" *ngIf=\"cancellable\" (click)=\"cancel()\" class=\"btn btn-secondary\">\r\n        {{ 'common.cancel' | translate }}\r\n    </button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"!selectedState\">\r\n        {{ 'order.transition-to-state' | translate: { state: (selectedState | stateI18nToken | translate) } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderStateSelectDialogComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: OrderStateSelectDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-state-select-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>{{ 'order.select-state' | translate }}</ng-template>\r\n<p>{{ message | translate }}</p>\r\n<vdr-form-field>\r\n    <select name=\"state\" [(ngModel)]=\"selectedState\">\r\n        <option *ngFor=\"let state of nextStates\" [value]=\"state\">\r\n            {{ state | stateI18nToken | translate }}\r\n        </option>\r\n    </select>\r\n</vdr-form-field>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" *ngIf=\"cancellable\" (click)=\"cancel()\" class=\"btn btn-secondary\">\r\n        {{ 'common.cancel' | translate }}\r\n    </button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"!selectedState\">\r\n        {{ 'order.transition-to-state' | translate: { state: (selectedState | stateI18nToken | translate) } }}\r\n    </button>\r\n</ng-template>\r\n" }]
+            args: [{ selector: 'vdr-order-state-select-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 {
@@ -537,11 +537,11 @@ class OrderCustomFieldsCardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", 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: "19.2.4", type: OrderCustomFieldsCardComponent, isStandalone: false, selector: "vdr-order-custom-fields-card", inputs: { customFieldsConfig: "customFieldsConfig", customFieldValues: "customFieldValues" }, outputs: { updateClick: "updateClick" }, ngImport: i0, template: "<div class=\"card\" *ngIf=\"customFieldsConfig.length\">\r\n    <div class=\"card-header\">\r\n        {{ 'common.custom-fields' | translate }}\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"card-text custom-field-form\" [class.editable]=\"editable\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Order\"\r\n                [customFields]=\"customFieldsConfig\"\r\n                [customFieldsFormGroup]=\"customFieldForm\"\r\n                [readonly]=\"!editable\"\r\n                [compact]=\"true\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-footer\">\r\n        <button class=\"btn btn-sm btn-secondary\" (click)=\"editable = true\" *ngIf=\"!editable\">\r\n            <clr-icon shape=\"pencil\"></clr-icon>\r\n            {{ 'common.edit' | translate }}\r\n        </button>\r\n        <button\r\n            class=\"btn btn-sm btn-primary\"\r\n            (click)=\"onUpdateClick()\"\r\n            *ngIf=\"editable\"\r\n            [disabled]=\"customFieldForm.pristine || customFieldForm.invalid\"\r\n        >\r\n            <clr-icon shape=\"check\"></clr-icon>\r\n            {{ 'common.update' | translate }}\r\n        </button>\r\n        <button\r\n            class=\"btn btn-sm btn-secondary\"\r\n            (click)=\"onCancelClick()\"\r\n            *ngIf=\"editable\"\r\n        >\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n            {{ 'common.cancel' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: ["vdr-custom-field-control{margin-bottom:6px;display:block}.custom-field-form ::ng-deep .clr-control-label{color:var(--color-grey-400)}.custom-field-form.editable ::ng-deep .clr-control-label{color:inherit}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderCustomFieldsCardComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: OrderCustomFieldsCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-custom-fields-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"card\" *ngIf=\"customFieldsConfig.length\">\r\n    <div class=\"card-header\">\r\n        {{ 'common.custom-fields' | translate }}\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"card-text custom-field-form\" [class.editable]=\"editable\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Order\"\r\n                [customFields]=\"customFieldsConfig\"\r\n                [customFieldsFormGroup]=\"customFieldForm\"\r\n                [readonly]=\"!editable\"\r\n                [compact]=\"true\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-footer\">\r\n        <button class=\"btn btn-sm btn-secondary\" (click)=\"editable = true\" *ngIf=\"!editable\">\r\n            <clr-icon shape=\"pencil\"></clr-icon>\r\n            {{ 'common.edit' | translate }}\r\n        </button>\r\n        <button\r\n            class=\"btn btn-sm btn-primary\"\r\n            (click)=\"onUpdateClick()\"\r\n            *ngIf=\"editable\"\r\n            [disabled]=\"customFieldForm.pristine || customFieldForm.invalid\"\r\n        >\r\n            <clr-icon shape=\"check\"></clr-icon>\r\n            {{ 'common.update' | translate }}\r\n        </button>\r\n        <button\r\n            class=\"btn btn-sm btn-secondary\"\r\n            (click)=\"onCancelClick()\"\r\n            *ngIf=\"editable\"\r\n        >\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n            {{ 'common.cancel' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: ["vdr-custom-field-control{margin-bottom:6px;display:block}.custom-field-form ::ng-deep .clr-control-label{color:var(--color-grey-400)}.custom-field-form.editable ::ng-deep .clr-control-label{color:inherit}\n"] }]
+            args: [{ selector: 'vdr-order-custom-fields-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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: [{
@@ -592,11 +592,11 @@ class LineFulfillmentComponent {
             .filter(notNullOrUndefined) ?? []);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LineFulfillmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: LineFulfillmentComponent, isStandalone: false, selector: "vdr-line-fulfillment", inputs: { line: "line", allOrderFulfillments: "allOrderFulfillments", orderState: "orderState" }, usesOnChanges: true, ngImport: i0, template: "<vdr-dropdown class=\"search-settings-menu\" *ngIf=\"fulfilledCount || orderState === 'PartiallyDelivered'\">\r\n    <button type=\"button\" class=\"icon-button\" vdrDropdownTrigger>\r\n        <clr-icon *ngIf=\"fulfillmentStatus === 'full'\" class=\"item-fulfilled\" shape=\"check-circle\"></clr-icon>\r\n        <clr-icon\r\n            *ngIf=\"fulfillmentStatus === 'partial'\"\r\n            class=\"item-partially-fulfilled\"\r\n            shape=\"check-circle\"\r\n        ></clr-icon>\r\n        <clr-icon\r\n            *ngIf=\"fulfillmentStatus === 'none'\"\r\n            class=\"item-not-fulfilled\"\r\n            shape=\"exclamation-circle\"\r\n        ></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'full'\">\r\n            {{ 'order.line-fulfillment-all' | translate }}\r\n        </label>\r\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'partial'\">\r\n            {{\r\n                'order.line-fulfillment-partial' | translate: { total: line.quantity, count: fulfilledCount }\r\n            }}\r\n        </label>\r\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'none'\">\r\n            {{ 'order.line-fulfillment-none' | translate }}\r\n        </label>\r\n        <div class=\"fulfillment-detail\" *ngFor=\"let item of fulfillments\">\r\n            <div class=\"fulfillment-title\">\r\n                {{ 'order.fulfillment' | translate }} #{{ item.fulfillment.id }} ({{\r\n                    'order.item-count' | translate: { count: item.count }\r\n                }})\r\n            </div>\r\n            <vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n                {{ item.fulfillment.createdAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.fulfillment-method' | translate\">\r\n                {{ item.fulfillment.method }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data\r\n                *ngIf=\"item.fulfillment.trackingCode\"\r\n                [label]=\"'order.tracking-code' | translate\"\r\n            >\r\n                {{ item.fulfillment.trackingCode }}\r\n            </vdr-labeled-data>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".item-fulfilled{color:var(--color-success-700)}.item-partially-fulfilled{color:var(--color-warning-700)}.item-not-fulfilled{color:var(--color-error-700)}.fulfillment-detail{margin:6px 12px}.fulfillment-detail:not(:last-of-type){border-bottom:1px dashed var(--color-component-border-200)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: LineFulfillmentComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: LineFulfillmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-line-fulfillment', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-dropdown class=\"search-settings-menu\" *ngIf=\"fulfilledCount || orderState === 'PartiallyDelivered'\">\r\n    <button type=\"button\" class=\"icon-button\" vdrDropdownTrigger>\r\n        <clr-icon *ngIf=\"fulfillmentStatus === 'full'\" class=\"item-fulfilled\" shape=\"check-circle\"></clr-icon>\r\n        <clr-icon\r\n            *ngIf=\"fulfillmentStatus === 'partial'\"\r\n            class=\"item-partially-fulfilled\"\r\n            shape=\"check-circle\"\r\n        ></clr-icon>\r\n        <clr-icon\r\n            *ngIf=\"fulfillmentStatus === 'none'\"\r\n            class=\"item-not-fulfilled\"\r\n            shape=\"exclamation-circle\"\r\n        ></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'full'\">\r\n            {{ 'order.line-fulfillment-all' | translate }}\r\n        </label>\r\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'partial'\">\r\n            {{\r\n                'order.line-fulfillment-partial' | translate: { total: line.quantity, count: fulfilledCount }\r\n            }}\r\n        </label>\r\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'none'\">\r\n            {{ 'order.line-fulfillment-none' | translate }}\r\n        </label>\r\n        <div class=\"fulfillment-detail\" *ngFor=\"let item of fulfillments\">\r\n            <div class=\"fulfillment-title\">\r\n                {{ 'order.fulfillment' | translate }} #{{ item.fulfillment.id }} ({{\r\n                    'order.item-count' | translate: { count: item.count }\r\n                }})\r\n            </div>\r\n            <vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n                {{ item.fulfillment.createdAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.fulfillment-method' | translate\">\r\n                {{ item.fulfillment.method }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data\r\n                *ngIf=\"item.fulfillment.trackingCode\"\r\n                [label]=\"'order.tracking-code' | translate\"\r\n            >\r\n                {{ item.fulfillment.trackingCode }}\r\n            </vdr-labeled-data>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".item-fulfilled{color:var(--color-success-700)}.item-partially-fulfilled{color:var(--color-warning-700)}.item-not-fulfilled{color:var(--color-error-700)}.fulfillment-detail{margin:6px 12px}.fulfillment-detail:not(:last-of-type){border-bottom:1px dashed var(--color-component-border-200)}\n"] }]
+            args: [{ selector: 'vdr-line-fulfillment', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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: [{
@@ -616,11 +616,11 @@ class LineRefundsComponent {
             .reduce((sum, i) => sum + i.quantity, 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: LineRefundsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: LineRefundsComponent, isStandalone: false, selector: "vdr-line-refunds", inputs: { line: "line", payments: "payments" }, ngImport: i0, template: "<span *ngIf=\"getRefundedCount()\" [title]=\"'order.refunded-count' | translate: { count: getRefundedCount() }\">\r\n    <clr-icon shape=\"redo\" class=\"is-solid\" dir=\"down\"></clr-icon>\r\n</span>\r\n", styles: [":host{color:var(--color-error-500)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: LineRefundsComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: LineRefundsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-line-refunds', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<span *ngIf=\"getRefundedCount()\" [title]=\"'order.refunded-count' | translate: { count: getRefundedCount() }\">\r\n    <clr-icon shape=\"redo\" class=\"is-solid\" dir=\"down\"></clr-icon>\r\n</span>\r\n", styles: [":host{color:var(--color-error-500)}\n"] }]
+            args: [{ selector: 'vdr-line-refunds', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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: [{
@@ -669,11 +669,11 @@ class OrderDataTableComponent extends DataTable2Component {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OrderDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderDataTableComponent, isStandalone: false, selector: "vdr-order-data-table", inputs: { order: "order" }, queries: [{ propertyName: "totalColumns", predicate: OrderTotalColumnComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    <table\r\n        class=\"\"\r\n        [class.no-select]=\"disableSelect\"\r\n    >\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <vdr-ui-extension-point\r\n                            [locationId]=\"id\"\r\n                            [metadata]=\"column.id\"\r\n                            api=\"dataTable\"\r\n                            [topPx]=\"-6\"\r\n                            [leftPx]=\"-24\"\r\n                            display=\"block\"\r\n                        >\r\n                            <span>{{ column.heading }}</span>\r\n                        </vdr-ui-extension-point>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  id: id,\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn.bind(this)\r\n                \"\r\n            >\r\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <ng-container\r\n                            *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n                        >\r\n                            <ng-container\r\n                                *ngComponentOutlet=\"\r\n                                    componentConfig.config.component;\r\n                                    inputs: { rowItem: item };\r\n                                    injector: componentConfig.injector\r\n                                \"\r\n                            ></ng-container>\r\n                        </ng-container>\r\n                        <ng-template #defaultComponent>\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n                            ></ng-container>\r\n                        </ng-template>\r\n                    </div>\r\n                </td>\r\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\r\n            </tr>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"'order.order-is-empty' | translate\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n            <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n                <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n                <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                <td class=\"align-middle\" [attr.colspan]=\"visibleSortedColumns.length - 4\"></td>\r\n                <td class=\"align-middle total\">\r\n                    {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ surcharge.price | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <ng-container *ngFor=\"let discount of order.discounts\">\r\n                <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length - 1\" class=\"\">\r\n                        <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\r\n                        <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\r\n                            couponCode\r\n                        }}</vdr-chip>\r\n                    </td>\r\n                    <td class=\"\">\r\n                        {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\r\n                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                            {{ discount.amount | localeCurrency : order.currencyCode }}\r\n                        </div>\r\n                    </td>\r\n                    <td><!-- column select --></td>\r\n                </tr>\r\n            </ng-container>\r\n            <tr class=\"sub-total\">\r\n                <td class=\"\">{{ 'order.sub-total' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.subTotalWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.subTotal | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <tr class=\"shipping\">\r\n                <td class=\"\">{{ 'order.shipping' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\">\r\n                    <vdr-chip *ngFor=\"let shippingLine of order.shippingLines\" class=\"shipping-method-name\">\r\n                        {{ shippingLine.shippingMethod.name }}\r\n                    </vdr-chip>\r\n                </td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.shipping | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <tr class=\"total\">\r\n                <td class=\"\">{{ 'order.total' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.total | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);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"], exportAs: ["ngComponentOutlet"] }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderDataTableComponent, isStandalone: false, 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.bind(this)\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"], exportAs: ["ngComponentOutlet"] }, { 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: "19.2.4", ngImport: i0, type: OrderDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-data-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    <table\r\n        class=\"\"\r\n        [class.no-select]=\"disableSelect\"\r\n    >\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <vdr-ui-extension-point\r\n                            [locationId]=\"id\"\r\n                            [metadata]=\"column.id\"\r\n                            api=\"dataTable\"\r\n                            [topPx]=\"-6\"\r\n                            [leftPx]=\"-24\"\r\n                            display=\"block\"\r\n                        >\r\n                            <span>{{ column.heading }}</span>\r\n                        </vdr-ui-extension-point>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  id: id,\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn.bind(this)\r\n                \"\r\n            >\r\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <ng-container\r\n                            *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n                        >\r\n                            <ng-container\r\n                                *ngComponentOutlet=\"\r\n                                    componentConfig.config.component;\r\n                                    inputs: { rowItem: item };\r\n                                    injector: componentConfig.injector\r\n                                \"\r\n                            ></ng-container>\r\n                        </ng-container>\r\n                        <ng-template #defaultComponent>\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n                            ></ng-container>\r\n                        </ng-template>\r\n                    </div>\r\n                </td>\r\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\r\n            </tr>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"'order.order-is-empty' | translate\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n            <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n                <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n                <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                <td class=\"align-middle\" [attr.colspan]=\"visibleSortedColumns.length - 4\"></td>\r\n                <td class=\"align-middle total\">\r\n                    {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ surcharge.price | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <ng-container *ngFor=\"let discount of order.discounts\">\r\n                <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length - 1\" class=\"\">\r\n                        <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\r\n                        <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\r\n                            couponCode\r\n                        }}</vdr-chip>\r\n                    </td>\r\n                    <td class=\"\">\r\n                        {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\r\n                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                            {{ discount.amount | localeCurrency : order.currencyCode }}\r\n                        </div>\r\n                    </td>\r\n                    <td><!-- column select --></td>\r\n                </tr>\r\n            </ng-container>\r\n            <tr class=\"sub-total\">\r\n                <td class=\"\">{{ 'order.sub-total' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.subTotalWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.subTotal | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <tr class=\"shipping\">\r\n                <td class=\"\">{{ 'order.shipping' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\">\r\n                    <vdr-chip *ngFor=\"let shippingLine of order.shippingLines\" class=\"shipping-method-name\">\r\n                        {{ shippingLine.shippingMethod.name }}\r\n                    </vdr-chip>\r\n                </td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.shipping | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <tr class=\"total\">\r\n                <td class=\"\">{{ 'order.total' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.total | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);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"] }]
+            args: [{ selector: 'vdr-order-data-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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.bind(this)\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]
@@ -747,11 +747,11 @@ class OrderTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OrderTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderTableComponent, isStandalone: false, selector: "vdr-order-table", inputs: { order: "order", orderLineCustomFields: "orderLineCustomFields", isDraft: "isDraft" }, outputs: { adjust: "adjust", remove: "remove" }, ngImport: i0, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\r\n    <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-line=\"item\">\r\n            {{ line.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n            id=\"created-at\"\r\n            [heading]=\"'common.created-at' | translate\"\r\n            [hiddenByDefault]=\"true\"\r\n    >\r\n        <ng-template let-line=\"item\">\r\n            {{ line.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n            id=\"updated-at\"\r\n            [heading]=\"'common.updated-at' | translate\"\r\n            [hiddenByDefault]=\"true\"\r\n    >\r\n        <ng-template let-line=\"item\">\r\n            {{ line.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n        <ng-template let-line=\"item\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\r\n                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.product-name' | translate\" id=\"product-name\">\r\n        <ng-template let-line=\"item\">\r\n            {{ line.productVariant.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.product-sku' | translate\" id=\"product-sku\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            {{ line.productVariant.sku }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.unit-price' | translate\" id=\"unit-price\">\r\n        <ng-template let-line=\"item\">\r\n            <div class=\"unit-price\">\r\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ line.unitPrice | localeCurrency : order.currencyCode }}\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.quantity' | translate\" id=\"quantity\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            <ng-container *ngIf=\"!isDraft; else draft\">\r\n                <div class=\"flex\">\r\n                    <div\r\n                        *ngIf=\"line.orderPlacedQuantity && line.quantity !== line.orderPlacedQuantity\"\r\n                        class=\"order-placed-quantity\"\r\n                        [title]=\"'order.original-quantity-at-checkout' | translate\"\r\n                    >\r\n                        {{ line.orderPlacedQuantity }}\r\n                    </div>\r\n                    <div>{{ line.quantity }}</div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #draft>\r\n                <div class=\"flex\">\r\n                    <input\r\n                        class=\"draft-qty\"\r\n                        type=\"number\"\r\n                        min=\"0\"\r\n                        #qtyInput\r\n                        [value]=\"line.quantity\"\r\n                        (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\r\n                    />\r\n                    <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\r\n                        <clr-icon shape=\"trash\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n            </ng-template>\r\n            <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n            <vdr-line-fulfillment\r\n                [line]=\"line\"\r\n                [orderState]=\"order.state\"\r\n                [allOrderFulfillments]=\"order.fulfillments\"\r\n            ></vdr-line-fulfillment>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of orderLineCustomFields\"\r\n        [customField]=\"customField\"\r\n    />\r\n    <vdr-order-total-column [heading]=\"'order.total' | translate\" id=\"total\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            <div class=\"unit-price\">\r\n                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ line.linePrice | localeCurrency : order.currencyCode }}\r\n                </div>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\r\n                <vdr-dropdown *ngIf=\"discounts.length\">\r\n                    <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                        {{ 'order.promotions-applied' | translate }}\r\n                    </div>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                            <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\r\n                                discount.description\r\n                            }}</a>\r\n                            <div class=\"promotion-amount\">\r\n                                {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ discount.amount | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </ng-container>\r\n        </ng-template>\r\n    </vdr-order-total-column>\r\n</vdr-order-data-table>\r\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderTableComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: OrderTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\r\n    <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-line=\"item\">\r\n            {{ line.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n            id=\"created-at\"\r\n            [heading]=\"'common.created-at' | translate\"\r\n            [hiddenByDefault]=\"true\"\r\n    >\r\n        <ng-template let-line=\"item\">\r\n            {{ line.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n            id=\"updated-at\"\r\n            [heading]=\"'common.updated-at' | translate\"\r\n            [hiddenByDefault]=\"true\"\r\n    >\r\n        <ng-template let-line=\"item\">\r\n            {{ line.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n        <ng-template let-line=\"item\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\r\n                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.product-name' | translate\" id=\"product-name\">\r\n        <ng-template let-line=\"item\">\r\n            {{ line.productVariant.name }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.product-sku' | translate\" id=\"product-sku\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            {{ line.productVariant.sku }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.unit-price' | translate\" id=\"unit-price\">\r\n        <ng-template let-line=\"item\">\r\n            <div class=\"unit-price\">\r\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ line.unitPrice | localeCurrency : order.currencyCode }}\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.quantity' | translate\" id=\"quantity\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            <ng-container *ngIf=\"!isDraft; else draft\">\r\n                <div class=\"flex\">\r\n                    <div\r\n                        *ngIf=\"line.orderPlacedQuantity && line.quantity !== line.orderPlacedQuantity\"\r\n                        class=\"order-placed-quantity\"\r\n                        [title]=\"'order.original-quantity-at-checkout' | translate\"\r\n                    >\r\n                        {{ line.orderPlacedQuantity }}\r\n                    </div>\r\n                    <div>{{ line.quantity }}</div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #draft>\r\n                <div class=\"flex\">\r\n                    <input\r\n                        class=\"draft-qty\"\r\n                        type=\"number\"\r\n                        min=\"0\"\r\n                        #qtyInput\r\n                        [value]=\"line.quantity\"\r\n                        (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\r\n                    />\r\n                    <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\r\n                        <clr-icon shape=\"trash\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n            </ng-template>\r\n            <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n            <vdr-line-fulfillment\r\n                [line]=\"line\"\r\n                [orderState]=\"order.state\"\r\n                [allOrderFulfillments]=\"order.fulfillments\"\r\n            ></vdr-line-fulfillment>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of orderLineCustomFields\"\r\n        [customField]=\"customField\"\r\n    />\r\n    <vdr-order-total-column [heading]=\"'order.total' | translate\" id=\"total\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            <div class=\"unit-price\">\r\n                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ line.linePrice | localeCurrency : order.currencyCode }}\r\n                </div>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\r\n                <vdr-dropdown *ngIf=\"discounts.length\">\r\n                    <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                        {{ 'order.promotions-applied' | translate }}\r\n                    </div>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                            <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\r\n                                discount.description\r\n                            }}</a>\r\n                            <div class=\"promotion-amount\">\r\n                                {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ discount.amount | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </ng-container>\r\n        </ng-template>\r\n    </vdr-order-total-column>\r\n</vdr-order-data-table>\r\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-inline-start:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"] }]
+            args: [{ selector: 'vdr-order-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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: [{
@@ -801,11 +801,11 @@ class DraftOrderVariantSelectorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DraftOrderVariantSelectorComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: DraftOrderVariantSelectorComponent, isStandalone: false, selector: "vdr-draft-order-variant-selector", inputs: { currencyCode: "currencyCode", orderLineCustomFields: "orderLineCustomFields" }, outputs: { addItem: "addItem" }, ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-block\">\r\n        <h4 class=\"card-title\">{{ 'order.add-item-to-order' | translate }}</h4>\r\n        <vdr-product-variant-selector\r\n            (productSelected)=\"selectedVariantId$.next($event.productVariantId)\"\r\n        ></vdr-product-variant-selector>\r\n    </div>\r\n    <div class=\"card-block\" *ngIf=\"selectedVariant$ | async as selectedVariant\">\r\n        <div class=\"variant-details\">\r\n            <img class=\"mr-2\" [src]=\"selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32\">\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.name }}</div>\r\n                <div class=\"small\">{{ selectedVariant?.sku }}</div>\r\n            </div>\r\n            <div class=\"details ml-4\">\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-on-hand' | translate }}: {{ selectedVariant.stockOnHand }}\r\n                </div>\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-allocated' | translate }}: {{ selectedVariant.stockAllocated }}\r\n                </div>\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.priceWithTax | localeCurrency: currencyCode }}</div>\r\n                <div class=\"small\" [title]=\"'order.net-price' | translate\">\r\n                    {{ selectedVariant?.price | localeCurrency: currencyCode }}\r\n                </div>\r\n            </div>\r\n            <div>\r\n                <input [disabled]=\"!selectedVariant\" type=\"number\" min=\"0\" [(ngModel)]=\"quantity\" />\r\n            </div>\r\n            <button\r\n                [disabled]=\"!selectedVariant\"\r\n                class=\"btn btn-small btn-primary\"\r\n                (click)=\"addItemClick(selectedVariant)\"\r\n            >\r\n                {{ 'order.add-item-to-order' | translate }}\r\n            </button>\r\n        </div>\r\n        <ng-container *ngIf=\"orderLineCustomFields.length\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Order\"\r\n                [customFields]=\"orderLineCustomFields\"\r\n                [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: [".variant-details{display:flex;align-items:center}.variant-details img{border-radius:var(--border-radius-img);width:32px;height:32px}.variant-details .details{font-size:.65rem;line-height:.7rem}.variant-details input{width:48px;margin:0 6px}.variant-details .small{font-size:11px;color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i2$1.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: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: DraftOrderVariantSelectorComponent, isStandalone: false, 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            <vdr-tabbed-custom-fields\n                entityName=\"Order\"\n                [customFields]=\"orderLineCustomFields\"\n                [customFieldsFormGroup]=\"customFieldsFormGroup\"\n            ></vdr-tabbed-custom-fields>\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.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: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { 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: "19.2.4", ngImport: i0, type: DraftOrderVariantSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-draft-order-variant-selector', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"card\">\r\n    <div class=\"card-block\">\r\n        <h4 class=\"card-title\">{{ 'order.add-item-to-order' | translate }}</h4>\r\n        <vdr-product-variant-selector\r\n            (productSelected)=\"selectedVariantId$.next($event.productVariantId)\"\r\n        ></vdr-product-variant-selector>\r\n    </div>\r\n    <div class=\"card-block\" *ngIf=\"selectedVariant$ | async as selectedVariant\">\r\n        <div class=\"variant-details\">\r\n            <img class=\"mr-2\" [src]=\"selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32\">\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.name }}</div>\r\n                <div class=\"small\">{{ selectedVariant?.sku }}</div>\r\n            </div>\r\n            <div class=\"details ml-4\">\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-on-hand' | translate }}: {{ selectedVariant.stockOnHand }}\r\n                </div>\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-allocated' | translate }}: {{ selectedVariant.stockAllocated }}\r\n                </div>\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.priceWithTax | localeCurrency: currencyCode }}</div>\r\n                <div class=\"small\" [title]=\"'order.net-price' | translate\">\r\n                    {{ selectedVariant?.price | localeCurrency: currencyCode }}\r\n                </div>\r\n            </div>\r\n            <div>\r\n                <input [disabled]=\"!selectedVariant\" type=\"number\" min=\"0\" [(ngModel)]=\"quantity\" />\r\n            </div>\r\n            <button\r\n                [disabled]=\"!selectedVariant\"\r\n                class=\"btn btn-small btn-primary\"\r\n                (click)=\"addItemClick(selectedVariant)\"\r\n            >\r\n                {{ 'order.add-item-to-order' | translate }}\r\n            </button>\r\n        </div>\r\n        <ng-container *ngIf=\"orderLineCustomFields.length\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Order\"\r\n                [customFields]=\"orderLineCustomFields\"\r\n                [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: [".variant-details{display:flex;align-items:center}.variant-details img{border-radius:var(--border-radius-img);width:32px;height:32px}.variant-details .details{font-size:.65rem;line-height:.7rem}.variant-details input{width:48px;margin:0 6px}.variant-details .small{font-size:11px;color:var(--color-text-300)}\n"] }]
+            args: [{ selector: 'vdr-draft-order-variant-selector', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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            <vdr-tabbed-custom-fields\n                entityName=\"Order\"\n                [customFields]=\"orderLineCustomFields\"\n                [customFieldsFormGroup]=\"customFieldsFormGroup\"\n            ></vdr-tabbed-custom-fields>\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: [{
@@ -1002,11 +1002,11 @@ class DraftOrderDetailComponent extends TypedBaseDetailComponent {
         // empty
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", 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: "19.2.4", type: DraftOrderDetailComponent, isStandalone: false, selector: "vdr-draft-order-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-align-items-center\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"draft-order-detail\" />\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"completeOrder()\"\r\n                [disabled]=\"!order.customer || !order.lines.length || !order.shippingLines.length\"\r\n            >\r\n                <clr-icon shape=\"check\"></clr-icon>\r\n                {{ 'order.complete-draft-order' | translate }}\r\n            </button>\r\n            <vdr-action-bar-dropdown-menu [alwaysShow]=\"true\" locationId=\"draft-order-detail\">\r\n                <button type=\"button\" vdrDropdownItem (click)=\"deleteOrder()\">\r\n                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                    {{ 'order.delete-draft-order' | translate }}\r\n                </button>\r\n            </vdr-action-bar-dropdown-menu>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon *ngIf=\"!order.customer\" shape=\"unknown-status\" class=\"is-warning\"></clr-icon>\r\n                <clr-icon *ngIf=\"order.customer\" shape=\"check\" class=\"is-success\"></clr-icon>\r\n            </ng-template>\r\n            <vdr-customer-label\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.customer\"\r\n                [customer]=\"order.customer\"\r\n            ></vdr-customer-label>\r\n            <button class=\"button-small\" (click)=\"setCustomer()\">\r\n                {{ 'order.set-customer-for-order' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.billing-address' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.billingAddress.streetLine1\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.billingAddress.streetLine1\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.billingAddress\"\r\n                [address]=\"order.billingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small\" (click)=\"setBillingAddress()\">\r\n                {{ 'order.set-billing-address' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.shipping' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.shippingAddress.streetLine1 || !order.shippingLines.length\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.shippingAddress.streetLine1 && order.shippingLines.length\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.shippingAddress\"\r\n                [address]=\"order.shippingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small mr-2\" (click)=\"setShippingAddress()\">\r\n                {{ 'order.set-shipping-address' | translate }}\r\n            </button>\r\n\r\n            <div *ngFor=\"let shippingLine of order.shippingLines\">\r\n                {{ shippingLine.shippingMethod.name }}\r\n            </div>\r\n            <button class=\"button-small\" (click)=\"setShippingMethod()\">\r\n                {{ 'order.set-shipping-method' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <button\r\n                *ngIf=\"order.couponCodes.length === 0 && !displayCouponCodeInput\"\r\n                class=\"button-small\"\r\n                (click)=\"displayCouponCodeInput = !displayCouponCodeInput\"\r\n            >\r\n                {{ 'order.set-coupon-codes' | translate }}\r\n            </button>\r\n            <div *ngIf=\"order.couponCodes.length || displayCouponCodeInput\">\r\n                <label>{{ 'order.set-coupon-codes' | translate }}</label>\r\n                <vdr-coupon-code-selector\r\n                    [couponCodes]=\"order.couponCodes\"\r\n                    (addCouponCode)=\"applyCouponCode($event)\"\r\n                    (removeCouponCode)=\"removeCouponCode($event)\"\r\n                ></vdr-coupon-code-selector>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <vdr-page-block>\r\n        <vdr-card>\r\n            <vdr-draft-order-variant-selector\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                (addItem)=\"addItemToOrder($event)\"\r\n            ></vdr-draft-order-variant-selector>\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [isDraft]=\"true\"\r\n                (adjust)=\"adjustOrderLine($event)\"\r\n                (remove)=\"removeOrderLine($event)\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\">\r\n            <ng-container *ngIf=\"order.taxSummary.length\">\r\n                <table class=\"table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>{{ 'common.description' | translate }}</th>\r\n                            <th>{{ 'order.tax-rate' | translate }}</th>\r\n                            <th>{{ 'order.tax-base' | translate }}</th>\r\n                            <th>{{ 'order.tax-total' | translate }}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let row of order.taxSummary\">\r\n                            <td>{{ row.description }}</td>\r\n                            <td>{{ row.taxRate / 100 | percent }}</td>\r\n                            <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                            <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </vdr-card>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"draft-order-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n\r\n        <vdr-order-custom-fields-card\r\n            [customFieldsConfig]=\"customFields\"\r\n            [customFieldValues]=\"order.customFields\"\r\n            (updateClick)=\"updateCustomFields($event)\"\r\n        ></vdr-order-custom-fields-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: DraftOrderDetailComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: DraftOrderDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-draft-order-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-align-items-center\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"draft-order-detail\" />\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"completeOrder()\"\r\n                [disabled]=\"!order.customer || !order.lines.length || !order.shippingLines.length\"\r\n            >\r\n                <clr-icon shape=\"check\"></clr-icon>\r\n                {{ 'order.complete-draft-order' | translate }}\r\n            </button>\r\n            <vdr-action-bar-dropdown-menu [alwaysShow]=\"true\" locationId=\"draft-order-detail\">\r\n                <button type=\"button\" vdrDropdownItem (click)=\"deleteOrder()\">\r\n                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                    {{ 'order.delete-draft-order' | translate }}\r\n                </button>\r\n            </vdr-action-bar-dropdown-menu>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon *ngIf=\"!order.customer\" shape=\"unknown-status\" class=\"is-warning\"></clr-icon>\r\n                <clr-icon *ngIf=\"order.customer\" shape=\"check\" class=\"is-success\"></clr-icon>\r\n            </ng-template>\r\n            <vdr-customer-label\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.customer\"\r\n                [customer]=\"order.customer\"\r\n            ></vdr-customer-label>\r\n            <button class=\"button-small\" (click)=\"setCustomer()\">\r\n                {{ 'order.set-customer-for-order' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.billing-address' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.billingAddress.streetLine1\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.billingAddress.streetLine1\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.billingAddress\"\r\n                [address]=\"order.billingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small\" (click)=\"setBillingAddress()\">\r\n                {{ 'order.set-billing-address' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.shipping' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.shippingAddress.streetLine1 || !order.shippingLines.length\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.shippingAddress.streetLine1 && order.shippingLines.length\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.shippingAddress\"\r\n                [address]=\"order.shippingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small mr-2\" (click)=\"setShippingAddress()\">\r\n                {{ 'order.set-shipping-address' | translate }}\r\n            </button>\r\n\r\n            <div *ngFor=\"let shippingLine of order.shippingLines\">\r\n                {{ shippingLine.shippingMethod.name }}\r\n            </div>\r\n            <button class=\"button-small\" (click)=\"setShippingMethod()\">\r\n                {{ 'order.set-shipping-method' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <button\r\n                *ngIf=\"order.couponCodes.length === 0 && !displayCouponCodeInput\"\r\n                class=\"button-small\"\r\n                (click)=\"displayCouponCodeInput = !displayCouponCodeInput\"\r\n            >\r\n                {{ 'order.set-coupon-codes' | translate }}\r\n            </button>\r\n            <div *ngIf=\"order.couponCodes.length || displayCouponCodeInput\">\r\n                <label>{{ 'order.set-coupon-codes' | translate }}</label>\r\n                <vdr-coupon-code-selector\r\n                    [couponCodes]=\"order.couponCodes\"\r\n                    (addCouponCode)=\"applyCouponCode($event)\"\r\n                    (removeCouponCode)=\"removeCouponCode($event)\"\r\n                ></vdr-coupon-code-selector>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <vdr-page-block>\r\n        <vdr-card>\r\n            <vdr-draft-order-variant-selector\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                (addItem)=\"addItemToOrder($event)\"\r\n            ></vdr-draft-order-variant-selector>\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [isDraft]=\"true\"\r\n                (adjust)=\"adjustOrderLine($event)\"\r\n                (remove)=\"removeOrderLine($event)\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\">\r\n            <ng-container *ngIf=\"order.taxSummary.length\">\r\n                <table class=\"table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>{{ 'common.description' | translate }}</th>\r\n                            <th>{{ 'order.tax-rate' | translate }}</th>\r\n                            <th>{{ 'order.tax-base' | translate }}</th>\r\n                            <th>{{ 'order.tax-total' | translate }}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let row of order.taxSummary\">\r\n                            <td>{{ row.description }}</td>\r\n                            <td>{{ row.taxRate / 100 | percent }}</td>\r\n                            <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                            <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </vdr-card>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"draft-order-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n\r\n        <vdr-order-custom-fields-card\r\n            [customFieldsConfig]=\"customFields\"\r\n            [customFieldValues]=\"order.customFields\"\r\n            (updateClick)=\"updateCustomFields($event)\"\r\n        ></vdr-order-custom-fields-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n" }]
+            args: [{ selector: 'vdr-draft-order-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 {
@@ -1073,20 +1073,20 @@ class FulfillOrderDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", 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: "19.2.4", type: FulfillOrderDialogComponent, isStandalone: false, selector: "vdr-fulfill-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\r\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                    <th>{{ 'order.fulfill' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\r\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\r\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\r\n                        type=\"number\"\r\n                        [max]=\"fulfillmentQuantities[line.id].max\"\r\n                        min=\"0\"\r\n                    />\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"shipping-details\">\r\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\r\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\r\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\r\n        <vdr-configurable-input\r\n            [operationDefinition]=\"fulfillmentHandlerDef\"\r\n            [operation]=\"fulfillmentHandler\"\r\n            [formControl]=\"fulfillmentHandlerControl\"\r\n            [removable]=\"false\"\r\n        ></vdr-configurable-input>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        {{ 'order.create-fulfillment' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}:host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: FulfillOrderDialogComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: FulfillOrderDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-fulfill-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\r\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                    <th>{{ 'order.fulfill' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\r\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\r\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\r\n                        type=\"number\"\r\n                        [max]=\"fulfillmentQuantities[line.id].max\"\r\n                        min=\"0\"\r\n                    />\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"shipping-details\">\r\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\r\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\r\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\r\n        <vdr-configurable-input\r\n            [operationDefinition]=\"fulfillmentHandlerDef\"\r\n            [operation]=\"fulfillmentHandler\"\r\n            [formControl]=\"fulfillmentHandlerControl\"\r\n            [removable]=\"false\"\r\n        ></vdr-configurable-input>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        {{ 'order.create-fulfillment' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}:host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{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"] }]
+            args: [{ selector: 'vdr-fulfill-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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: "19.2.4", ngImport: i0, type: SimpleItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SimpleItemListComponent, isStandalone: false, selector: "vdr-simple-item-list", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"items-list\">\r\n    <ul>\r\n        <li *ngFor=\"let item of items\" [title]=\"item.name\">\r\n            <div class=\"quantity\" *ngIf=\"item.quantity != null\">{{ item.quantity }}</div>\r\n            <clr-icon shape=\"times\" size=\"12\" *ngIf=\"item.quantity != null\"></clr-icon>\r\n            {{ item.name }}\r\n        </li>\r\n    </ul>\r\n</div>\r\n", styles: [".items-list{font-size:12px}.items-list ul{margin-top:6px;list-style-type:none;margin-inline-start:2px}.items-list ul li{line-height:14px;text-overflow:ellipsis;overflow:hidden}.items-list .quantity{min-width:16px;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SimpleItemListComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: SimpleItemListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-simple-item-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"items-list\">\r\n    <ul>\r\n        <li *ngFor=\"let item of items\" [title]=\"item.name\">\r\n            <div class=\"quantity\" *ngIf=\"item.quantity != null\">{{ item.quantity }}</div>\r\n            <clr-icon shape=\"times\" size=\"12\" *ngIf=\"item.quantity != null\"></clr-icon>\r\n            {{ item.name }}\r\n        </li>\r\n    </ul>\r\n</div>\r\n", styles: [".items-list{font-size:12px}.items-list ul{margin-top:6px;list-style-type:none;margin-inline-start:2px}.items-list ul li{line-height:14px;text-overflow:ellipsis;overflow:hidden}.items-list .quantity{min-width:16px;display:inline-block}\n"] }]
+            args: [{ selector: 'vdr-simple-item-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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
             }] } });
@@ -1122,11 +1122,11 @@ class FulfillmentDetailComponent {
         return Array.isArray(customField) || isObject(customField);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: FulfillmentDetailComponent, deps: [{ token: i1.ServerConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: FulfillmentDetailComponent, isStandalone: false, selector: "vdr-fulfillment-detail", inputs: { fulfillmentId: "fulfillmentId", order: "order" }, usesOnChanges: true, ngImport: i0, template: "<vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n    {{ fulfillment?.createdAt | localeDate: 'medium' }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.fulfillment-method' | translate\">\r\n    {{ fulfillment?.method }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"fulfillment?.trackingCode\" [label]=\"'order.tracking-code' | translate\">\r\n    {{ fulfillment?.trackingCode }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n    <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<ng-container *ngFor=\"let customField of customFieldConfig\">\r\n    <vdr-custom-field-control\r\n        *ngIf=\"customFieldFormGroup.get(customField.name)\"\r\n        [readonly]=\"true\"\r\n        [compact]=\"true\"\r\n        [customField]=\"customField\"\r\n        [customFieldsFormGroup]=\"customFieldFormGroup\"\r\n    ></vdr-custom-field-control>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: FulfillmentDetailComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: FulfillmentDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-fulfillment-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n    {{ fulfillment?.createdAt | localeDate: 'medium' }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.fulfillment-method' | translate\">\r\n    {{ fulfillment?.method }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"fulfillment?.trackingCode\" [label]=\"'order.tracking-code' | translate\">\r\n    {{ fulfillment?.trackingCode }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n    <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<ng-container *ngFor=\"let customField of customFieldConfig\">\r\n    <vdr-custom-field-control\r\n        *ngIf=\"customFieldFormGroup.get(customField.name)\"\r\n        [readonly]=\"true\"\r\n        [compact]=\"true\"\r\n        [customField]=\"customField\"\r\n        [customFieldsFormGroup]=\"customFieldFormGroup\"\r\n    ></vdr-custom-field-control>\r\n</ng-container>\r\n" }]
+            args: [{ selector: 'vdr-fulfillment-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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: [{
@@ -1146,11 +1146,11 @@ class FulfillmentStateLabelComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: FulfillmentStateLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: FulfillmentStateLabelComponent, isStandalone: false, selector: "vdr-fulfillment-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Delivered'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n", styles: [":host{font-size:14px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: FulfillmentStateLabelComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: FulfillmentStateLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-fulfillment-state-label', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Delivered'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n", styles: [":host{font-size:14px}\n"] }]
+            args: [{ selector: 'vdr-fulfillment-state-label', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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
             }] } });
@@ -1182,11 +1182,11 @@ class FulfillmentCardComponent {
         return this.fulfillment.nextStates.filter(s => s !== suggested);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: FulfillmentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: FulfillmentCardComponent, isStandalone: false, selector: "vdr-fulfillment-card", inputs: { fulfillment: "fulfillment", order: "order" }, outputs: { transitionState: "transitionState" }, ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-header fulfillment-header\">\r\n        <div>{{ 'order.fulfillment' | translate }}</div>\r\n        <div class=\"fulfillment-state\">\r\n            <vdr-fulfillment-state-label [state]=\"fulfillment?.state\"></vdr-fulfillment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-fulfillment-detail\r\n            *ngIf=\"!!fulfillment\"\r\n            [fulfillmentId]=\"fulfillment?.id\"\r\n            [order]=\"order\"\r\n        ></vdr-fulfillment-detail>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"fulfillment?.nextStates.length\">\r\n        <ng-container *ngIf=\"nextSuggestedState() as suggestedState\">\r\n            <button class=\"btn btn-sm btn-primary\" (click)=\"transitionState.emit(suggestedState)\">\r\n                {{ 'order.set-fulfillment-state' | translate: { state: (suggestedState | stateI18nToken | translate) } }}\r\n            </button>\r\n        </ng-container>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionState.emit(nextState)\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{ 'order.transition-to-state' | translate: { state: (nextState | stateI18nToken | translate) } }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-fulfillment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n", styles: [".fulfillment-header{display:flex;justify-content:space-between;align-items:center}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: FulfillmentDetailComponent, selector: "vdr-fulfillment-detail", inputs: ["fulfillmentId", "order"] }, { kind: "component", type: FulfillmentStateLabelComponent, selector: "vdr-fulfillment-state-label", inputs: ["state"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: FulfillmentCardComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: FulfillmentCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-fulfillment-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"card\">\r\n    <div class=\"card-header fulfillment-header\">\r\n        <div>{{ 'order.fulfillment' | translate }}</div>\r\n        <div class=\"fulfillment-state\">\r\n            <vdr-fulfillment-state-label [state]=\"fulfillment?.state\"></vdr-fulfillment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-fulfillment-detail\r\n            *ngIf=\"!!fulfillment\"\r\n            [fulfillmentId]=\"fulfillment?.id\"\r\n            [order]=\"order\"\r\n        ></vdr-fulfillment-detail>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"fulfillment?.nextStates.length\">\r\n        <ng-container *ngIf=\"nextSuggestedState() as suggestedState\">\r\n            <button class=\"btn btn-sm btn-primary\" (click)=\"transitionState.emit(suggestedState)\">\r\n                {{ 'order.set-fulfillment-state' | translate: { state: (suggestedState | stateI18nToken | translate) } }}\r\n            </button>\r\n        </ng-container>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionState.emit(nextState)\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{ 'order.transition-to-state' | translate: { state: (nextState | stateI18nToken | translate) } }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-fulfillment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n", styles: [".fulfillment-header{display:flex;justify-content:space-between;align-items:center}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"] }]
+            args: [{ selector: 'vdr-fulfillment-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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: [{
@@ -1249,11 +1249,11 @@ class ModificationDetailComponent {
         return { added, removed, modified };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ModificationDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ModificationDetailComponent, isStandalone: false, selector: "vdr-modification-detail", inputs: { order: "order", modification: "modification" }, usesOnChanges: true, ngImport: i0, template: "<vdr-labeled-data [label]=\"'common.ID' | translate\">{{ modification.id }}</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"modification.note\" [label]=\"'order.note' | translate\">{{\r\n    modification.note\r\n}}</vdr-labeled-data>\r\n<vdr-labeled-data *ngFor=\"let surcharge of modification.surcharges\" [label]=\"'order.surcharges' | translate\">\r\n    {{ getSurcharge(surcharge.id)?.description }}\r\n    {{ getSurcharge(surcharge.id)?.priceWithTax | localeCurrency: order.currencyCode }}</vdr-labeled-data\r\n>\r\n<vdr-labeled-data *ngIf=\"getAddedItems().length\" [label]=\"'order.added-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getAddedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"getRemovedItems().length\" [label]=\"'order.removed-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getRemovedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"getModifiedItems().length\" [label]=\"'order.modified-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getModifiedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: SimpleItemListComponent, selector: "vdr-simple-item-list", inputs: ["items"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ModificationDetailComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: ModificationDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-modification-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-labeled-data [label]=\"'common.ID' | translate\">{{ modification.id }}</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"modification.note\" [label]=\"'order.note' | translate\">{{\r\n    modification.note\r\n}}</vdr-labeled-data>\r\n<vdr-labeled-data *ngFor=\"let surcharge of modification.surcharges\" [label]=\"'order.surcharges' | translate\">\r\n    {{ getSurcharge(surcharge.id)?.description }}\r\n    {{ getSurcharge(surcharge.id)?.priceWithTax | localeCurrency: order.currencyCode }}</vdr-labeled-data\r\n>\r\n<vdr-labeled-data *ngIf=\"getAddedItems().length\" [label]=\"'order.added-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getAddedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"getRemovedItems().length\" [label]=\"'order.removed-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getRemovedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"getModifiedItems().length\" [label]=\"'order.modified-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getModifiedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n" }]
+            args: [{ selector: 'vdr-modification-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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: [{
@@ -1294,11 +1294,11 @@ class OrderProcessNodeComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OrderProcessNodeComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderProcessNodeComponent, isStandalone: false, selector: "vdr-order-process-node", inputs: { node: "node", index: "index", active: "active" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"node-wrapper\" [ngStyle]=\"getStyle()\" [class.active]=\"active$ | async\">\r\n    <div\r\n        class=\"node\"\r\n        [class.active-target]=\"activeTarget$ | async\"\r\n    >\r\n        {{ node.name | stateI18nToken | translate }}\r\n    </div>\r\n    <div class=\"cancelled-wrapper\" *ngIf=\"isCancellable\">\r\n        <div class=\"cancelled-edge\">\r\n        </div>\r\n        <clr-icon shape=\"dot-circle\"></clr-icon>\r\n        <div class=\"cancelled-node\">\r\n            {{ cancelledState | stateI18nToken | translate }}\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.node-wrapper{position:absolute;z-index:1;display:flex;align-items:center}.node{display:inline-block;border:2px solid var(--color-component-border-200);border-radius:3px;padding:3px 6px;z-index:1;background-color:var(--color-component-bg-100);opacity:.7;transition:opacity .2s,background-color .2s,color .2s;cursor:default}.node.active-target{border-color:var(--color-primary-500);opacity:.9}.cancelled-wrapper{display:flex;align-items:center;color:var(--color-grey-300);transition:color .2s,opacity .2s;opacity:.7}.cancelled-edge{width:48px;height:2px;background-color:var(--color-component-bg-300);transition:background-color .2s}clr-icon{margin-inline-start:-1px}.cancelled-node{margin-inline-start:6px}.active .cancelled-wrapper{opacity:1}.active .node{opacity:1;background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-primary-100)}.active .cancelled-wrapper{color:var(--color-error-500)}.active .cancelled-edge{background-color:var(--color-error-500)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderProcessNodeComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: OrderProcessNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-process-node', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"node-wrapper\" [ngStyle]=\"getStyle()\" [class.active]=\"active$ | async\">\r\n    <div\r\n        class=\"node\"\r\n        [class.active-target]=\"activeTarget$ | async\"\r\n    >\r\n        {{ node.name | stateI18nToken | translate }}\r\n    </div>\r\n    <div class=\"cancelled-wrapper\" *ngIf=\"isCancellable\">\r\n        <div class=\"cancelled-edge\">\r\n        </div>\r\n        <clr-icon shape=\"dot-circle\"></clr-icon>\r\n        <div class=\"cancelled-node\">\r\n            {{ cancelledState | stateI18nToken | translate }}\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.node-wrapper{position:absolute;z-index:1;display:flex;align-items:center}.node{display:inline-block;border:2px solid var(--color-component-border-200);border-radius:3px;padding:3px 6px;z-index:1;background-color:var(--color-component-bg-100);opacity:.7;transition:opacity .2s,background-color .2s,color .2s;cursor:default}.node.active-target{border-color:var(--color-primary-500);opacity:.9}.cancelled-wrapper{display:flex;align-items:center;color:var(--color-grey-300);transition:color .2s,opacity .2s;opacity:.7}.cancelled-edge{width:48px;height:2px;background-color:var(--color-component-bg-300);transition:background-color .2s}clr-icon{margin-inline-start:-1px}.cancelled-node{margin-inline-start:6px}.active .cancelled-wrapper{opacity:1}.active .node{opacity:1;background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-primary-100)}.active .cancelled-wrapper{color:var(--color-error-500)}.active .cancelled-edge{background-color:var(--color-error-500)}\n"] }]
+            args: [{ selector: 'vdr-order-process-node', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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: [{
@@ -1334,11 +1334,11 @@ class OrderProcessEdgeComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OrderProcessEdgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderProcessEdgeComponent, isStandalone: false, selector: "vdr-order-process-edge", inputs: { from: "from", to: "to", index: "index" }, ngImport: i0, template: "<div\r\n    [attr.data-from]=\"from.node.name\"\r\n    [attr.data-to]=\"to.node.name\"\r\n    [ngStyle]=\"getStyle()\"\r\n    [class.active]=\"active$ | async\"\r\n    class=\"edge\">\r\n    <clr-icon shape=\"arrow\" flip=\"vertical\" class=\"arrow\"></clr-icon>\r\n</div>\r\n", styles: [".edge{position:absolute;border:1px solid var(--color-component-border-200);background-color:var(--color-component-bg-300);opacity:.3;transition:border .2s,opacity .2s,background-color .2s}.edge.active{border-color:var(--color-primary-500);background-color:var(--color-primary-500);opacity:1}.edge.active .arrow{color:var(--color-primary-500)}.edge .arrow{position:absolute;bottom:-4px;left:-8px;color:var(--color-grey-300)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderProcessEdgeComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: OrderProcessEdgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-process-edge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\r\n    [attr.data-from]=\"from.node.name\"\r\n    [attr.data-to]=\"to.node.name\"\r\n    [ngStyle]=\"getStyle()\"\r\n    [class.active]=\"active$ | async\"\r\n    class=\"edge\">\r\n    <clr-icon shape=\"arrow\" flip=\"vertical\" class=\"arrow\"></clr-icon>\r\n</div>\r\n", styles: [".edge{position:absolute;border:1px solid var(--color-component-border-200);background-color:var(--color-component-bg-300);opacity:.3;transition:border .2s,opacity .2s,background-color .2s}.edge.active{border-color:var(--color-primary-500);background-color:var(--color-primary-500);opacity:1}.edge.active .arrow{color:var(--color-primary-500)}.edge .arrow{position:absolute;bottom:-4px;left:-8px;color:var(--color-grey-300)}\n"] }]
+            args: [{ selector: 'vdr-order-process-edge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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: [{
@@ -1417,11 +1417,11 @@ class OrderProcessGraphComponent {
         this.changeDetector.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OrderProcessGraphComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderProcessGraphComponent, isStandalone: false, 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\">\r\n    <vdr-order-process-node\r\n        [node]=\"state\"\r\n        [index]=\"i\"\r\n        [active]=\"(activeState$ | async) === state.name\"\r\n        (mouseenter)=\"onMouseOver(state.name)\"\r\n        (mouseleave)=\"onMouseOut()\"\r\n    ></vdr-order-process-node>\r\n</ng-container>\r\n<ng-container *ngFor=\"let edge of edges\">\r\n    <vdr-order-process-edge [from]=\"edge.from\" [to]=\"edge.to\" [index]=\"edge.index\"></vdr-order-process-edge>\r\n</ng-container>\r\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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderProcessGraphComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: OrderProcessGraphComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-process-graph', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngFor=\"let state of nodes; let i = index\">\r\n    <vdr-order-process-node\r\n        [node]=\"state\"\r\n        [index]=\"i\"\r\n        [active]=\"(activeState$ | async) === state.name\"\r\n        (mouseenter)=\"onMouseOver(state.name)\"\r\n        (mouseleave)=\"onMouseOut()\"\r\n    ></vdr-order-process-node>\r\n</ng-container>\r\n<ng-container *ngFor=\"let edge of edges\">\r\n    <vdr-order-process-edge [from]=\"edge.from\" [to]=\"edge.to\" [index]=\"edge.index\"></vdr-order-process-edge>\r\n</ng-container>\r\n", styles: [":host{display:block;border:1px hotpink;margin:20px;padding:12px;position:relative}.state-row{display:flex}\n"] }]
+            args: [{ selector: 'vdr-order-process-graph', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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: [{
@@ -1443,11 +1443,11 @@ class OrderProcessGraphDialogComponent {
         this.states = this.serverConfigService.getOrderProcessStates();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OrderProcessGraphDialogComponent, deps: [{ token: i1.ServerConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderProcessGraphDialogComponent, isStandalone: false, selector: "vdr-order-process-graph-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.order-state-diagram' | translate }}</ng-template>\r\n\r\n<vdr-order-process-graph [states]=\"states\" [initialState]=\"activeState\"></vdr-order-process-graph>\r\n", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderProcessGraphDialogComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: OrderProcessGraphDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-process-graph-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>{{ 'order.order-state-diagram' | translate }}</ng-template>\r\n\r\n<vdr-order-process-graph [states]=\"states\" [initialState]=\"activeState\"></vdr-order-process-graph>\r\n" }]
+            args: [{ selector: 'vdr-order-process-graph-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 {
@@ -1455,11 +1455,11 @@ class PaymentForRefundSelectorComponent {
         this.paymentSelected = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PaymentForRefundSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: PaymentForRefundSelectorComponent, isStandalone: false, selector: "vdr-payment-for-refund-selector", inputs: { refundablePayments: "refundablePayments", order: "order" }, outputs: { paymentSelected: "paymentSelected" }, ngImport: i0, template: "<vdr-card\r\n        [title]=\"'order.payment' | translate\"\r\n        [class.selected]=\"payment.selected\"\r\n        [class.unselected]=\"!payment.selected\"\r\n        *ngFor=\"let payment of refundablePayments\"\r\n>\r\n    <ng-template vdrCardControls>\r\n        <vdr-select-toggle\r\n                size=\"small\"\r\n                [title]=\"'order.refund-this-payment' | translate\"\r\n                [label]=\"'order.refund-this-payment' | translate\"\r\n                [disabled]=\"refundablePayments.length === 1\"\r\n                [(selected)]=\"payment.selected\"\r\n                (selectedChange)=\"paymentSelected.emit({ payment: payment, selected: $event })\"\r\n        ></vdr-select-toggle>\r\n    </ng-template>\r\n    <div class=\"form-grid\">\r\n        <vdr-labeled-data [label]=\"'order.payment-method' | translate\">\r\n            {{ payment.method }}\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'order.transaction-id' | translate\">\r\n            {{ payment.transactionId }}\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'order.payment-amount' | translate\">\r\n            {{ payment.amount | localeCurrency : order.currencyCode }}\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'order.refundable-amount' | translate\">\r\n            {{ payment.refundableAmount | localeCurrency : order.currencyCode }}\r\n        </vdr-labeled-data>\r\n    </div>\r\n    <vdr-form-field [label]=\"'order.refund-amount' | translate\">\r\n        <vdr-currency-input\r\n                [readonly]=\"!payment.selected\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                [formControl]=\"payment.amountToRefundControl\"\r\n        ></vdr-currency-input>\r\n    </vdr-form-field>\r\n</vdr-card>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: PaymentForRefundSelectorComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: PaymentForRefundSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-payment-for-refund-selector', changeDetection: ChangeDetectionStrategy.Default, standalone: false, template: "<vdr-card\r\n        [title]=\"'order.payment' | translate\"\r\n        [class.selected]=\"payment.selected\"\r\n        [class.unselected]=\"!payment.selected\"\r\n        *ngFor=\"let payment of refundablePayments\"\r\n>\r\n    <ng-template vdrCardControls>\r\n        <vdr-select-toggle\r\n                size=\"small\"\r\n                [title]=\"'order.refund-this-payment' | translate\"\r\n                [label]=\"'order.refund-this-payment' | translate\"\r\n                [disabled]=\"refundablePayments.length === 1\"\r\n                [(selected)]=\"payment.selected\"\r\n                (selectedChange)=\"paymentSelected.emit({ payment: payment, selected: $event })\"\r\n        ></vdr-select-toggle>\r\n    </ng-template>\r\n    <div class=\"form-grid\">\r\n        <vdr-labeled-data [label]=\"'order.payment-method' | translate\">\r\n            {{ payment.method }}\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'order.transaction-id' | translate\">\r\n            {{ payment.transactionId }}\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'order.payment-amount' | translate\">\r\n            {{ payment.amount | localeCurrency : order.currencyCode }}\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'order.refundable-amount' | translate\">\r\n            {{ payment.refundableAmount | localeCurrency : order.currencyCode }}\r\n        </vdr-labeled-data>\r\n    </div>\r\n    <vdr-form-field [label]=\"'order.refund-amount' | translate\">\r\n        <vdr-currency-input\r\n                [readonly]=\"!payment.selected\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                [formControl]=\"payment.amountToRefundControl\"\r\n        ></vdr-currency-input>\r\n    </vdr-form-field>\r\n</vdr-card>", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'vdr-payment-for-refund-selector', changeDetection: ChangeDetectionStrategy.Default, standalone: false, 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: [{
@@ -1620,11 +1620,11 @@ class RefundOrderDialogComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RefundOrderDialogComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: RefundOrderDialogComponent, isStandalone: false, selector: "vdr-refund-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.refund-and-cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"refund-wrapper\">\r\n    <vdr-data-table-2 id=\"refund-order\" [items]=\"order.lines\">\r\n        <!-- Here we define all the available columns -->\r\n        <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.id }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"created-at\" [heading]=\"'common.created-at' | translate\" [hiddenByDefault]=\"true\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.createdAt | localeDate : 'short' }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"updated-at\" [heading]=\"'common.updated-at' | translate\" [hiddenByDefault]=\"true\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.updatedAt | localeDate : 'short' }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n            <ng-template let-line=\"item\">\r\n                <div class=\"image-placeholder\">\r\n                    <img\r\n                        *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\r\n                        [src]=\"asset | assetPreview : 'tiny'\"\r\n                    />\r\n                    <ng-template #imagePlaceholder>\r\n                        <div class=\"placeholder\">\r\n                            <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"product-name\" [heading]=\"'order.product-name' | translate\" [optional]=\"false\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.productVariant.name }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"product-sku\" [heading]=\"'order.product-sku' | translate\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.productVariant.sku }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"unit-price\" [heading]=\"'order.unit-price' | translate\" [hiddenByDefault]=\"true\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"prorated-unit-price\" [heading]=\"'order.prorated-unit-price' | translate\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.proratedUnitPriceWithTax | localeCurrency : order.currencyCode }}\r\n                <ng-container *ngIf=\"line.discounts as discounts\">\r\n                    <vdr-dropdown *ngIf=\"discounts.length\">\r\n                        <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                            <button class=\"icon-button\"><clr-icon shape=\"info\"></clr-icon></button>\r\n                        </div>\r\n                        <vdr-dropdown-menu>\r\n                            <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                {{ discount.description }}\r\n                                <div class=\"promotion-amount\">\r\n                                    {{\r\n                                        discount.amount / 100 / line.quantity\r\n                                            | number : '1.0-2'\r\n                                            | currency : order.currencyCode\r\n                                    }}\r\n                                </div>\r\n                            </div>\r\n                        </vdr-dropdown-menu>\r\n                    </vdr-dropdown>\r\n                </ng-container>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.quantity }}\r\n                <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"refund-quantity\" [heading]=\"'order.refund' | translate\" [optional]=\"false\">\r\n            <ng-template let-line=\"item\">\r\n                <input\r\n                    *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                    [ngModel]=\"lineQuantities[line.id].quantity\"\r\n                    type=\"number\"\r\n                    [max]=\"line.quantity\"\r\n                    min=\"0\"\r\n                    (ngModelChange)=\"onRefundQuantityChange(line.id, $event)\"\r\n                />\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"cancel\" [heading]=\"'order.return-to-stock' | translate\" [optional]=\"false\">\r\n            <ng-template let-line=\"item\">\r\n                <div class=\"cancel-checkbox-wrapper\">\r\n                    <label class=\"flex center\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                            clrCheckbox\r\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n                            [(ngModel)]=\"lineQuantities[line.id].cancel\"\r\n                        />\r\n                        <span class=\"ml-1\">{{ 'order.return-to-stock' | translate }}</span></label\r\n                    >\r\n                </div>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n    </vdr-data-table-2>\r\n\r\n    <div class=\"refund-details mt-4\">\r\n        <div>\r\n            <vdr-card>\r\n                <label class=\"flex mb-2\" *ngFor=\"let shippingLine of order.shippingLines\">\r\n                    <input type=\"checkbox\" clrCheckbox (change)=\"toggleShippingRefund(shippingLine.id)\" />\r\n                    <div class=\"ml-1\">\r\n                        {{ 'order.refund-shipping' | translate }}\r\n                        <span>{{ shippingLine.shippingMethod.name }}:</span>\r\n                        <span class=\"ml-1\"\r\n                            >{{ shippingLine.discountedPriceWithTax | localeCurrency : order.currencyCode }}\r\n                        </span>\r\n                    </div></label\r\n                >\r\n                <vdr-form-field [label]=\"'order.refund-cancellation-reason' | translate\" class=\"mb-2\">\r\n                    <ng-select\r\n                        [items]=\"reasons\"\r\n                        bindLabel=\"name\"\r\n                        autofocus\r\n                        [placeholder]=\"'order.refund-cancellation-reason-required' | translate\"\r\n                        bindValue=\"id\"\r\n                        [addTag]=\"true\"\r\n                        [(ngModel)]=\"reason\"\r\n                    ></ng-select>\r\n                </vdr-form-field>\r\n                <vdr-form-field\r\n                    [label]=\"'order.refund-total' | translate\"\r\n                    [readOnlyToggle]=\"true\"\r\n                    (readOnlyToggleChange)=\"manuallySetRefundTotal = !$event\"\r\n                >\r\n                    <vdr-currency-input\r\n                        [readonly]=\"!manuallySetRefundTotal\"\r\n                        [currencyCode]=\"order.currencyCode\"\r\n                        [(ngModel)]=\"refundTotal\"\r\n                        (ngModelChange)=\"updateRefundTotal()\"\r\n                    ></vdr-currency-input>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n        </div>\r\n        <div class=\"\">\r\n            <vdr-payment-for-refund-selector\r\n                [refundablePayments]=\"refundablePayments\"\r\n                (paymentSelected)=\"onPaymentSelected($event.payment, $event.selected)\"\r\n                [order]=\"order\"\r\n            ></vdr-payment-for-refund-selector>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <div>\r\n        <div class=\"errors\">\r\n            <clr-alert\r\n                *ngIf=\"refundTotal < 0 || totalRefundableAmount < refundTotal\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{\r\n                        'order.refund-total-error'\r\n                            | translate\r\n                                : {\r\n                                      min: 0 | currency : order.currencyCode,\r\n                                      max: totalRefundableAmount | localeCurrency : order.currencyCode\r\n                                  }\r\n                    }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n            <clr-alert\r\n                *ngIf=\"amountToRefundTotal < refundTotal || refundTotal < amountToRefundTotal\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{ 'order.refund-total-warning' | translate }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n            <clr-alert\r\n                *ngIf=\"amountToRefundTotal && !reason\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{ 'order.refund-cancellation-reason-required' | translate }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n        </div>\r\n        <div class=\"modal-buttons\">\r\n            <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n            <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n                {{\r\n                    'order.refund-with-amount'\r\n                        | translate : { amount: amountToRefundTotal | localeCurrency : order.currencyCode }\r\n                }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}::ng-deep .refund-wrapper .table-wrapper{max-width:initial!important}.quantity-col{background-color:var(--color-warning-100)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;flex-direction:column;padding-bottom:var(--space-unit);gap:calc(var(--space-unit) * 2);justify-content:space-between}@media screen and (min-width: 992px){.refund-details{flex-direction:row}}.refund-details vdr-card.unselected{opacity:.8}.refund-details>*{flex:1}.errors{display:flex;justify-content:flex-end;gap:calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) 0}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-inline-start:12px}vdr-card.faded{opacity:.8}.modal-buttons{display:flex;justify-content:flex-end;gap:.6rem;gap:var(--clr-modal-footer-gap, .6rem)}\n"], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i3.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["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: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "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", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], 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", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: PaymentForRefundSelectorComponent, selector: "vdr-payment-for-refund-selector", inputs: ["refundablePayments", "order"], outputs: ["paymentSelected"] }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: RefundOrderDialogComponent, isStandalone: false, 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.proratedUnitPriceWithTax | 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: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "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", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], 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", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.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: "19.2.4", ngImport: i0, type: RefundOrderDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-refund-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>{{ 'order.refund-and-cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"refund-wrapper\">\r\n    <vdr-data-table-2 id=\"refund-order\" [items]=\"order.lines\">\r\n        <!-- Here we define all the available columns -->\r\n        <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.id }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"created-at\" [heading]=\"'common.created-at' | translate\" [hiddenByDefault]=\"true\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.createdAt | localeDate : 'short' }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"updated-at\" [heading]=\"'common.updated-at' | translate\" [hiddenByDefault]=\"true\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.updatedAt | localeDate : 'short' }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n            <ng-template let-line=\"item\">\r\n                <div class=\"image-placeholder\">\r\n                    <img\r\n                        *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\r\n                        [src]=\"asset | assetPreview : 'tiny'\"\r\n                    />\r\n                    <ng-template #imagePlaceholder>\r\n                        <div class=\"placeholder\">\r\n                            <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"product-name\" [heading]=\"'order.product-name' | translate\" [optional]=\"false\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.productVariant.name }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"product-sku\" [heading]=\"'order.product-sku' | translate\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.productVariant.sku }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"unit-price\" [heading]=\"'order.unit-price' | translate\" [hiddenByDefault]=\"true\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"prorated-unit-price\" [heading]=\"'order.prorated-unit-price' | translate\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.proratedUnitPriceWithTax | localeCurrency : order.currencyCode }}\r\n                <ng-container *ngIf=\"line.discounts as discounts\">\r\n                    <vdr-dropdown *ngIf=\"discounts.length\">\r\n                        <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                            <button class=\"icon-button\"><clr-icon shape=\"info\"></clr-icon></button>\r\n                        </div>\r\n                        <vdr-dropdown-menu>\r\n                            <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                {{ discount.description }}\r\n                                <div class=\"promotion-amount\">\r\n                                    {{\r\n                                        discount.amount / 100 / line.quantity\r\n                                            | number : '1.0-2'\r\n                                            | currency : order.currencyCode\r\n                                    }}\r\n                                </div>\r\n                            </div>\r\n                        </vdr-dropdown-menu>\r\n                    </vdr-dropdown>\r\n                </ng-container>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\">\r\n            <ng-template let-line=\"item\">\r\n                {{ line.quantity }}\r\n                <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"refund-quantity\" [heading]=\"'order.refund' | translate\" [optional]=\"false\">\r\n            <ng-template let-line=\"item\">\r\n                <input\r\n                    *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                    [ngModel]=\"lineQuantities[line.id].quantity\"\r\n                    type=\"number\"\r\n                    [max]=\"line.quantity\"\r\n                    min=\"0\"\r\n                    (ngModelChange)=\"onRefundQuantityChange(line.id, $event)\"\r\n                />\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column id=\"cancel\" [heading]=\"'order.return-to-stock' | translate\" [optional]=\"false\">\r\n            <ng-template let-line=\"item\">\r\n                <div class=\"cancel-checkbox-wrapper\">\r\n                    <label class=\"flex center\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                            clrCheckbox\r\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n                            [(ngModel)]=\"lineQuantities[line.id].cancel\"\r\n                        />\r\n                        <span class=\"ml-1\">{{ 'order.return-to-stock' | translate }}</span></label\r\n                    >\r\n                </div>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n    </vdr-data-table-2>\r\n\r\n    <div class=\"refund-details mt-4\">\r\n        <div>\r\n            <vdr-card>\r\n                <label class=\"flex mb-2\" *ngFor=\"let shippingLine of order.shippingLines\">\r\n                    <input type=\"checkbox\" clrCheckbox (change)=\"toggleShippingRefund(shippingLine.id)\" />\r\n                    <div class=\"ml-1\">\r\n                        {{ 'order.refund-shipping' | translate }}\r\n                        <span>{{ shippingLine.shippingMethod.name }}:</span>\r\n                        <span class=\"ml-1\"\r\n                            >{{ shippingLine.discountedPriceWithTax | localeCurrency : order.currencyCode }}\r\n                        </span>\r\n                    </div></label\r\n                >\r\n                <vdr-form-field [label]=\"'order.refund-cancellation-reason' | translate\" class=\"mb-2\">\r\n                    <ng-select\r\n                        [items]=\"reasons\"\r\n                        bindLabel=\"name\"\r\n                        autofocus\r\n                        [placeholder]=\"'order.refund-cancellation-reason-required' | translate\"\r\n                        bindValue=\"id\"\r\n                        [addTag]=\"true\"\r\n                        [(ngModel)]=\"reason\"\r\n                    ></ng-select>\r\n                </vdr-form-field>\r\n                <vdr-form-field\r\n                    [label]=\"'order.refund-total' | translate\"\r\n                    [readOnlyToggle]=\"true\"\r\n                    (readOnlyToggleChange)=\"manuallySetRefundTotal = !$event\"\r\n                >\r\n                    <vdr-currency-input\r\n                        [readonly]=\"!manuallySetRefundTotal\"\r\n                        [currencyCode]=\"order.currencyCode\"\r\n                        [(ngModel)]=\"refundTotal\"\r\n                        (ngModelChange)=\"updateRefundTotal()\"\r\n                    ></vdr-currency-input>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n        </div>\r\n        <div class=\"\">\r\n            <vdr-payment-for-refund-selector\r\n                [refundablePayments]=\"refundablePayments\"\r\n                (paymentSelected)=\"onPaymentSelected($event.payment, $event.selected)\"\r\n                [order]=\"order\"\r\n            ></vdr-payment-for-refund-selector>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <div>\r\n        <div class=\"errors\">\r\n            <clr-alert\r\n                *ngIf=\"refundTotal < 0 || totalRefundableAmount < refundTotal\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{\r\n                        'order.refund-total-error'\r\n                            | translate\r\n                                : {\r\n                                      min: 0 | currency : order.currencyCode,\r\n                                      max: totalRefundableAmount | localeCurrency : order.currencyCode\r\n                                  }\r\n                    }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n            <clr-alert\r\n                *ngIf=\"amountToRefundTotal < refundTotal || refundTotal < amountToRefundTotal\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{ 'order.refund-total-warning' | translate }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n            <clr-alert\r\n                *ngIf=\"amountToRefundTotal && !reason\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{ 'order.refund-cancellation-reason-required' | translate }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n        </div>\r\n        <div class=\"modal-buttons\">\r\n            <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n            <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n                {{\r\n                    'order.refund-with-amount'\r\n                        | translate : { amount: amountToRefundTotal | localeCurrency : order.currencyCode }\r\n                }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}::ng-deep .refund-wrapper .table-wrapper{max-width:initial!important}.quantity-col{background-color:var(--color-warning-100)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;flex-direction:column;padding-bottom:var(--space-unit);gap:calc(var(--space-unit) * 2);justify-content:space-between}@media screen and (min-width: 992px){.refund-details{flex-direction:row}}.refund-details vdr-card.unselected{opacity:.8}.refund-details>*{flex:1}.errors{display:flex;justify-content:flex-end;gap:calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) 0}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-inline-start:12px}vdr-card.faded{opacity:.8}.modal-buttons{display:flex;justify-content:flex-end;gap:.6rem;gap:var(--clr-modal-footer-gap, .6rem)}\n"] }]
+            args: [{ selector: 'vdr-refund-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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.proratedUnitPriceWithTax | 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 {
@@ -1638,11 +1638,11 @@ class SettleRefundDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: SettleRefundDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SettleRefundDialogComponent, isStandalone: false, selector: "vdr-settle-refund-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.settle-refund' | translate }}</ng-template>\r\n<p class=\"instruction\">\r\n    {{ 'order.settle-refund-manual-instructions' | translate: { method: refund.method } }}\r\n</p>\r\n<clr-input-container>\r\n    <label>{{ 'order.transaction-id' | translate }}</label>\r\n    <input clrInput name=\"transactionId\" [(ngModel)]=\"transactionId\" />\r\n</clr-input-container>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"submit()\" [disabled]=\"!transactionId\" class=\"btn btn-primary\">\r\n        {{ 'order.settle-refund' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{padding-bottom:32px}.instruction{margin-top:0;margin-bottom:24px}\n"], dependencies: [{ kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SettleRefundDialogComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: SettleRefundDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-settle-refund-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>{{ 'order.settle-refund' | translate }}</ng-template>\r\n<p class=\"instruction\">\r\n    {{ 'order.settle-refund-manual-instructions' | translate: { method: refund.method } }}\r\n</p>\r\n<clr-input-container>\r\n    <label>{{ 'order.transaction-id' | translate }}</label>\r\n    <input clrInput name=\"transactionId\" [(ngModel)]=\"transactionId\" />\r\n</clr-input-container>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"submit()\" [disabled]=\"!transactionId\" class=\"btn btn-primary\">\r\n        {{ 'order.settle-refund' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{padding-bottom:32px}.instruction{margin-top:0;margin-bottom:24px}\n"] }]
+            args: [{ selector: 'vdr-settle-refund-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 {
@@ -1658,11 +1658,11 @@ class PaymentStateLabelComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PaymentStateLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: PaymentStateLabelComponent, isStandalone: false, selector: "vdr-payment-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n", styles: [":host{display:flex;font-size:14px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: PaymentStateLabelComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: PaymentStateLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-payment-state-label', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n", styles: [":host{display:flex;font-size:14px}\n"] }]
+            args: [{ selector: 'vdr-payment-state-label', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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
             }] } });
@@ -1679,22 +1679,22 @@ class RefundStateLabelComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RefundStateLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: RefundStateLabelComponent, isStandalone: false, selector: "vdr-refund-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n", styles: [":host{display:flex;font-size:14px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: RefundStateLabelComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: RefundStateLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-refund-state-label', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n", styles: [":host{display:flex;font-size:14px}\n"] }]
+            args: [{ selector: 'vdr-refund-state-label', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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: "19.2.4", ngImport: i0, type: PaymentDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: PaymentDetailComponent, isStandalone: false, selector: "vdr-payment-detail", inputs: { payment: "payment", currencyCode: "currencyCode" }, ngImport: i0, template: "<vdr-labeled-data [label]=\"'order.payment-method' | translate\">\r\n    {{ payment.method }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.amount' | translate\">\r\n    {{ payment.amount | localeCurrency: currencyCode }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"payment.errorMessage\" [label]=\"'order.error-message' | translate\">\r\n    {{ payment.errorMessage }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"payment.transactionId\" [label]=\"'order.transaction-id' | translate\">\r\n    {{ payment.transactionId }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.payment-metadata' | translate\">\r\n    <vdr-object-tree [value]=\"payment.metadata\"></vdr-object-tree>\r\n</vdr-labeled-data>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: PaymentDetailComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: PaymentDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-payment-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-labeled-data [label]=\"'order.payment-method' | translate\">\r\n    {{ payment.method }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.amount' | translate\">\r\n    {{ payment.amount | localeCurrency: currencyCode }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"payment.errorMessage\" [label]=\"'order.error-message' | translate\">\r\n    {{ payment.errorMessage }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"payment.transactionId\" [label]=\"'order.transaction-id' | translate\">\r\n    {{ payment.transactionId }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.payment-metadata' | translate\">\r\n    <vdr-object-tree [value]=\"payment.metadata\"></vdr-object-tree>\r\n</vdr-labeled-data>\r\n" }]
+            args: [{ selector: 'vdr-payment-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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: [{
@@ -1717,11 +1717,11 @@ class OrderPaymentCardComponent {
         return this.payment.nextStates.filter(s => s !== 'Settled' && s !== 'Error');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OrderPaymentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderPaymentCardComponent, isStandalone: false, selector: "vdr-order-payment-card", inputs: { payment: "payment", currencyCode: "currencyCode" }, outputs: { settlePayment: "settlePayment", transitionPaymentState: "transitionPaymentState", settleRefund: "settleRefund" }, ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-header payment-header\">\r\n        <div>\r\n            {{ 'order.payment' | translate }}\r\n            <ng-container *ngIf=\"payment.amount\">{{ payment.amount | localeCurrency : currencyCode }}</ng-container>\r\n        </div>\r\n        <div class=\"payment-state\">\r\n            <vdr-payment-state-label [state]=\"payment.state\"></vdr-payment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-payment-detail [payment]=\"payment\" [currencyCode]=\"currencyCode\"></vdr-payment-detail>\r\n    </div>\r\n    <ng-container *ngFor=\"let refund of payment.refunds\">\r\n        <div class=\"refund-wrapper card-block\">\r\n            <div class=\"card-header payment-header refund-header\">\r\n                <clr-icon shape=\"redo\" class=\"refund-icon\" dir=\"down\"></clr-icon>\r\n                {{ 'order.refund' | translate }} #{{ refund.id }}\r\n                <div class=\"clr-flex-fill\"></div>\r\n                <vdr-refund-state-label [state]=\"refund.state\"></vdr-refund-state-label>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n                    {{ refund.createdAt | localeDate : 'medium' }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'order.refund-total' | translate\">\r\n                    {{ refund.total | localeCurrency : currencyCode }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'order.transaction-id' | translate\" *ngIf=\"refund.transactionId\">\r\n                    {{ refund.transactionId }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'order.refund-reason' | translate\" *ngIf=\"refund.reason\">\r\n                    {{ refund.reason }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data\r\n                    [label]=\"'order.refund-metadata' | translate\"\r\n                    *ngIf=\"refundHasMetadata(refund)\"\r\n                >\r\n                    <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <div class=\"card-footer\" *ngIf=\"refund.state === 'Pending'\">\r\n                <button class=\"btn btn-sm btn-primary\" (click)=\"settleRefund.emit(refund)\">\r\n                    {{ 'order.settle-refund' | translate }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"card-footer\" *ngIf=\"payment.nextStates.length\">\r\n        <button\r\n            class=\"btn btn-sm btn-primary\"\r\n            *ngIf=\"payment.nextStates.includes('Settled')\"\r\n            (click)=\"settlePayment.emit(payment)\"\r\n        >\r\n            {{ 'order.settle-payment' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionPaymentState.emit({ payment: payment, state: nextState })\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate : { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-payment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.payment-header{display:flex;justify-content:space-between;align-items:center;line-break:anywhere}.refund-icon{margin-inline-end:6px;color:var(--color-grey-400)}.card-footer{display:flex;align-items:center;justify-content:flex-end}.refund-wrapper{font-size:var(--font-size-xs)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.ɵɵDir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: PaymentStateLabelComponent, selector: "vdr-payment-state-label", inputs: ["state"] }, { kind: "component", type: RefundStateLabelComponent, selector: "vdr-refund-state-label", inputs: ["state"] }, { kind: "component", type: PaymentDetailComponent, selector: "vdr-payment-detail", inputs: ["payment", "currencyCode"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderPaymentCardComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: OrderPaymentCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-payment-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"card\">\r\n    <div class=\"card-header payment-header\">\r\n        <div>\r\n            {{ 'order.payment' | translate }}\r\n            <ng-container *ngIf=\"payment.amount\">{{ payment.amount | localeCurrency : currencyCode }}</ng-container>\r\n        </div>\r\n        <div class=\"payment-state\">\r\n            <vdr-payment-state-label [state]=\"payment.state\"></vdr-payment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-payment-detail [payment]=\"payment\" [currencyCode]=\"currencyCode\"></vdr-payment-detail>\r\n    </div>\r\n    <ng-container *ngFor=\"let refund of payment.refunds\">\r\n        <div class=\"refund-wrapper card-block\">\r\n            <div class=\"card-header payment-header refund-header\">\r\n                <clr-icon shape=\"redo\" class=\"refund-icon\" dir=\"down\"></clr-icon>\r\n                {{ 'order.refund' | translate }} #{{ refund.id }}\r\n                <div class=\"clr-flex-fill\"></div>\r\n                <vdr-refund-state-label [state]=\"refund.state\"></vdr-refund-state-label>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n                    {{ refund.createdAt | localeDate : 'medium' }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'order.refund-total' | translate\">\r\n                    {{ refund.total | localeCurrency : currencyCode }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'order.transaction-id' | translate\" *ngIf=\"refund.transactionId\">\r\n                    {{ refund.transactionId }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'order.refund-reason' | translate\" *ngIf=\"refund.reason\">\r\n                    {{ refund.reason }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data\r\n                    [label]=\"'order.refund-metadata' | translate\"\r\n                    *ngIf=\"refundHasMetadata(refund)\"\r\n                >\r\n                    <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <div class=\"card-footer\" *ngIf=\"refund.state === 'Pending'\">\r\n                <button class=\"btn btn-sm btn-primary\" (click)=\"settleRefund.emit(refund)\">\r\n                    {{ 'order.settle-refund' | translate }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"card-footer\" *ngIf=\"payment.nextStates.length\">\r\n        <button\r\n            class=\"btn btn-sm btn-primary\"\r\n            *ngIf=\"payment.nextStates.includes('Settled')\"\r\n            (click)=\"settlePayment.emit(payment)\"\r\n        >\r\n            {{ 'order.settle-payment' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionPaymentState.emit({ payment: payment, state: nextState })\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate : { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-payment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.payment-header{display:flex;justify-content:space-between;align-items:center;line-break:anywhere}.refund-icon{margin-inline-end:6px;color:var(--color-grey-400)}.card-footer{display:flex;align-items:center;justify-content:flex-end}.refund-wrapper{font-size:var(--font-size-xs)}\n"] }]
+            args: [{ selector: 'vdr-order-payment-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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: [{
@@ -1751,36 +1751,36 @@ class OrderHistoryEntryHostComponent {
         this.componentRef?.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OrderHistoryEntryHostComponent, deps: [{ token: i1.HistoryEntryComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderHistoryEntryHostComponent, isStandalone: false, 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>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderHistoryEntryHostComponent, isStandalone: false, 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: "19.2.4", 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>
+                    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',
                     standalone: false,
@@ -1951,11 +1951,11 @@ class OrderHistoryComponent {
         this.noteIsPrivate = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OrderHistoryComponent, deps: [{ token: i1.HistoryEntryComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderHistoryComponent, isStandalone: false, selector: "vdr-order-history", inputs: { order: "order", history: "history" }, outputs: { addNote: "addNote", updateNote: "updateNote", deleteNote: "deleteNote" }, ngImport: i0, template: "<div class=\"entry-list\" [class.expanded]=\"expanded\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\" [isFirst]=\"true\">\r\n        <div class=\"note-entry\">\r\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToOrder()\">\r\n                {{ 'common.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"visibility-select\">\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n                <label>{{ 'order.note-is-private' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n                {{ 'order.note-only-visible-to-administrators' | translate }}\r\n            </span>\r\n            <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n                {{ 'order.note-visible-to-customer' | translate }}\r\n            </span>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <ng-container *ngFor=\"let entry of history\">\r\n        <vdr-order-history-entry-host\r\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\r\n            [order]=\"order\"\r\n            [entry]=\"entry\"\r\n            [expanded]=\"expanded\"\r\n            (expandClick)=\"expanded = !expanded\"\r\n        ></vdr-order-history-entry-host>\r\n        <ng-template #defaultComponents>\r\n            <vdr-timeline-entry\r\n                [displayType]=\"getDisplayType(entry)\"\r\n                [iconShape]=\"getTimelineIcon(entry)\"\r\n                [createdAt]=\"entry.createdAt\"\r\n                [name]=\"getName(entry)\"\r\n                [featured]=\"isFeatured(entry)\"\r\n                [collapsed]=\"!expanded && !isFeatured(entry)\"\r\n                (expandClick)=\"expanded = !expanded\"\r\n            >\r\n                <ng-container [ngSwitch]=\"entry.type\">\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_STATE_TRANSITION\">\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            {{ 'order.history-order-fulfilled' | translate }}\r\n                        </div>\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Cancelled'\">\r\n                            {{ 'order.history-order-cancelled' | translate }}\r\n                        </div>\r\n                        <ng-template [ngIf]=\"entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'\">\r\n                            {{\r\n                                'order.history-order-transition'\r\n                                    | translate : { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_MODIFIED\">\r\n                        <div class=\"title\">\r\n                            {{ 'order.history-order-modified' | translate }}\r\n                        </div>\r\n                        <div\r\n                            class=\"flex items-center\"\r\n                            *ngIf=\"getModification(entry.data.modificationId) as modification\"\r\n                        >\r\n                            {{ 'order.modify-order-price-difference' | translate }}:\r\n                            <strong>{{\r\n                                modification.priceChange | localeCurrency : order.currencyCode\r\n                            }}</strong>\r\n                            <vdr-chip colorType=\"success\" class=\"mx-1\" *ngIf=\"modification.isSettled\">{{\r\n                                'order.modification-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-chip colorType=\"error\" class=\"mx-1\" *ngIf=\"!modification.isSettled\">{{\r\n                                'order.modification-not-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-modification-detail\r\n                                    [order]=\"order\"\r\n                                    [modification]=\"modification\"\r\n                                ></vdr-modification-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_PAYMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularPaymentTransition\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-payment-settled' | translate }}\r\n                            </div>\r\n                            <div class=\"flex items-center\">\r\n                                <vdr-chip *ngIf=\"getPayment(entry) as payment\" class=\"mr-1\">{{\r\n                                    payment.amount | localeCurrency : order.currencyCode\r\n                                }}</vdr-chip>\r\n                                <vdr-history-entry-detail *ngIf=\"getPayment(entry) as payment\">\r\n                                    <vdr-payment-detail\r\n                                        [payment]=\"payment\"\r\n                                        [currencyCode]=\"order.currencyCode\"\r\n                                    ></vdr-payment-detail>\r\n                                </vdr-history-entry-detail>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-template #regularPaymentTransition>\r\n                            {{\r\n                                'order.history-payment-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: getPayment(entry)?.transactionId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_REFUND_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularRefundTransition\">\r\n                            <ng-container *ngIf=\"getRefund(entry) as refund\">\r\n                                <div class=\"title\">{{ 'order.refund' | translate }} #{{ refund.id }}</div>\r\n                                <div class=\"flex items-center\">\r\n                                    <vdr-chip colorType=\"warning\" class=\"mr-1\">{{\r\n                                        refund.total | localeCurrency : order.currencyCode\r\n                                    }}</vdr-chip>\r\n                                    <vdr-history-entry-detail>\r\n                                        <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                            {{ entry.data.reason }}\r\n                                        </vdr-labeled-data>\r\n                                        <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                            <vdr-simple-item-list\r\n                                                [items]=\"getCancelledItems(refund.lines)\"\r\n                                            ></vdr-simple-item-list>\r\n                                        </vdr-labeled-data>\r\n                                    </vdr-history-entry-detail>\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #regularRefundTransition>\r\n                            {{\r\n                                'order.history-refund-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: entry.data.refundId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CANCELLATION\">\r\n                        {{\r\n                            'order.history-items-cancelled'\r\n                                | translate : { count: getCancelledQuantity(entry) }\r\n                        }}\r\n                        <vdr-history-entry-detail *ngIf=\"getCancelledItems(entry.data.lines) as items\">\r\n                            <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                {{ entry.data.reason }}\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.shipping-cancelled' | translate\">\r\n                                {{ entry.data.shippingCancelled }}\r\n                            </vdr-labeled-data>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT\">\r\n                        {{ 'order.history-fulfillment-created' | translate }}\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-delivered' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to === 'Shipped'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-shipped' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'\">\r\n                            {{\r\n                                'order.history-fulfillment-transition'\r\n                                    | translate : { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-container>\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_NOTE\">\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                <span *ngIf=\"entry.isPublic\" class=\"note-visibility public\">{{\r\n                                    'common.public' | translate\r\n                                }}</span>\r\n                                <span *ngIf=\"!entry.isPublic\" class=\"note-visibility private\">{{\r\n                                    'common.private' | translate\r\n                                }}</span>\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-dropdown>\r\n                                <button class=\"button-small ml-1\" vdrDropdownTrigger>\r\n                                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n                                </button>\r\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"updateNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"edit\"></clr-icon>\r\n                                        {{ 'common.edit' | translate }}\r\n                                    </button>\r\n                                    <div class=\"dropdown-divider\"></div>\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"deleteNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                        {{ 'common.delete' | translate }}\r\n                                    </button>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_APPLIED\">\r\n                        {{ 'order.history-coupon-code-applied' | translate }}:\r\n                        <vdr-chip>\r\n                            <a [routerLink]=\"['/marketing', 'promotions', entry.data.promotionId]\">{{\r\n                                entry.data.couponCode\r\n                            }}</a>\r\n                        </vdr-chip>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_REMOVED\">\r\n                        {{ 'order.history-coupon-code-removed' | translate }}:\r\n                        <vdr-chip\r\n                            ><span class=\"cancelled-coupon-code\">{{ entry.data.couponCode }}</span></vdr-chip\r\n                        >\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CUSTOMER_UPDATED\">\r\n                        <div class=\"title\">\r\n                            {{\r\n                                'order.history-customer-updated'\r\n                                    | translate : { newCustomerName: entry.data.newCustomerName }\r\n                            }}\r\n                        </div>\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-labeled-data [label]=\"'order.previous-customer' | translate\">\r\n                                    <a\r\n                                        *ngIf=\"entry.data.previousCustomerId\"\r\n                                        class=\"button-ghost\"\r\n                                        [routerLink]=\"[\r\n                                            '/customer',\r\n                                            'customers',\r\n                                            entry.data.previousCustomerId\r\n                                        ]\"\r\n                                    >\r\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\r\n                                        <span>{{ entry.data.previousCustomerName }}</span>\r\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                                    </a>\r\n                                </vdr-labeled-data>\r\n                                <vdr-labeled-data [label]=\"'order.new-customer' | translate\">\r\n                                    <a\r\n                                        *ngIf=\"entry.data.newCustomerId\"\r\n                                        class=\"button-ghost\"\r\n                                        [routerLink]=\"['/customer', 'customers', entry.data.newCustomerId]\"\r\n                                    >\r\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\r\n                                        <span>{{ entry.data.newCustomerName }}</span>\r\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                                    </a>\r\n                                </vdr-labeled-data>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"title\">\r\n                            {{ entry.type | translate }}\r\n                        </div>\r\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\r\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </vdr-timeline-entry>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <vdr-timeline-entry [isLast]=\"true\" [createdAt]=\"order.createdAt\" [featured]=\"true\">\r\n        <div class=\"title\">\r\n            {{ 'order.history-order-created' | translate }}\r\n        </div>\r\n    </vdr-timeline-entry>\r\n</div>\r\n", styles: [":host{display:block}.entry-list{margin-inline-start:calc(var(--space-unit) * 2)}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}.visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-700)}.visibility-select .private{color:var(--color-success-700)}textarea.note{flex:1;height:36px;border-radius:3px;margin-inline-end:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap;max-width:580px}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-700)}.note-visibility.private{color:var(--color-success-700)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderHistoryComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: OrderHistoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-history', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"entry-list\" [class.expanded]=\"expanded\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\" [isFirst]=\"true\">\r\n        <div class=\"note-entry\">\r\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToOrder()\">\r\n                {{ 'common.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"visibility-select\">\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n                <label>{{ 'order.note-is-private' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n                {{ 'order.note-only-visible-to-administrators' | translate }}\r\n            </span>\r\n            <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n                {{ 'order.note-visible-to-customer' | translate }}\r\n            </span>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <ng-container *ngFor=\"let entry of history\">\r\n        <vdr-order-history-entry-host\r\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\r\n            [order]=\"order\"\r\n            [entry]=\"entry\"\r\n            [expanded]=\"expanded\"\r\n            (expandClick)=\"expanded = !expanded\"\r\n        ></vdr-order-history-entry-host>\r\n        <ng-template #defaultComponents>\r\n            <vdr-timeline-entry\r\n                [displayType]=\"getDisplayType(entry)\"\r\n                [iconShape]=\"getTimelineIcon(entry)\"\r\n                [createdAt]=\"entry.createdAt\"\r\n                [name]=\"getName(entry)\"\r\n                [featured]=\"isFeatured(entry)\"\r\n                [collapsed]=\"!expanded && !isFeatured(entry)\"\r\n                (expandClick)=\"expanded = !expanded\"\r\n            >\r\n                <ng-container [ngSwitch]=\"entry.type\">\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_STATE_TRANSITION\">\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            {{ 'order.history-order-fulfilled' | translate }}\r\n                        </div>\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Cancelled'\">\r\n                            {{ 'order.history-order-cancelled' | translate }}\r\n                        </div>\r\n                        <ng-template [ngIf]=\"entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'\">\r\n                            {{\r\n                                'order.history-order-transition'\r\n                                    | translate : { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_MODIFIED\">\r\n                        <div class=\"title\">\r\n                            {{ 'order.history-order-modified' | translate }}\r\n                        </div>\r\n                        <div\r\n                            class=\"flex items-center\"\r\n                            *ngIf=\"getModification(entry.data.modificationId) as modification\"\r\n                        >\r\n                            {{ 'order.modify-order-price-difference' | translate }}:\r\n                            <strong>{{\r\n                                modification.priceChange | localeCurrency : order.currencyCode\r\n                            }}</strong>\r\n                            <vdr-chip colorType=\"success\" class=\"mx-1\" *ngIf=\"modification.isSettled\">{{\r\n                                'order.modification-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-chip colorType=\"error\" class=\"mx-1\" *ngIf=\"!modification.isSettled\">{{\r\n                                'order.modification-not-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-modification-detail\r\n                                    [order]=\"order\"\r\n                                    [modification]=\"modification\"\r\n                                ></vdr-modification-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_PAYMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularPaymentTransition\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-payment-settled' | translate }}\r\n                            </div>\r\n                            <div class=\"flex items-center\">\r\n                                <vdr-chip *ngIf=\"getPayment(entry) as payment\" class=\"mr-1\">{{\r\n                                    payment.amount | localeCurrency : order.currencyCode\r\n                                }}</vdr-chip>\r\n                                <vdr-history-entry-detail *ngIf=\"getPayment(entry) as payment\">\r\n                                    <vdr-payment-detail\r\n                                        [payment]=\"payment\"\r\n                                        [currencyCode]=\"order.currencyCode\"\r\n                                    ></vdr-payment-detail>\r\n                                </vdr-history-entry-detail>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-template #regularPaymentTransition>\r\n                            {{\r\n                                'order.history-payment-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: getPayment(entry)?.transactionId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_REFUND_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularRefundTransition\">\r\n                            <ng-container *ngIf=\"getRefund(entry) as refund\">\r\n                                <div class=\"title\">{{ 'order.refund' | translate }} #{{ refund.id }}</div>\r\n                                <div class=\"flex items-center\">\r\n                                    <vdr-chip colorType=\"warning\" class=\"mr-1\">{{\r\n                                        refund.total | localeCurrency : order.currencyCode\r\n                                    }}</vdr-chip>\r\n                                    <vdr-history-entry-detail>\r\n                                        <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                            {{ entry.data.reason }}\r\n                                        </vdr-labeled-data>\r\n                                        <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                            <vdr-simple-item-list\r\n                                                [items]=\"getCancelledItems(refund.lines)\"\r\n                                            ></vdr-simple-item-list>\r\n                                        </vdr-labeled-data>\r\n                                    </vdr-history-entry-detail>\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #regularRefundTransition>\r\n                            {{\r\n                                'order.history-refund-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: entry.data.refundId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CANCELLATION\">\r\n                        {{\r\n                            'order.history-items-cancelled'\r\n                                | translate : { count: getCancelledQuantity(entry) }\r\n                        }}\r\n                        <vdr-history-entry-detail *ngIf=\"getCancelledItems(entry.data.lines) as items\">\r\n                            <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                {{ entry.data.reason }}\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.shipping-cancelled' | translate\">\r\n                                {{ entry.data.shippingCancelled }}\r\n                            </vdr-labeled-data>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT\">\r\n                        {{ 'order.history-fulfillment-created' | translate }}\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-delivered' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to === 'Shipped'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-shipped' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'\">\r\n                            {{\r\n                                'order.history-fulfillment-transition'\r\n                                    | translate : { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-container>\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_NOTE\">\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                <span *ngIf=\"entry.isPublic\" class=\"note-visibility public\">{{\r\n                                    'common.public' | translate\r\n                                }}</span>\r\n                                <span *ngIf=\"!entry.isPublic\" class=\"note-visibility private\">{{\r\n                                    'common.private' | translate\r\n                                }}</span>\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-dropdown>\r\n                                <button class=\"button-small ml-1\" vdrDropdownTrigger>\r\n                                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n                                </button>\r\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"updateNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"edit\"></clr-icon>\r\n                                        {{ 'common.edit' | translate }}\r\n                                    </button>\r\n                                    <div class=\"dropdown-divider\"></div>\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"deleteNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                        {{ 'common.delete' | translate }}\r\n                                    </button>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_APPLIED\">\r\n                        {{ 'order.history-coupon-code-applied' | translate }}:\r\n                        <vdr-chip>\r\n                            <a [routerLink]=\"['/marketing', 'promotions', entry.data.promotionId]\">{{\r\n                                entry.data.couponCode\r\n                            }}</a>\r\n                        </vdr-chip>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_REMOVED\">\r\n                        {{ 'order.history-coupon-code-removed' | translate }}:\r\n                        <vdr-chip\r\n                            ><span class=\"cancelled-coupon-code\">{{ entry.data.couponCode }}</span></vdr-chip\r\n                        >\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CUSTOMER_UPDATED\">\r\n                        <div class=\"title\">\r\n                            {{\r\n                                'order.history-customer-updated'\r\n                                    | translate : { newCustomerName: entry.data.newCustomerName }\r\n                            }}\r\n                        </div>\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-labeled-data [label]=\"'order.previous-customer' | translate\">\r\n                                    <a\r\n                                        *ngIf=\"entry.data.previousCustomerId\"\r\n                                        class=\"button-ghost\"\r\n                                        [routerLink]=\"[\r\n                                            '/customer',\r\n                                            'customers',\r\n                                            entry.data.previousCustomerId\r\n                                        ]\"\r\n                                    >\r\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\r\n                                        <span>{{ entry.data.previousCustomerName }}</span>\r\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                                    </a>\r\n                                </vdr-labeled-data>\r\n                                <vdr-labeled-data [label]=\"'order.new-customer' | translate\">\r\n                                    <a\r\n                                        *ngIf=\"entry.data.newCustomerId\"\r\n                                        class=\"button-ghost\"\r\n                                        [routerLink]=\"['/customer', 'customers', entry.data.newCustomerId]\"\r\n                                    >\r\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\r\n                                        <span>{{ entry.data.newCustomerName }}</span>\r\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                                    </a>\r\n                                </vdr-labeled-data>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"title\">\r\n                            {{ entry.type | translate }}\r\n                        </div>\r\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\r\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </vdr-timeline-entry>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <vdr-timeline-entry [isLast]=\"true\" [createdAt]=\"order.createdAt\" [featured]=\"true\">\r\n        <div class=\"title\">\r\n            {{ 'order.history-order-created' | translate }}\r\n        </div>\r\n    </vdr-timeline-entry>\r\n</div>\r\n", styles: [":host{display:block}.entry-list{margin-inline-start:calc(var(--space-unit) * 2)}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}.visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-700)}.visibility-select .private{color:var(--color-success-700)}textarea.note{flex:1;height:36px;border-radius:3px;margin-inline-end:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap;max-width:580px}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-700)}.note-visibility.private{color:var(--color-success-700)}\n"] }]
+            args: [{ selector: 'vdr-order-history', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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: [{
@@ -1968,28 +1968,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 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
-                    }
-                }
-            }
-        }
-    }
+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 {
@@ -2013,35 +2013,35 @@ class SellerOrdersCardComponent {
         this.router.navigate(['/orders', order.id]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", 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: "19.2.4", type: SellerOrdersCardComponent, isStandalone: false, selector: "vdr-seller-orders-card", inputs: { orderId: "orderId" }, ngImport: i0, template: "<vdr-card [title]=\"'order.seller-orders' | translate\">\r\n    <div class=\"form-grid\">\r\n        <div *ngFor=\"let order of sellerOrders$ | async\">\r\n            <a [routerLink]=\"['seller-orders', order.id]\" class=\"button-ghost mb-1\"\r\n                >{{ order.code }} <clr-icon shape=\"arrow right\"></clr-icon\r\n            ></a>\r\n            <vdr-labeled-data [label]=\"'order.state' | translate\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"getSeller(order) as seller\" [label]=\"'common.seller' | translate\">\r\n                {{ seller.name }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"getSeller(order) as seller\" [label]=\"'order.total' | translate\">\r\n                {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n            </vdr-labeled-data>\r\n        </div>\r\n    </div>\r\n</vdr-card>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: SellerOrdersCardComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: SellerOrdersCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-seller-orders-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-card [title]=\"'order.seller-orders' | translate\">\r\n    <div class=\"form-grid\">\r\n        <div *ngFor=\"let order of sellerOrders$ | async\">\r\n            <a [routerLink]=\"['seller-orders', order.id]\" class=\"button-ghost mb-1\"\r\n                >{{ order.code }} <clr-icon shape=\"arrow right\"></clr-icon\r\n            ></a>\r\n            <vdr-labeled-data [label]=\"'order.state' | translate\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"getSeller(order) as seller\" [label]=\"'common.seller' | translate\">\r\n                {{ seller.name }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"getSeller(order) as seller\" [label]=\"'order.total' | translate\">\r\n                {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n            </vdr-labeled-data>\r\n        </div>\r\n    </div>\r\n</vdr-card>\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'vdr-seller-orders-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 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
-            }
-        }
-    }
+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) {
@@ -2590,11 +2590,11 @@ class OrderDetailComponent extends TypedBaseDetailComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", 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: "19.2.4", type: OrderDetailComponent, isStandalone: false, selector: "vdr-order-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left> </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"order-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    (order.state === 'ArrangingPayment' || order.state === 'ArrangingAdditionalPayment') &&\r\n                    (hasUnsettledModifications(order) || 0 < outstandingPaymentAmount(order))\r\n                \"\r\n                (click)=\"addManualPayment(order)\"\r\n            >\r\n                {{ 'order.add-payment-to-order' | translate }}\r\n                ({{ outstandingPaymentAmount(order) | localeCurrency : order.currencyCode }})\r\n            </button>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    order.active === false &&\r\n                    order.state !== 'ArrangingAdditionalPayment' &&\r\n                    order.state !== 'ArrangingPayment' &&\r\n                    0 < outstandingPaymentAmount(order)\r\n                \"\r\n                (click)=\"transitionToState('ArrangingAdditionalPayment')\"\r\n            >\r\n                {{ 'order.arrange-additional-payment' | translate }}\r\n            </button>\r\n            <button\r\n                *ngIf=\"order.type !== 'Aggregate'\"\r\n                class=\"button primary mr-1\"\r\n                (click)=\"fulfillOrder()\"\r\n                [disabled]=\"!canAddFulfillment(order)\"\r\n            >\r\n                {{ 'order.fulfill-order' | translate }}\r\n            </button>\r\n            <vdr-action-bar-dropdown-menu [alwaysShow]=\"true\" locationId=\"order-detail\">\r\n                <ng-container *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Modifying')\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"transitionToModifying()\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon>\r\n                        {{ 'order.modify-order' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                </ng-container>\r\n                <button\r\n                    type=\"button\"\r\n                    vdrDropdownItem\r\n                    *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Cancelled')\"\r\n                    (click)=\"cancelOrRefund(order)\"\r\n                >\r\n                    <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                    <ng-container *ngIf=\"orderHasSettledPayments(order); else cancelOnly\">\r\n                        {{ 'order.refund-and-cancel-order' | translate }}\r\n                    </ng-container>\r\n                    <ng-template #cancelOnly>\r\n                        {{ 'order.cancel-order' | translate }}\r\n                    </ng-template>\r\n                </button>\r\n\r\n                <ng-container *ngIf=\"(nextStates$ | async)?.length\">\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        *ngFor=\"let nextState of nextStates$ | async\"\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionToState(nextState)\"\r\n                    >\r\n                        <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                        {{\r\n                            'order.transition-to-state'\r\n                                | translate : { state: (nextState | stateI18nToken | translate) }\r\n                        }}\r\n                    </button>\r\n                </ng-container>\r\n                <div class=\"dropdown-divider\"></div>\r\n                <button type=\"button\" vdrDropdownItem (click)=\"manuallyTransitionToState(order)\">\r\n                    <clr-icon shape=\"step-forward-2\" class=\"is-warning\"></clr-icon>\r\n                    {{ 'order.manually-transition-to-state' | translate }}\r\n                </button>\r\n            </vdr-action-bar-dropdown-menu>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card [title]=\"'order.state' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <button\r\n                    class=\"button-small\"\r\n                    (click)=\"openStateDiagram()\"\r\n                    [title]=\"'order.order-state-diagram' | translate\"\r\n                >\r\n                    <clr-icon shape=\"list\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <button\r\n                    *vdrIfPermissions=\"['UpdateOrder', 'ReadCustomer']\"\r\n                    class=\"button-small\"\r\n                    (click)=\"setOrderCustomer()\"\r\n                    [title]=\"'order.assign-order-to-another-customer' | translate\"\r\n                >\r\n                    <clr-icon shape=\"switch\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n            <vdr-labeled-data\r\n                class=\"mt-2\"\r\n                [label]=\"'order.shipping-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.shippingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.shippingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data\r\n                [label]=\"'order.billing-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.billingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.billingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.payments' | translate\" *ngIf=\"order.payments?.length\">\r\n            <vdr-order-payment-card\r\n                *ngFor=\"let payment of order.payments\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                [payment]=\"payment\"\r\n                (settlePayment)=\"settlePayment($event)\"\r\n                (transitionPaymentState)=\"transitionPaymentState($event)\"\r\n                (settleRefund)=\"settleRefund($event)\"\r\n            ></vdr-order-payment-card>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"order.fulfillments?.length\">\r\n            <vdr-fulfillment-card\r\n                *ngFor=\"let fulfillment of order.fulfillments\"\r\n                [fulfillment]=\"fulfillment\"\r\n                [order]=\"order\"\r\n                (transitionState)=\"transitionFulfillment(fulfillment.id, $event)\"\r\n            ></vdr-fulfillment-card>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n\r\n    <vdr-page-block>\r\n        <vdr-seller-orders-card\r\n            class=\"mb-2\"\r\n            *ngIf=\"order.sellerOrders.length\"\r\n            [orderId]=\"order.id\"\r\n        ></vdr-seller-orders-card>\r\n        <vdr-card [paddingX]=\"false\">\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\" [paddingX]=\"false\">\r\n            <table class=\"table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>{{ 'common.description' | translate }}</th>\r\n                        <th>{{ 'order.tax-rate' | translate }}</th>\r\n                        <th>{{ 'order.tax-base' | translate }}</th>\r\n                        <th>{{ 'order.tax-total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let row of order.taxSummary\">\r\n                        <td>{{ row.description }}</td>\r\n                        <td>{{ row.taxRate / 100 | percent : '0.0-3' }}</td>\r\n                        <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                        <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Order\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                [readonly]=\"!('UpdateOrder' | hasPermission)\"\r\n            />\r\n            <button\r\n                class=\"button primary\"\r\n                (click)=\"updateCustomFields()\"\r\n                [disabled]=\"\r\n                    detailForm.get('customFields')?.pristine || detailForm.get('customFields')?.invalid\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"order-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n\r\n        <vdr-card [title]=\"'order.order-history' | translate\">\r\n            <vdr-order-history\r\n                [order]=\"order\"\r\n                [history]=\"history$ | async\"\r\n                (addNote)=\"addNote($event)\"\r\n                (updateNote)=\"updateNote($event)\"\r\n                (deleteNote)=\"deleteNote($event)\"\r\n            ></vdr-order-history>\r\n        </vdr-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".shipping-address{list-style-type:none;line-height:1.3em}.order-cards h6{margin-top:6px;color:var(--color-text-200)}vdr-order-payment-card+vdr-order-payment-card{margin-top:calc(var(--space-unit) * 2)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderDetailComponent, isStandalone: false, 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' || order.state === 'ArrangingAdditionalPayment') &&\n                    (hasUnsettledModifications(order) || 0 < outstandingPaymentAmount(order))\n                \"\n                (click)=\"addManualPayment(order)\"\n            >\n                {{ 'order.add-payment-to-order' | translate }}\n                ({{ outstandingPaymentAmount(order) | localeCurrency : order.currencyCode }})\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 [alwaysShow]=\"true\" locationId=\"order-detail\">\n                <ng-container *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Modifying')\">\n                    <button type=\"button\" vdrDropdownItem (click)=\"transitionToModifying()\">\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=\"order.type !== 'Aggregate' && order.nextStates.includes('Cancelled')\"\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 : { state: (nextState | stateI18nToken | translate) }\n                        }}\n                    </button>\n                </ng-container>\n                <div class=\"dropdown-divider\"></div>\n                <button type=\"button\" vdrDropdownItem (click)=\"manuallyTransitionToState(order)\">\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 [address]=\"order.shippingAddress\" class=\"mt-1\"></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 [address]=\"order.billingAddress\" class=\"mt-1\"></vdr-formatted-address>\n            </vdr-labeled-data>\n        </vdr-card>\n        <vdr-card [title]=\"'order.payments' | translate\" *ngIf=\"order.payments?.length\">\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 *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\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-3' }}</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 [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\n            <vdr-tabbed-custom-fields\n                entityName=\"Order\"\n                [customFields]=\"customFields\"\n                [customFieldsFormGroup]=\"detailForm.get('customFields')\"\n                [readonly]=\"!('UpdateOrder' | hasPermission)\"\n            />\n            <button\n                class=\"button primary\"\n                (click)=\"updateCustomFields()\"\n                [disabled]=\"\n                    detailForm.get('customFields')?.pristine || 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: "19.2.4", ngImport: i0, type: OrderDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left> </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"order-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    (order.state === 'ArrangingPayment' || order.state === 'ArrangingAdditionalPayment') &&\r\n                    (hasUnsettledModifications(order) || 0 < outstandingPaymentAmount(order))\r\n                \"\r\n                (click)=\"addManualPayment(order)\"\r\n            >\r\n                {{ 'order.add-payment-to-order' | translate }}\r\n                ({{ outstandingPaymentAmount(order) | localeCurrency : order.currencyCode }})\r\n            </button>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    order.active === false &&\r\n                    order.state !== 'ArrangingAdditionalPayment' &&\r\n                    order.state !== 'ArrangingPayment' &&\r\n                    0 < outstandingPaymentAmount(order)\r\n                \"\r\n                (click)=\"transitionToState('ArrangingAdditionalPayment')\"\r\n            >\r\n                {{ 'order.arrange-additional-payment' | translate }}\r\n            </button>\r\n            <button\r\n                *ngIf=\"order.type !== 'Aggregate'\"\r\n                class=\"button primary mr-1\"\r\n                (click)=\"fulfillOrder()\"\r\n                [disabled]=\"!canAddFulfillment(order)\"\r\n            >\r\n                {{ 'order.fulfill-order' | translate }}\r\n            </button>\r\n            <vdr-action-bar-dropdown-menu [alwaysShow]=\"true\" locationId=\"order-detail\">\r\n                <ng-container *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Modifying')\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"transitionToModifying()\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon>\r\n                        {{ 'order.modify-order' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                </ng-container>\r\n                <button\r\n                    type=\"button\"\r\n                    vdrDropdownItem\r\n                    *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Cancelled')\"\r\n                    (click)=\"cancelOrRefund(order)\"\r\n                >\r\n                    <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                    <ng-container *ngIf=\"orderHasSettledPayments(order); else cancelOnly\">\r\n                        {{ 'order.refund-and-cancel-order' | translate }}\r\n                    </ng-container>\r\n                    <ng-template #cancelOnly>\r\n                        {{ 'order.cancel-order' | translate }}\r\n                    </ng-template>\r\n                </button>\r\n\r\n                <ng-container *ngIf=\"(nextStates$ | async)?.length\">\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        *ngFor=\"let nextState of nextStates$ | async\"\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionToState(nextState)\"\r\n                    >\r\n                        <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                        {{\r\n                            'order.transition-to-state'\r\n                                | translate : { state: (nextState | stateI18nToken | translate) }\r\n                        }}\r\n                    </button>\r\n                </ng-container>\r\n                <div class=\"dropdown-divider\"></div>\r\n                <button type=\"button\" vdrDropdownItem (click)=\"manuallyTransitionToState(order)\">\r\n                    <clr-icon shape=\"step-forward-2\" class=\"is-warning\"></clr-icon>\r\n                    {{ 'order.manually-transition-to-state' | translate }}\r\n                </button>\r\n            </vdr-action-bar-dropdown-menu>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card [title]=\"'order.state' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <button\r\n                    class=\"button-small\"\r\n                    (click)=\"openStateDiagram()\"\r\n                    [title]=\"'order.order-state-diagram' | translate\"\r\n                >\r\n                    <clr-icon shape=\"list\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <button\r\n                    *vdrIfPermissions=\"['UpdateOrder', 'ReadCustomer']\"\r\n                    class=\"button-small\"\r\n                    (click)=\"setOrderCustomer()\"\r\n                    [title]=\"'order.assign-order-to-another-customer' | translate\"\r\n                >\r\n                    <clr-icon shape=\"switch\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n            <vdr-labeled-data\r\n                class=\"mt-2\"\r\n                [label]=\"'order.shipping-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.shippingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.shippingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data\r\n                [label]=\"'order.billing-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.billingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.billingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.payments' | translate\" *ngIf=\"order.payments?.length\">\r\n            <vdr-order-payment-card\r\n                *ngFor=\"let payment of order.payments\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                [payment]=\"payment\"\r\n                (settlePayment)=\"settlePayment($event)\"\r\n                (transitionPaymentState)=\"transitionPaymentState($event)\"\r\n                (settleRefund)=\"settleRefund($event)\"\r\n            ></vdr-order-payment-card>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"order.fulfillments?.length\">\r\n            <vdr-fulfillment-card\r\n                *ngFor=\"let fulfillment of order.fulfillments\"\r\n                [fulfillment]=\"fulfillment\"\r\n                [order]=\"order\"\r\n                (transitionState)=\"transitionFulfillment(fulfillment.id, $event)\"\r\n            ></vdr-fulfillment-card>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n\r\n    <vdr-page-block>\r\n        <vdr-seller-orders-card\r\n            class=\"mb-2\"\r\n            *ngIf=\"order.sellerOrders.length\"\r\n            [orderId]=\"order.id\"\r\n        ></vdr-seller-orders-card>\r\n        <vdr-card [paddingX]=\"false\">\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\" [paddingX]=\"false\">\r\n            <table class=\"table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>{{ 'common.description' | translate }}</th>\r\n                        <th>{{ 'order.tax-rate' | translate }}</th>\r\n                        <th>{{ 'order.tax-base' | translate }}</th>\r\n                        <th>{{ 'order.tax-total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let row of order.taxSummary\">\r\n                        <td>{{ row.description }}</td>\r\n                        <td>{{ row.taxRate / 100 | percent : '0.0-3' }}</td>\r\n                        <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                        <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Order\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                [readonly]=\"!('UpdateOrder' | hasPermission)\"\r\n            />\r\n            <button\r\n                class=\"button primary\"\r\n                (click)=\"updateCustomFields()\"\r\n                [disabled]=\"\r\n                    detailForm.get('customFields')?.pristine || detailForm.get('customFields')?.invalid\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"order-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n\r\n        <vdr-card [title]=\"'order.order-history' | translate\">\r\n            <vdr-order-history\r\n                [order]=\"order\"\r\n                [history]=\"history$ | async\"\r\n                (addNote)=\"addNote($event)\"\r\n                (updateNote)=\"updateNote($event)\"\r\n                (deleteNote)=\"deleteNote($event)\"\r\n            ></vdr-order-history>\r\n        </vdr-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".shipping-address{list-style-type:none;line-height:1.3em}.order-cards h6{margin-top:6px;color:var(--color-text-200)}vdr-order-payment-card+vdr-order-payment-card{margin-top:calc(var(--space-unit) * 2)}\n"] }]
+            args: [{ selector: 'vdr-order-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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' || order.state === 'ArrangingAdditionalPayment') &&\n                    (hasUnsettledModifications(order) || 0 < outstandingPaymentAmount(order))\n                \"\n                (click)=\"addManualPayment(order)\"\n            >\n                {{ 'order.add-payment-to-order' | translate }}\n                ({{ outstandingPaymentAmount(order) | localeCurrency : order.currencyCode }})\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 [alwaysShow]=\"true\" locationId=\"order-detail\">\n                <ng-container *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Modifying')\">\n                    <button type=\"button\" vdrDropdownItem (click)=\"transitionToModifying()\">\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=\"order.type !== 'Aggregate' && order.nextStates.includes('Cancelled')\"\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 : { state: (nextState | stateI18nToken | translate) }\n                        }}\n                    </button>\n                </ng-container>\n                <div class=\"dropdown-divider\"></div>\n                <button type=\"button\" vdrDropdownItem (click)=\"manuallyTransitionToState(order)\">\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 [address]=\"order.shippingAddress\" class=\"mt-1\"></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 [address]=\"order.billingAddress\" class=\"mt-1\"></vdr-formatted-address>\n            </vdr-labeled-data>\n        </vdr-card>\n        <vdr-card [title]=\"'order.payments' | translate\" *ngIf=\"order.payments?.length\">\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 *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\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-3' }}</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 [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\n            <vdr-tabbed-custom-fields\n                entityName=\"Order\"\n                [customFields]=\"customFields\"\n                [customFieldsFormGroup]=\"detailForm.get('customFields')\"\n                [readonly]=\"!('UpdateOrder' | hasPermission)\"\n            />\n            <button\n                class=\"button primary\"\n                (click)=\"updateCustomFields()\"\n                [disabled]=\"\n                    detailForm.get('customFields')?.pristine || 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 {
@@ -2646,11 +2646,11 @@ class OrderModificationSummaryComponent {
         return [...addedCodes, ...removedCodes];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OrderModificationSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderModificationSummaryComponent, isStandalone: false, selector: "vdr-order-modification-summary", inputs: { orderSnapshot: "orderSnapshot", modifyOrderInput: "modifyOrderInput", addedLines: "addedLines", shippingAddressForm: "shippingAddressForm", billingAddressForm: "billingAddressForm", updatedShippingMethods: "updatedShippingMethods", couponCodesControl: "couponCodesControl" }, ngImport: i0, template: "<vdr-labeled-data\r\n        *ngIf=\"modifyOrderInput.adjustOrderLines?.length\"\r\n        [label]=\"\r\n                    'order.modification-adjusting-lines'\r\n                        | translate : { count: modifyOrderInput.adjustOrderLines?.length }\r\n                \"\r\n>\r\n    <div *ngFor=\"let line of adjustedLines\" class=\"mb-1\">\r\n        {{ line }}\r\n    </div>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data\r\n        *ngIf=\"modifyOrderInput.addItems?.length\"\r\n        [label]=\"\r\n                    'order.modification-adding-items'\r\n                        | translate : { count: modifyOrderInput.addItems?.length }\r\n                \"\r\n>\r\n    <div *ngFor=\"let item of addedLines\">\r\n        {{ item.productVariant.name }} x {{ item.quantity }}\r\n    </div>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data\r\n        *ngIf=\"modifyOrderInput.surcharges?.length\"\r\n        [label]=\"\r\n                    'order.modification-adding-surcharges'\r\n                        | translate : { count: modifyOrderInput.surcharges?.length }\r\n                \"\r\n>\r\n    <div *ngFor=\"let surcharge of modifyOrderInput.surcharges\" class=\"mb-1\">\r\n        {{ surcharge.description }}: {{ surcharge.price | localeCurrency : orderSnapshot.currencyCode }}\r\n    </div>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data\r\n        *ngIf=\"getModifiedFields(shippingAddressForm) as updatedShippingFields\"\r\n        [label]=\"'order.modification-updating-shipping-address' | translate\"\r\n>\r\n    {{ updatedShippingFields }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data\r\n        *ngIf=\"getModifiedFields(billingAddressForm) as updatedBillingFields\"\r\n        [label]=\"'order.modification-updating-billing-address' | translate\"\r\n>\r\n    {{ updatedBillingFields }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"couponCodeChanges.length\" [label]=\"'order.set-coupon-codes' | translate\">\r\n    <div *ngFor=\"let change of couponCodeChanges\" class=\"mb-1\">{{ change }}</div>\r\n</vdr-labeled-data>\r\n<ng-container *ngIf=\"getUpdatedShippingMethodLines() as updatedShippingMethods\">\r\n    <vdr-labeled-data *ngIf=\"updatedShippingMethods.length\" [label]=\"'order.shipping-method' | translate\">\r\n        <div *ngFor=\"let change of updatedShippingMethods\" class=\"mb-1\">{{ change }}</div>\r\n    </vdr-labeled-data>\r\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderModificationSummaryComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: OrderModificationSummaryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-modification-summary', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-labeled-data\r\n        *ngIf=\"modifyOrderInput.adjustOrderLines?.length\"\r\n        [label]=\"\r\n                    'order.modification-adjusting-lines'\r\n                        | translate : { count: modifyOrderInput.adjustOrderLines?.length }\r\n                \"\r\n>\r\n    <div *ngFor=\"let line of adjustedLines\" class=\"mb-1\">\r\n        {{ line }}\r\n    </div>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data\r\n        *ngIf=\"modifyOrderInput.addItems?.length\"\r\n        [label]=\"\r\n                    'order.modification-adding-items'\r\n                        | translate : { count: modifyOrderInput.addItems?.length }\r\n                \"\r\n>\r\n    <div *ngFor=\"let item of addedLines\">\r\n        {{ item.productVariant.name }} x {{ item.quantity }}\r\n    </div>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data\r\n        *ngIf=\"modifyOrderInput.surcharges?.length\"\r\n        [label]=\"\r\n                    'order.modification-adding-surcharges'\r\n                        | translate : { count: modifyOrderInput.surcharges?.length }\r\n                \"\r\n>\r\n    <div *ngFor=\"let surcharge of modifyOrderInput.surcharges\" class=\"mb-1\">\r\n        {{ surcharge.description }}: {{ surcharge.price | localeCurrency : orderSnapshot.currencyCode }}\r\n    </div>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data\r\n        *ngIf=\"getModifiedFields(shippingAddressForm) as updatedShippingFields\"\r\n        [label]=\"'order.modification-updating-shipping-address' | translate\"\r\n>\r\n    {{ updatedShippingFields }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data\r\n        *ngIf=\"getModifiedFields(billingAddressForm) as updatedBillingFields\"\r\n        [label]=\"'order.modification-updating-billing-address' | translate\"\r\n>\r\n    {{ updatedBillingFields }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"couponCodeChanges.length\" [label]=\"'order.set-coupon-codes' | translate\">\r\n    <div *ngFor=\"let change of couponCodeChanges\" class=\"mb-1\">{{ change }}</div>\r\n</vdr-labeled-data>\r\n<ng-container *ngIf=\"getUpdatedShippingMethodLines() as updatedShippingMethods\">\r\n    <vdr-labeled-data *ngIf=\"updatedShippingMethods.length\" [label]=\"'order.shipping-method' | translate\">\r\n        <div *ngFor=\"let change of updatedShippingMethods\" class=\"mb-1\">{{ change }}</div>\r\n    </vdr-labeled-data>\r\n</ng-container>" }]
+            args: [{ selector: 'vdr-order-modification-summary', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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: [{
@@ -2741,11 +2741,11 @@ class OrderEditsPreviewDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OrderEditsPreviewDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderEditsPreviewDialogComponent, isStandalone: false, selector: "vdr-order-edits-preview-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.confirm-modifications' | translate }}</ng-template>\r\n<vdr-order-table\r\n    [order]=\"order\"\r\n    [orderLineCustomFields]=\"orderLineCustomFields\"\r\n    class=\"order-edits-preview-table\"\r\n></vdr-order-table>\r\n<div class=\"payments-wrapper mb-2\">\r\n    <div class=\"flex-spacer\">\r\n        <vdr-payment-for-refund-selector\r\n            *ngIf=\"priceDifference < 0\"\r\n            class=\"\"\r\n            [refundablePayments]=\"refundablePayments\"\r\n            (paymentSelected)=\"onPaymentSelected($event.payment, $event.selected)\"\r\n            [order]=\"order\"\r\n        ></vdr-payment-for-refund-selector>\r\n    </div>\r\n    <div class=\"flex-spacer\">\r\n        <vdr-card [title]=\"'order.modify-order' | translate\">\r\n            <vdr-order-modification-summary\r\n                [orderSnapshot]=\"orderSnapshot\"\r\n                [modifyOrderInput]=\"modifyOrderInput\"\r\n                [addedLines]=\"addedLines\"\r\n                [shippingAddressForm]=\"shippingAddressForm\"\r\n                [billingAddressForm]=\"billingAddressForm\"\r\n                [couponCodesControl]=\"couponCodesControl\"\r\n                [updatedShippingMethods]=\"updatedShippingMethods\"\r\n            ></vdr-order-modification-summary>\r\n            <vdr-labeled-data [label]=\"'order.note' | translate\">\r\n                {{ modifyOrderInput.note || '-' }}\r\n            </vdr-labeled-data>\r\n            <vdr-form-field\r\n                [label]=\"'order.refund-cancellation-reason' | translate\"\r\n                *ngIf=\"priceDifference < 0\"\r\n            >\r\n                <textarea [(ngModel)]=\"refundNote\" name=\"refundNote\" required></textarea>\r\n            </vdr-form-field>\r\n        </vdr-card>\r\n    </div>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <div>\r\n        <div class=\"errors\">\r\n            <clr-alert\r\n                class=\"mb-1\"\r\n                *ngIf=\"priceDifference < 0 && !refundsCoverDifference()\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{ 'order.refund-total-warning' | translate }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n        </div>\r\n        <div class=\"modal-buttons\">\r\n            <clr-alert class=\"\" [clrAlertType]=\"'primary'\" [clrAlertClosable]=\"false\">\r\n                <clr-alert-item>\r\n                    {{ 'order.modify-order-price-difference' | translate }}\r\n                    {{ 0 < priceDifference ? '+' : ''\r\n                    }}{{ priceDifference | localeCurrency : order.currencyCode }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n            <button type=\"button\" class=\"btn\" (click)=\"cancel()\">\r\n                {{ 'common.cancel' | translate }}\r\n            </button>\r\n            <button\r\n                type=\"submit\"\r\n                (click)=\"submit()\"\r\n                [disabled]=\"priceDifference < 0 ? !refundsCoverDifference() : false\"\r\n                class=\"btn btn-primary\"\r\n            >\r\n                {{ 'common.confirm' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: ["::ng-deep .order-edits-preview-table .table-wrapper{max-width:initial!important}.payments-wrapper{display:flex;gap:calc(var(--space-unit) * 2)}.modal-buttons{display:flex;justify-content:flex-end;gap:.6rem;gap:var(--clr-modal-footer-gap, .6rem)}\n"], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderEditsPreviewDialogComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: OrderEditsPreviewDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-edits-preview-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template vdrDialogTitle>{{ 'order.confirm-modifications' | translate }}</ng-template>\r\n<vdr-order-table\r\n    [order]=\"order\"\r\n    [orderLineCustomFields]=\"orderLineCustomFields\"\r\n    class=\"order-edits-preview-table\"\r\n></vdr-order-table>\r\n<div class=\"payments-wrapper mb-2\">\r\n    <div class=\"flex-spacer\">\r\n        <vdr-payment-for-refund-selector\r\n            *ngIf=\"priceDifference < 0\"\r\n            class=\"\"\r\n            [refundablePayments]=\"refundablePayments\"\r\n            (paymentSelected)=\"onPaymentSelected($event.payment, $event.selected)\"\r\n            [order]=\"order\"\r\n        ></vdr-payment-for-refund-selector>\r\n    </div>\r\n    <div class=\"flex-spacer\">\r\n        <vdr-card [title]=\"'order.modify-order' | translate\">\r\n            <vdr-order-modification-summary\r\n                [orderSnapshot]=\"orderSnapshot\"\r\n                [modifyOrderInput]=\"modifyOrderInput\"\r\n                [addedLines]=\"addedLines\"\r\n                [shippingAddressForm]=\"shippingAddressForm\"\r\n                [billingAddressForm]=\"billingAddressForm\"\r\n                [couponCodesControl]=\"couponCodesControl\"\r\n                [updatedShippingMethods]=\"updatedShippingMethods\"\r\n            ></vdr-order-modification-summary>\r\n            <vdr-labeled-data [label]=\"'order.note' | translate\">\r\n                {{ modifyOrderInput.note || '-' }}\r\n            </vdr-labeled-data>\r\n            <vdr-form-field\r\n                [label]=\"'order.refund-cancellation-reason' | translate\"\r\n                *ngIf=\"priceDifference < 0\"\r\n            >\r\n                <textarea [(ngModel)]=\"refundNote\" name=\"refundNote\" required></textarea>\r\n            </vdr-form-field>\r\n        </vdr-card>\r\n    </div>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <div>\r\n        <div class=\"errors\">\r\n            <clr-alert\r\n                class=\"mb-1\"\r\n                *ngIf=\"priceDifference < 0 && !refundsCoverDifference()\"\r\n                [clrAlertType]=\"'danger'\"\r\n                [clrAlertClosable]=\"false\"\r\n            >\r\n                <clr-alert-item>\r\n                    {{ 'order.refund-total-warning' | translate }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n        </div>\r\n        <div class=\"modal-buttons\">\r\n            <clr-alert class=\"\" [clrAlertType]=\"'primary'\" [clrAlertClosable]=\"false\">\r\n                <clr-alert-item>\r\n                    {{ 'order.modify-order-price-difference' | translate }}\r\n                    {{ 0 < priceDifference ? '+' : ''\r\n                    }}{{ priceDifference | localeCurrency : order.currencyCode }}\r\n                </clr-alert-item>\r\n            </clr-alert>\r\n            <button type=\"button\" class=\"btn\" (click)=\"cancel()\">\r\n                {{ 'common.cancel' | translate }}\r\n            </button>\r\n            <button\r\n                type=\"submit\"\r\n                (click)=\"submit()\"\r\n                [disabled]=\"priceDifference < 0 ? !refundsCoverDifference() : false\"\r\n                class=\"btn btn-primary\"\r\n            >\r\n                {{ 'common.confirm' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: ["::ng-deep .order-edits-preview-table .table-wrapper{max-width:initial!important}.payments-wrapper{display:flex;gap:calc(var(--space-unit) * 2)}.modal-buttons{display:flex;justify-content:flex-end;gap:.6rem;gap:var(--clr-modal-footer-gap, .6rem)}\n"] }]
+            args: [{ selector: 'vdr-order-edits-preview-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 {
@@ -3206,11 +3206,11 @@ class OrderEditorComponent extends TypedBaseDetailComponent {
         /* not used */
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OrderEditorComponent, deps: [{ token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: OrderTransitionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderEditorComponent, isStandalone: false, selector: "vdr-order-editor", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-align-items-center\"></div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\r\n                {{ 'order.cancel-modification' | translate }}\r\n            </button>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card [title]=\"'order.modification-summary' | translate\">\r\n            <vdr-order-modification-summary\r\n                [orderSnapshot]=\"orderSnapshot\"\r\n                [modifyOrderInput]=\"modifyOrderInput\"\r\n                [addedLines]=\"addedLines\"\r\n                [shippingAddressForm]=\"shippingAddressForm\"\r\n                [billingAddressForm]=\"billingAddressForm\"\r\n                [couponCodesControl]=\"couponCodesControl\"\r\n                [updatedShippingMethods]=\"updatedShippingMethods\"\r\n            ></vdr-order-modification-summary>\r\n\r\n            <div *ngIf=\"!hasModifications()\" class=\"no-modifications\">\r\n                {{ 'order.no-modifications-made' | translate }}\r\n            </div>\r\n\r\n            <div class=\"summary-controls\">\r\n                <vdr-form-field [label]=\"'order.note' | translate\">\r\n                    <textarea\r\n                        [(ngModel)]=\"note\"\r\n                        name=\"note\"\r\n                        required\r\n                        [disabled]=\"!hasModifications()\"\r\n                    ></textarea>\r\n                </vdr-form-field>\r\n                <label class=\"flex items-center\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        [(ngModel)]=\"recalculateShipping\"\r\n                        [disabled]=\"!hasModifications()\"\r\n                    />\r\n                    <div class=\"ml-1\">{{ 'order.modification-recalculate-shipping' | translate }}</div>\r\n                </label>\r\n                <button\r\n                    class=\"btn btn-primary mt-2\"\r\n                    [disabled]=\"!hasModifications()\"\r\n                    (click)=\"previewAndModify(order)\"\r\n                >\r\n                    {{ 'order.preview-changes' | translate }}\r\n                </button>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.set-coupon-codes' | translate\">\r\n            <vdr-coupon-code-selector [control]=\"couponCodesControl\"></vdr-coupon-code-selector>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.shipping-address' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <button\r\n                    class=\"button-small\"\r\n                    [title]=\"'order.edit-shipping-address' | translate\"\r\n                    (click)=\"editingShippingAddress = !editingShippingAddress\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                *ngIf=\"!editingShippingAddress\"\r\n                [address]=\"shippingAddressForm.value\"\r\n            ></vdr-formatted-address>\r\n            <vdr-address-form\r\n                *ngIf=\"editingShippingAddress\"\r\n                [formGroup]=\"shippingAddressForm\"\r\n                [availableCountries]=\"availableCountries$ | async\"\r\n                [customFields]=\"addressCustomFields\"\r\n            ></vdr-address-form>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.billing-address' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <button\r\n                    class=\"button-small\"\r\n                    [title]=\"'order.edit-billing-address' | translate\"\r\n                    (click)=\"editingBillingAddress = !editingBillingAddress\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                *ngIf=\"!editingBillingAddress\"\r\n                [address]=\"billingAddressForm.value\"\r\n            ></vdr-formatted-address>\r\n            <vdr-address-form\r\n                *ngIf=\"editingBillingAddress\"\r\n                [formGroup]=\"billingAddressForm\"\r\n                [availableCountries]=\"availableCountries$ | async\"\r\n                [customFields]=\"addressCustomFields\"\r\n            ></vdr-address-form>\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n\r\n    <vdr-page-block>\r\n        <vdr-card [paddingX]=\"false\">\r\n            <vdr-data-table-2 id=\"modify-order\" class=\"order-table\" [items]=\"order.lines.concat(addedLines)\">\r\n                <!-- Here we define all the available columns -->\r\n                <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.id }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column\r\n                    id=\"created-at\"\r\n                    [heading]=\"'common.created-at' | translate\"\r\n                    [hiddenByDefault]=\"true\"\r\n                >\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.createdAt | localeDate : 'short' }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column\r\n                    id=\"updated-at\"\r\n                    [heading]=\"'common.updated-at' | translate\"\r\n                    [hiddenByDefault]=\"true\"\r\n                >\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.updatedAt | localeDate : 'short' }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n                    <ng-template let-line=\"item\">\r\n                        <div class=\"image-placeholder\">\r\n                            <img\r\n                                *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\r\n                                [src]=\"asset | assetPreview : 'tiny'\"\r\n                            />\r\n                            <ng-template #imagePlaceholder>\r\n                                <div class=\"placeholder\">\r\n                                    <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                                </div>\r\n                            </ng-template>\r\n                        </div>\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column\r\n                    id=\"product-name\"\r\n                    [heading]=\"'order.product-name' | translate\"\r\n                    [optional]=\"false\"\r\n                >\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.productVariant.name }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column id=\"product-sku\" [heading]=\"'order.product-sku' | translate\">\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.productVariant.sku }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column id=\"unit-price\" [heading]=\"'order.unit-price' | translate\">\r\n                    <ng-template let-line=\"item\">\r\n                        <div class=\"text-center\">\r\n                            <div>{{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}</div>\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ line.unitPrice | localeCurrency : order.currencyCode }}\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\" [optional]=\"false\">\r\n                    <ng-template let-line=\"item\">\r\n                        <input\r\n                            type=\"number\"\r\n                            class=\"draft-qty mr-1\"\r\n                            min=\"0\"\r\n                            [value]=\"getInitialLineQuantity(line.id)\"\r\n                            (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n                        />\r\n                        <button\r\n                            class=\"button-small\"\r\n                            *ngIf=\"isAddedLine(line)\"\r\n                            (click)=\"removeAddedItem(line.id)\"\r\n                        >\r\n                            <clr-icon shape=\"trash\"></clr-icon>\r\n                        </button>\r\n                        <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                        <vdr-line-fulfillment\r\n                            [line]=\"line\"\r\n                            [allOrderFulfillments]=\"order.fulfillments\"\r\n                            [orderState]=\"order.state\"\r\n                        ></vdr-line-fulfillment>\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column\r\n                    *ngFor=\"let customField of orderLineCustomFields\"\r\n                    [id]=\"customField.name\"\r\n                    [heading]=\"customField | customFieldLabel : (uiLanguage$ | async)\"\r\n                    [hiddenByDefault]=\"true\"\r\n                >\r\n                    <ng-template let-line=\"item\" let-index=\"index\">\r\n                        <vdr-custom-field-control\r\n                            [compact]=\"true\"\r\n                            [entityName]=\"'OrderLine'\"\r\n                            [customField]=\"customField\"\r\n                            [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.at(index)\"\r\n                        />\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n            </vdr-data-table-2>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.add-item-to-order' | translate\">\r\n            <vdr-product-variant-selector class=\"mb-4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n            </vdr-product-variant-selector>\r\n            <div class=\"flex\">\r\n                <div>\r\n                    <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb-4\">\r\n                        <img\r\n                            *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n                            [src]=\"asset | assetPreview : 'tiny'\"\r\n                            class=\"mr-4 add-item-thumb\"\r\n                        />\r\n                        <div>\r\n                            <strong class=\"mr-4\">{{ addItemSelectedVariant.productVariantName }}</strong>\r\n                            <small>{{ addItemSelectedVariant.sku }}</small>\r\n                            <div>\r\n                                {{\r\n                                    getSelectedItemPrice(addItemSelectedVariant)\r\n                                        | localeCurrency : order.currencyCode\r\n                                }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"addItemSelectedVariant\">\r\n                        <vdr-tabbed-custom-fields\r\n                            entityName=\"Order\"\r\n                            [customFields]=\"orderLineCustomFields\"\r\n                            [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n                        ></vdr-tabbed-custom-fields>\r\n                    </div>\r\n                </div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button\r\n                        *ngIf=\"addItemSelectedVariant\"\r\n                        class=\"btn btn-secondary\"\r\n                        [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\r\n                        (click)=\"addItemToOrder(addItemSelectedVariant)\"\r\n                    >\r\n                        {{ 'order.add-item-to-order' | translate }}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.shipping' | translate\">\r\n            <div *ngFor=\"let shippingLine of order.shippingLines\" class=\"flex items-center\">\r\n                <ng-container *ngIf=\"getShippingLineDetails(shippingLine) as details\">\r\n                    <div>{{ details.name }}:</div>\r\n                    <div class=\"mx-1\">\r\n                        {{ details.price | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                    <button class=\"button-small\" (click)=\"setShippingMethod(shippingLine.id)\">\r\n                        {{ 'order.set-shipping-method' | translate }}\r\n                    </button>\r\n                </ng-container>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.add-surcharge' | translate\">\r\n            <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\r\n                        ><input id=\"description\" type=\"text\" formControlName=\"description\"\r\n                    /></vdr-form-field>\r\n                    <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\r\n                        ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\r\n                    /></vdr-form-field>\r\n                    <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\r\n                        <vdr-currency-input\r\n                            [currencyCode]=\"order.currencyCode\"\r\n                            id=\"price\"\r\n                            formControlName=\"price\"\r\n                        ></vdr-currency-input>\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"\r\n                            'catalog.price-includes-tax-at'\r\n                                | translate : { rate: surchargeForm.get('taxRate')?.value ?? 0 }\r\n                        \"\r\n                        for=\"priceIncludesTax\"\r\n                        ><input\r\n                            id=\"priceIncludesTax\"\r\n                            type=\"checkbox\"\r\n                            clrCheckbox\r\n                            formControlName=\"priceIncludesTax\"\r\n                    /></vdr-form-field>\r\n                    <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\r\n                        <vdr-affixed-input suffix=\"%\"\r\n                            ><input id=\"taxRate\" type=\"number\" min=\"0\" max=\"100\" formControlName=\"taxRate\"\r\n                        /></vdr-affixed-input>\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'order.tax-description' | translate\" for=\"taxDescription\"\r\n                        ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\r\n                    /></vdr-form-field>\r\n                </div>\r\n                <button\r\n                    class=\"btn btn-secondary mt-2\"\r\n                    [disabled]=\"\r\n                        surchargeForm.invalid ||\r\n                        surchargeForm.pristine ||\r\n                        surchargeForm.get('price')?.value === 0 ||\r\n                        !surchargeForm.get('description')?.value\r\n                    \"\r\n                >\r\n                    {{ 'order.add-surcharge' | translate }}\r\n                </button>\r\n            </form>\r\n        </vdr-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table img{border-radius:var(--border-radius-img)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}.order-table .draft-qty{max-width:48px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}.order-table .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .thumb img{width:50px;height:50px}.order-table .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.order-table .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}.add-item-thumb{max-width:50px}.no-modifications{color:var(--color-grey-400)}.summary-controls{border-top:1px solid var(--color-weight-200);margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 1)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["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.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "component", type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: ["couponCodes", "control"], outputs: ["addCouponCode", "removeCouponCode"] }, { kind: "component", type: OrderModificationSummaryComponent, selector: "vdr-order-modification-summary", inputs: ["orderSnapshot", "modifyOrderInput", "addedLines", "shippingAddressForm", "billingAddressForm", "updatedShippingMethods", "couponCodesControl"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.CustomFieldLabelPipe, name: "customFieldLabel" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderEditorComponent, isStandalone: false, 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 *ngIf=\"addItemSelectedVariant\">\n                        <vdr-tabbed-custom-fields\n                            entityName=\"Order\"\n                            [customFields]=\"orderLineCustomFields\"\n                            [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\n                        ></vdr-tabbed-custom-fields>\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.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "component", type: 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: "19.2.4", ngImport: i0, type: OrderEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-align-items-center\"></div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\r\n                {{ 'order.cancel-modification' | translate }}\r\n            </button>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card [title]=\"'order.modification-summary' | translate\">\r\n            <vdr-order-modification-summary\r\n                [orderSnapshot]=\"orderSnapshot\"\r\n                [modifyOrderInput]=\"modifyOrderInput\"\r\n                [addedLines]=\"addedLines\"\r\n                [shippingAddressForm]=\"shippingAddressForm\"\r\n                [billingAddressForm]=\"billingAddressForm\"\r\n                [couponCodesControl]=\"couponCodesControl\"\r\n                [updatedShippingMethods]=\"updatedShippingMethods\"\r\n            ></vdr-order-modification-summary>\r\n\r\n            <div *ngIf=\"!hasModifications()\" class=\"no-modifications\">\r\n                {{ 'order.no-modifications-made' | translate }}\r\n            </div>\r\n\r\n            <div class=\"summary-controls\">\r\n                <vdr-form-field [label]=\"'order.note' | translate\">\r\n                    <textarea\r\n                        [(ngModel)]=\"note\"\r\n                        name=\"note\"\r\n                        required\r\n                        [disabled]=\"!hasModifications()\"\r\n                    ></textarea>\r\n                </vdr-form-field>\r\n                <label class=\"flex items-center\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        [(ngModel)]=\"recalculateShipping\"\r\n                        [disabled]=\"!hasModifications()\"\r\n                    />\r\n                    <div class=\"ml-1\">{{ 'order.modification-recalculate-shipping' | translate }}</div>\r\n                </label>\r\n                <button\r\n                    class=\"btn btn-primary mt-2\"\r\n                    [disabled]=\"!hasModifications()\"\r\n                    (click)=\"previewAndModify(order)\"\r\n                >\r\n                    {{ 'order.preview-changes' | translate }}\r\n                </button>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.set-coupon-codes' | translate\">\r\n            <vdr-coupon-code-selector [control]=\"couponCodesControl\"></vdr-coupon-code-selector>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.shipping-address' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <button\r\n                    class=\"button-small\"\r\n                    [title]=\"'order.edit-shipping-address' | translate\"\r\n                    (click)=\"editingShippingAddress = !editingShippingAddress\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                *ngIf=\"!editingShippingAddress\"\r\n                [address]=\"shippingAddressForm.value\"\r\n            ></vdr-formatted-address>\r\n            <vdr-address-form\r\n                *ngIf=\"editingShippingAddress\"\r\n                [formGroup]=\"shippingAddressForm\"\r\n                [availableCountries]=\"availableCountries$ | async\"\r\n                [customFields]=\"addressCustomFields\"\r\n            ></vdr-address-form>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.billing-address' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <button\r\n                    class=\"button-small\"\r\n                    [title]=\"'order.edit-billing-address' | translate\"\r\n                    (click)=\"editingBillingAddress = !editingBillingAddress\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                *ngIf=\"!editingBillingAddress\"\r\n                [address]=\"billingAddressForm.value\"\r\n            ></vdr-formatted-address>\r\n            <vdr-address-form\r\n                *ngIf=\"editingBillingAddress\"\r\n                [formGroup]=\"billingAddressForm\"\r\n                [availableCountries]=\"availableCountries$ | async\"\r\n                [customFields]=\"addressCustomFields\"\r\n            ></vdr-address-form>\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n\r\n    <vdr-page-block>\r\n        <vdr-card [paddingX]=\"false\">\r\n            <vdr-data-table-2 id=\"modify-order\" class=\"order-table\" [items]=\"order.lines.concat(addedLines)\">\r\n                <!-- Here we define all the available columns -->\r\n                <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.id }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column\r\n                    id=\"created-at\"\r\n                    [heading]=\"'common.created-at' | translate\"\r\n                    [hiddenByDefault]=\"true\"\r\n                >\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.createdAt | localeDate : 'short' }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column\r\n                    id=\"updated-at\"\r\n                    [heading]=\"'common.updated-at' | translate\"\r\n                    [hiddenByDefault]=\"true\"\r\n                >\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.updatedAt | localeDate : 'short' }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n                    <ng-template let-line=\"item\">\r\n                        <div class=\"image-placeholder\">\r\n                            <img\r\n                                *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\r\n                                [src]=\"asset | assetPreview : 'tiny'\"\r\n                            />\r\n                            <ng-template #imagePlaceholder>\r\n                                <div class=\"placeholder\">\r\n                                    <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                                </div>\r\n                            </ng-template>\r\n                        </div>\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column\r\n                    id=\"product-name\"\r\n                    [heading]=\"'order.product-name' | translate\"\r\n                    [optional]=\"false\"\r\n                >\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.productVariant.name }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column id=\"product-sku\" [heading]=\"'order.product-sku' | translate\">\r\n                    <ng-template let-line=\"item\">\r\n                        {{ line.productVariant.sku }}\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column id=\"unit-price\" [heading]=\"'order.unit-price' | translate\">\r\n                    <ng-template let-line=\"item\">\r\n                        <div class=\"text-center\">\r\n                            <div>{{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}</div>\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ line.unitPrice | localeCurrency : order.currencyCode }}\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\" [optional]=\"false\">\r\n                    <ng-template let-line=\"item\">\r\n                        <input\r\n                            type=\"number\"\r\n                            class=\"draft-qty mr-1\"\r\n                            min=\"0\"\r\n                            [value]=\"getInitialLineQuantity(line.id)\"\r\n                            (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n                        />\r\n                        <button\r\n                            class=\"button-small\"\r\n                            *ngIf=\"isAddedLine(line)\"\r\n                            (click)=\"removeAddedItem(line.id)\"\r\n                        >\r\n                            <clr-icon shape=\"trash\"></clr-icon>\r\n                        </button>\r\n                        <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                        <vdr-line-fulfillment\r\n                            [line]=\"line\"\r\n                            [allOrderFulfillments]=\"order.fulfillments\"\r\n                            [orderState]=\"order.state\"\r\n                        ></vdr-line-fulfillment>\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n                <vdr-dt2-column\r\n                    *ngFor=\"let customField of orderLineCustomFields\"\r\n                    [id]=\"customField.name\"\r\n                    [heading]=\"customField | customFieldLabel : (uiLanguage$ | async)\"\r\n                    [hiddenByDefault]=\"true\"\r\n                >\r\n                    <ng-template let-line=\"item\" let-index=\"index\">\r\n                        <vdr-custom-field-control\r\n                            [compact]=\"true\"\r\n                            [entityName]=\"'OrderLine'\"\r\n                            [customField]=\"customField\"\r\n                            [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.at(index)\"\r\n                        />\r\n                    </ng-template>\r\n                </vdr-dt2-column>\r\n            </vdr-data-table-2>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.add-item-to-order' | translate\">\r\n            <vdr-product-variant-selector class=\"mb-4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n            </vdr-product-variant-selector>\r\n            <div class=\"flex\">\r\n                <div>\r\n                    <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb-4\">\r\n                        <img\r\n                            *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n                            [src]=\"asset | assetPreview : 'tiny'\"\r\n                            class=\"mr-4 add-item-thumb\"\r\n                        />\r\n                        <div>\r\n                            <strong class=\"mr-4\">{{ addItemSelectedVariant.productVariantName }}</strong>\r\n                            <small>{{ addItemSelectedVariant.sku }}</small>\r\n                            <div>\r\n                                {{\r\n                                    getSelectedItemPrice(addItemSelectedVariant)\r\n                                        | localeCurrency : order.currencyCode\r\n                                }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"addItemSelectedVariant\">\r\n                        <vdr-tabbed-custom-fields\r\n                            entityName=\"Order\"\r\n                            [customFields]=\"orderLineCustomFields\"\r\n                            [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n                        ></vdr-tabbed-custom-fields>\r\n                    </div>\r\n                </div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button\r\n                        *ngIf=\"addItemSelectedVariant\"\r\n                        class=\"btn btn-secondary\"\r\n                        [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\r\n                        (click)=\"addItemToOrder(addItemSelectedVariant)\"\r\n                    >\r\n                        {{ 'order.add-item-to-order' | translate }}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.shipping' | translate\">\r\n            <div *ngFor=\"let shippingLine of order.shippingLines\" class=\"flex items-center\">\r\n                <ng-container *ngIf=\"getShippingLineDetails(shippingLine) as details\">\r\n                    <div>{{ details.name }}:</div>\r\n                    <div class=\"mx-1\">\r\n                        {{ details.price | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                    <button class=\"button-small\" (click)=\"setShippingMethod(shippingLine.id)\">\r\n                        {{ 'order.set-shipping-method' | translate }}\r\n                    </button>\r\n                </ng-container>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.add-surcharge' | translate\">\r\n            <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\r\n                        ><input id=\"description\" type=\"text\" formControlName=\"description\"\r\n                    /></vdr-form-field>\r\n                    <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\r\n                        ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\r\n                    /></vdr-form-field>\r\n                    <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\r\n                        <vdr-currency-input\r\n                            [currencyCode]=\"order.currencyCode\"\r\n                            id=\"price\"\r\n                            formControlName=\"price\"\r\n                        ></vdr-currency-input>\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        [label]=\"\r\n                            'catalog.price-includes-tax-at'\r\n                                | translate : { rate: surchargeForm.get('taxRate')?.value ?? 0 }\r\n                        \"\r\n                        for=\"priceIncludesTax\"\r\n                        ><input\r\n                            id=\"priceIncludesTax\"\r\n                            type=\"checkbox\"\r\n                            clrCheckbox\r\n                            formControlName=\"priceIncludesTax\"\r\n                    /></vdr-form-field>\r\n                    <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\r\n                        <vdr-affixed-input suffix=\"%\"\r\n                            ><input id=\"taxRate\" type=\"number\" min=\"0\" max=\"100\" formControlName=\"taxRate\"\r\n                        /></vdr-affixed-input>\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'order.tax-description' | translate\" for=\"taxDescription\"\r\n                        ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\r\n                    /></vdr-form-field>\r\n                </div>\r\n                <button\r\n                    class=\"btn btn-secondary mt-2\"\r\n                    [disabled]=\"\r\n                        surchargeForm.invalid ||\r\n                        surchargeForm.pristine ||\r\n                        surchargeForm.get('price')?.value === 0 ||\r\n                        !surchargeForm.get('description')?.value\r\n                    \"\r\n                >\r\n                    {{ 'order.add-surcharge' | translate }}\r\n                </button>\r\n            </form>\r\n        </vdr-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table img{border-radius:var(--border-radius-img)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}.order-table .draft-qty{max-width:48px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}.order-table .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .thumb img{width:50px;height:50px}.order-table .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.order-table .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}.add-item-thumb{max-width:50px}.no-modifications{color:var(--color-grey-400)}.summary-controls{border-top:1px solid var(--color-weight-200);margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 1)}\n"] }]
+            args: [{ selector: 'vdr-order-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 *ngIf=\"addItemSelectedVariant\">\n                        <vdr-tabbed-custom-fields\n                            entityName=\"Order\"\n                            [customFields]=\"orderLineCustomFields\"\n                            [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\n                        ></vdr-tabbed-custom-fields>\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 {
@@ -3351,45 +3351,45 @@ class OrderListComponent extends TypedBaseListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: OrderListComponent, deps: [{ token: i1.ServerConfigService }, { token: i1.ChannelService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderListComponent, isStandalone: false, selector: "vdr-order-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"order-list\" />\r\n            <ng-container *ngIf=\"canCreateDraftOrder\">\r\n                <a class=\"btn\" *vdrIfPermissions=\"['CreateOrder']\" [routerLink]=\"['./draft/create']\">\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ 'catalog.create-draft-order' | translate }}\r\n                </a>\r\n            </ng-container>\r\n            <vdr-action-bar-dropdown-menu locationId=\"order-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"order-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'order.search-by-order-filters' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-order=\"item\">\r\n            {{ order.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-order=\"item\">\r\n            {{ order.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\">\r\n        <ng-template let-order=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"order.state === 'Draft' ? ['./draft', order.id] : ['./', order.id]\"\r\n                ><span>{{ order.code }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.customer' | translate\" id=\"customer\" [sort]=\"sorts.get('customerLastName')\">\r\n        <ng-template let-order=\"item\">\r\n            <vdr-customer-label\r\n                [customer]=\"order.customer\"\r\n                (click)=\"$event.stopPropagation()\"\r\n            ></vdr-customer-label>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.order-type' | translate\" id=\"order-type\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-order=\"item\">\r\n            <vdr-chip *ngIf=\"order.type === OrderType.Regular\">{{ 'order.order-type-regular' | translate }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"order.type === OrderType.Aggregate\">{{ 'order.order-type-aggregate' | translate }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"order.type === OrderType.Seller\">{{ 'order.order-type-seller' | translate }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\" [sort]=\"sorts.get('state')\">\r\n        <ng-template let-order=\"item\">\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.total' | translate\" id=\"total\" [sort]=\"sorts.get('totalWithTax')\">\r\n        <ng-template let-order=\"item\">\r\n            {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\">\r\n        <ng-template let-order=\"item\">\r\n            {{ order.updatedAt | timeAgo }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.placed-at' | translate\" id=\"placed-at\" [sort]=\"sorts.get('orderPlacedAt')\">\r\n        <ng-template let-order=\"item\">\r\n            {{ order.orderPlacedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.shipping' | translate\" id=\"shipping\">\r\n        <ng-template let-order=\"item\">\r\n            {{ getShippingNames(order) }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".search-form{display:flex;flex-direction:column;align-items:baseline;width:100%;max-width:100vw;margin-bottom:6px}.filter-presets{max-width:90vw;overflow-x:auto}.search-input{margin-top:6px;min-width:300px}.custom-filters{overflow:hidden;max-height:0;padding-bottom:6px}.custom-filters.expanded{max-height:initial}.custom-filters>form{display:flex;flex-direction:column;align-items:center}.custom-filters>form>div{width:100%}ng-select{flex:1;min-width:200px;height:36px}ng-select ::ng-deep .ng-select-container{height:36px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: OrderListComponent, isStandalone: false, 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]=\"dataTableListId\"\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    (visibleColumnsChange)=\"setVisibleColumns($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", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: 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: "19.2.4", ngImport: i0, type: OrderListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"order-list\" />\r\n            <ng-container *ngIf=\"canCreateDraftOrder\">\r\n                <a class=\"btn\" *vdrIfPermissions=\"['CreateOrder']\" [routerLink]=\"['./draft/create']\">\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ 'catalog.create-draft-order' | translate }}\r\n                </a>\r\n            </ng-container>\r\n            <vdr-action-bar-dropdown-menu locationId=\"order-list\" />\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    [id]=\"dataTableListId\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"order-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'order.search-by-order-filters' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-order=\"item\">\r\n            {{ order.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-order=\"item\">\r\n            {{ order.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\">\r\n        <ng-template let-order=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"order.state === 'Draft' ? ['./draft', order.id] : ['./', order.id]\"\r\n                ><span>{{ order.code }}</span>\r\n                <clr-icon shape=\"arrow right\"></clr-icon>\r\n            </a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.customer' | translate\" id=\"customer\" [sort]=\"sorts.get('customerLastName')\">\r\n        <ng-template let-order=\"item\">\r\n            <vdr-customer-label\r\n                [customer]=\"order.customer\"\r\n                (click)=\"$event.stopPropagation()\"\r\n            ></vdr-customer-label>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.order-type' | translate\" id=\"order-type\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-order=\"item\">\r\n            <vdr-chip *ngIf=\"order.type === OrderType.Regular\">{{ 'order.order-type-regular' | translate }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"order.type === OrderType.Aggregate\">{{ 'order.order-type-aggregate' | translate }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"order.type === OrderType.Seller\">{{ 'order.order-type-seller' | translate }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.state' | translate\" id=\"state\" [sort]=\"sorts.get('state')\">\r\n        <ng-template let-order=\"item\">\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.total' | translate\" id=\"total\" [sort]=\"sorts.get('totalWithTax')\">\r\n        <ng-template let-order=\"item\">\r\n            {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\">\r\n        <ng-template let-order=\"item\">\r\n            {{ order.updatedAt | timeAgo }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.placed-at' | translate\" id=\"placed-at\" [sort]=\"sorts.get('orderPlacedAt')\">\r\n        <ng-template let-order=\"item\">\r\n            {{ order.orderPlacedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'order.shipping' | translate\" id=\"shipping\">\r\n        <ng-template let-order=\"item\">\r\n            {{ getShippingNames(order) }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".search-form{display:flex;flex-direction:column;align-items:baseline;width:100%;max-width:100vw;margin-bottom:6px}.filter-presets{max-width:90vw;overflow-x:auto}.search-input{margin-top:6px;min-width:300px}.custom-filters{overflow:hidden;max-height:0;padding-bottom:6px}.custom-filters.expanded{max-height:initial}.custom-filters>form{display:flex;flex-direction:column;align-items:center}.custom-filters>form>div{width:100%}ng-select{flex:1;min-width:200px;height:36px}ng-select ::ng-deep .ng-select-container{height:36px}\n"] }]
+            args: [{ selector: 'vdr-order-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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]=\"dataTableListId\"\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    (visibleColumnsChange)=\"setVisibleColumns($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: "19.2.4", ngImport: i0, type: RefundDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: RefundDetailComponent, isStandalone: false, selector: "vdr-refund-detail", inputs: { refund: "refund", currencyCode: "currencyCode" }, ngImport: i0, template: "<vdr-labeled-data [label]=\"'order.amount' | translate\">\r\n    {{ refund.total | localeCurrency: currencyCode }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"refund.transactionId\" [label]=\"'order.transaction-id' | translate\">\r\n    {{ refund.transactionId }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.payment-metadata' | translate\">\r\n    <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\r\n</vdr-labeled-data>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: RefundDetailComponent, isStandalone: false, 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: "19.2.4", ngImport: i0, type: RefundDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-refund-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-labeled-data [label]=\"'order.amount' | translate\">\r\n    {{ refund.total | localeCurrency: currencyCode }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"refund.transactionId\" [label]=\"'order.transaction-id' | translate\">\r\n    {{ refund.transactionId }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.payment-metadata' | translate\">\r\n    <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\r\n</vdr-labeled-data>\r\n" }]
+            args: [{ selector: 'vdr-refund-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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_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
-        }
-    }
+const GET_ORDER_STATE = gql `
+    query GetOrderState($id: ID!) {
+        order(id: $id) {
+            id
+            state
+        }
+    }
 `;
 class OrderGuard {
     constructor(dataService, router) {