npm - @vendure/admin-ui - Versions diffs - 2.0.6 → 2.1.0-next.0 - Mend

@vendure/admin-ui 2.0.6 → 2.1.0-next.0

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

Files changed (119) hide show

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

@@ -135,11 +135,11 @@ class CancelOrderDialogComponent {
             .filter(l => 0 < l.quantity);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CancelOrderDialogComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: CancelOrderDialogComponent, selector: "vdr-cancel-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-lines\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.is-disabled]=\"cancelAll\"\r\n                [class.is-cancelled]=\"line.quantity === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.quantity }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"line.quantity > 0 && !order.active; else nonEditable\"\r\n                        [(ngModel)]=\"lineQuantities[line.id]\"\r\n                        (input)=\"checkIfAllSelected()\"\r\n                        [disabled]=\"cancelAll\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                    />\r\n                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"cancellation-details\">\r\n        <ng-container *ngIf=\"order.active !== true\">\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"true\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-entire-order' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"false\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-specified-items' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n        </ng-container>\r\n        <label class=\"clr-control-label\">{{ 'order.cancellation-reason' | translate }}</label>\r\n        <ng-select\r\n            [items]=\"reasons\"\r\n            bindLabel=\"name\"\r\n            autofocus\r\n            bindValue=\"id\"\r\n            [addTag]=\"true\"\r\n            [(ngModel)]=\"reason\"\r\n        ></ng-select>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"!reason || (!order.active && selectionCount === 0)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        <ng-container *ngIf=\"!order.active\">\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-container>\r\n        <ng-container *ngIf=\"order.active\">\r\n            {{ 'order.cancel-order' | translate }}\r\n        </ng-container>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}@media screen and (min-width: 768px){.fulfillment-wrapper .cancellation-details{margin-top:0;margin-left:24px;width:250px}}.fulfillment-wrapper .order-lines{flex:1;overflow-y:auto}.fulfillment-wrapper .order-lines table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}.fulfillment-wrapper .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.fulfillment-wrapper .is-disabled td,.fulfillment-wrapper .is-disabled td input{background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.ClrRadio, selector: "[clrRadio]" }, { kind: "component", type: i1$1.ClrRadioWrapper, selector: "clr-radio-wrapper" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: CancelOrderDialogComponent, selector: "vdr-cancel-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-lines\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.is-disabled]=\"cancelAll\"\r\n                [class.is-cancelled]=\"line.quantity === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.quantity }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"line.quantity > 0 && !order.active; else nonEditable\"\r\n                        [(ngModel)]=\"lineQuantities[line.id]\"\r\n                        (input)=\"checkIfAllSelected()\"\r\n                        [disabled]=\"cancelAll\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                    />\r\n                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"cancellation-details\">\r\n        <ng-container *ngIf=\"order.active !== true\">\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"true\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-entire-order' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"false\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-specified-items' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n        </ng-container>\r\n        <label class=\"clr-control-label\">{{ 'order.cancellation-reason' | translate }}</label>\r\n        <ng-select\r\n            [items]=\"reasons\"\r\n            bindLabel=\"name\"\r\n            autofocus\r\n            bindValue=\"id\"\r\n            [addTag]=\"true\"\r\n            [(ngModel)]=\"reason\"\r\n        ></ng-select>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"!reason || (!order.active && selectionCount === 0)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        <ng-container *ngIf=\"!order.active\">\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-container>\r\n        <ng-container *ngIf=\"order.active\">\r\n            {{ 'order.cancel-order' | translate }}\r\n        </ng-container>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}@media screen and (min-width: 768px){.fulfillment-wrapper .cancellation-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .order-lines{flex:1;overflow-y:auto}.fulfillment-wrapper .order-lines table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}.fulfillment-wrapper .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.fulfillment-wrapper .is-disabled td,.fulfillment-wrapper .is-disabled td input{background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.ClrRadio, selector: "[clrRadio]" }, { kind: "component", type: i1$1.ClrRadioWrapper, selector: "clr-radio-wrapper" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CancelOrderDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-cancel-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-lines\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.is-disabled]=\"cancelAll\"\r\n                [class.is-cancelled]=\"line.quantity === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.quantity }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"line.quantity > 0 && !order.active; else nonEditable\"\r\n                        [(ngModel)]=\"lineQuantities[line.id]\"\r\n                        (input)=\"checkIfAllSelected()\"\r\n                        [disabled]=\"cancelAll\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                    />\r\n                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"cancellation-details\">\r\n        <ng-container *ngIf=\"order.active !== true\">\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"true\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-entire-order' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"false\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-specified-items' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n        </ng-container>\r\n        <label class=\"clr-control-label\">{{ 'order.cancellation-reason' | translate }}</label>\r\n        <ng-select\r\n            [items]=\"reasons\"\r\n            bindLabel=\"name\"\r\n            autofocus\r\n            bindValue=\"id\"\r\n            [addTag]=\"true\"\r\n            [(ngModel)]=\"reason\"\r\n        ></ng-select>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"!reason || (!order.active && selectionCount === 0)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        <ng-container *ngIf=\"!order.active\">\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-container>\r\n        <ng-container *ngIf=\"order.active\">\r\n            {{ 'order.cancel-order' | translate }}\r\n        </ng-container>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}@media screen and (min-width: 768px){.fulfillment-wrapper .cancellation-details{margin-top:0;margin-left:24px;width:250px}}.fulfillment-wrapper .order-lines{flex:1;overflow-y:auto}.fulfillment-wrapper .order-lines table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}.fulfillment-wrapper .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.fulfillment-wrapper .is-disabled td,.fulfillment-wrapper .is-disabled td input{background-color:var(--color-component-bg-200)}\n"] }]
+            args: [{ selector: 'vdr-cancel-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-lines\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.is-disabled]=\"cancelAll\"\r\n                [class.is-cancelled]=\"line.quantity === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.quantity }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"line.quantity > 0 && !order.active; else nonEditable\"\r\n                        [(ngModel)]=\"lineQuantities[line.id]\"\r\n                        (input)=\"checkIfAllSelected()\"\r\n                        [disabled]=\"cancelAll\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                    />\r\n                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"cancellation-details\">\r\n        <ng-container *ngIf=\"order.active !== true\">\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"true\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-entire-order' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"false\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-specified-items' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n        </ng-container>\r\n        <label class=\"clr-control-label\">{{ 'order.cancellation-reason' | translate }}</label>\r\n        <ng-select\r\n            [items]=\"reasons\"\r\n            bindLabel=\"name\"\r\n            autofocus\r\n            bindValue=\"id\"\r\n            [addTag]=\"true\"\r\n            [(ngModel)]=\"reason\"\r\n        ></ng-select>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"!reason || (!order.active && selectionCount === 0)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        <ng-container *ngIf=\"!order.active\">\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-container>\r\n        <ng-container *ngIf=\"order.active\">\r\n            {{ 'order.cancel-order' | translate }}\r\n        </ng-container>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}@media screen and (min-width: 768px){.fulfillment-wrapper .cancellation-details{margin-top:0;margin-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: function () { return [{ type: i1.I18nService }]; } });
 const GET_COUPON_CODE_SELECTOR_PROMOTION_LIST = gql `
@@ -656,11 +656,11 @@ class OrderDataTableComponent extends DataTable2Component {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OrderDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: { order: "order" }, queries: [{ propertyName: "totalColumns", predicate: OrderTotalColumnComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    <table\r\n        class=\"\"\r\n        [class.no-select]=\"disableSelect\"\r\n    >\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <span>{{ column.heading }}</span>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  id: id,\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n                        ></ng-container>\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-weight-200);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-left:var(--surface-margin-left);text-align:left}}th:last-of-type,td:last-of-type{border-right:1px solid var(--color-weight-200)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-weight-200),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-weight-200),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-left: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-left:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-left:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;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-left: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-left: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-weight-200)}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-left: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-left:var(--surface-margin-left);margin-right: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-right:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-right:2px}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: i1.DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: i1.DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: { order: "order" }, queries: [{ propertyName: "totalColumns", predicate: OrderTotalColumnComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    <table\r\n        class=\"\"\r\n        [class.no-select]=\"disableSelect\"\r\n    >\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <span>{{ column.heading }}</span>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  id: id,\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n                        ></ng-container>\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-weight-200);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-weight-200)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-weight-200),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-weight-200),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;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-weight-200)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: i1.DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: i1.DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OrderDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-data-table', changeDetection: ChangeDetectionStrategy.OnPush, 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                        <span>{{ column.heading }}</span>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  id: id,\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n                        ></ng-container>\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-weight-200);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-left:var(--surface-margin-left);text-align:left}}th:last-of-type,td:last-of-type{border-right:1px solid var(--color-weight-200)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-weight-200),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-weight-200),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-left: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-left:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-left:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;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-left: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-left: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-weight-200)}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-left: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-left:var(--surface-margin-left);margin-right: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-right:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-right:2px}\n"] }]
+            args: [{ selector: 'vdr-order-data-table', changeDetection: ChangeDetectionStrategy.OnPush, 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                        <span>{{ column.heading }}</span>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  id: id,\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n                        ></ng-container>\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-weight-200);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-weight-200)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-weight-200),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-weight-200),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;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-weight-200)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}\n"] }]
         }], propDecorators: { totalColumns: [{
                 type: ContentChildren,
                 args: [OrderTotalColumnComponent]
@@ -734,11 +734,11 @@ class OrderTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OrderTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: OrderTableComponent, selector: "vdr-order-table", inputs: { order: "order", orderLineCustomFields: "orderLineCustomFields", isDraft: "isDraft" }, outputs: { adjust: "adjust", remove: "remove" }, ngImport: i0, template: "<vdr-order-data-table id=\"order-detail-\" [items]=\"order.lines\" [order]=\"order\">\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\">\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\">\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\" [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\">\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\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            <ng-container *ngIf=\"!isDraft; else draft\">\r\n                {{ line.quantity }}\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 *ngFor=\"let customField of orderLineCustomFields\" [customField]=\"customField\"/>\r\n    <vdr-order-total-column [heading]=\"'order.total' | translate\" [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-right:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-right:2px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-left:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: ["order"] }, { kind: "component", type: OrderTotalColumnComponent, selector: "vdr-order-total-column", exportAs: ["row"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: OrderTableComponent, selector: "vdr-order-table", inputs: { order: "order", orderLineCustomFields: "orderLineCustomFields", isDraft: "isDraft" }, outputs: { adjust: "adjust", remove: "remove" }, ngImport: i0, template: "<vdr-order-data-table id=\"order-detail-\" [items]=\"order.lines\" [order]=\"order\">\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\">\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\">\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\" [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\">\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\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            <ng-container *ngIf=\"!isDraft; else draft\">\r\n                {{ line.quantity }}\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 *ngFor=\"let customField of orderLineCustomFields\" [customField]=\"customField\"/>\r\n    <vdr-order-total-column [heading]=\"'order.total' | translate\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            <div class=\"unit-price\">\r\n                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ line.linePrice | localeCurrency : order.currencyCode }}\r\n                </div>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\r\n                <vdr-dropdown *ngIf=\"discounts.length\">\r\n                    <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                        {{ 'order.promotions-applied' | translate }}\r\n                    </div>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                            <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\r\n                                discount.description\r\n                                }}</a>\r\n                            <div class=\"promotion-amount\">\r\n                                {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ discount.amount | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </ng-container>\r\n        </ng-template>\r\n    </vdr-order-total-column>\r\n</vdr-order-data-table>\r\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-inline-start:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: ["order"] }, { kind: "component", type: OrderTotalColumnComponent, selector: "vdr-order-total-column", exportAs: ["row"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OrderTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-order-data-table id=\"order-detail-\" [items]=\"order.lines\" [order]=\"order\">\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\">\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\">\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\" [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\">\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\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            <ng-container *ngIf=\"!isDraft; else draft\">\r\n                {{ line.quantity }}\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 *ngFor=\"let customField of orderLineCustomFields\" [customField]=\"customField\"/>\r\n    <vdr-order-total-column [heading]=\"'order.total' | translate\" [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-right:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-right:2px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-left:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"] }]
+            args: [{ selector: 'vdr-order-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-order-data-table id=\"order-detail-\" [items]=\"order.lines\" [order]=\"order\">\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\">\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\">\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\" [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\">\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\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            <ng-container *ngIf=\"!isDraft; else draft\">\r\n                {{ line.quantity }}\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 *ngFor=\"let customField of orderLineCustomFields\" [customField]=\"customField\"/>\r\n    <vdr-order-total-column [heading]=\"'order.total' | translate\" [optional]=\"false\">\r\n        <ng-template let-line=\"item\">\r\n            <div class=\"unit-price\">\r\n                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ line.linePrice | localeCurrency : order.currencyCode }}\r\n                </div>\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\r\n                <vdr-dropdown *ngIf=\"discounts.length\">\r\n                    <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                        {{ 'order.promotions-applied' | translate }}\r\n                    </div>\r\n                    <vdr-dropdown-menu>\r\n                        <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                            <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\r\n                                discount.description\r\n                                }}</a>\r\n                            <div class=\"promotion-amount\">\r\n                                {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ discount.amount | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </ng-container>\r\n        </ng-template>\r\n    </vdr-order-total-column>\r\n</vdr-order-data-table>\r\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}::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: [{
@@ -1028,20 +1028,20 @@ class FulfillOrderDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FulfillOrderDialogComponent, deps: [{ token: i1.DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: FulfillOrderDialogComponent, selector: "vdr-fulfill-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\r\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                    <th>{{ 'order.fulfill' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\r\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\r\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\r\n                        type=\"number\"\r\n                        [max]=\"fulfillmentQuantities[line.id].max\"\r\n                        min=\"0\"\r\n                    />\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"shipping-details\">\r\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\r\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\r\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\r\n        <vdr-configurable-input\r\n            [operationDefinition]=\"fulfillmentHandlerDef\"\r\n            [operation]=\"fulfillmentHandler\"\r\n            [formControl]=\"fulfillmentHandlerControl\"\r\n            [removable]=\"false\"\r\n        ></vdr-configurable-input>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        {{ 'order.create-fulfillment' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}: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-right:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-right: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-left:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position"], outputs: ["remove"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: FulfillOrderDialogComponent, selector: "vdr-fulfill-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\r\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                    <th>{{ 'order.fulfill' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\r\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\r\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\r\n                        type=\"number\"\r\n                        [max]=\"fulfillmentQuantities[line.id].max\"\r\n                        min=\"0\"\r\n                    />\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"shipping-details\">\r\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\r\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\r\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\r\n        <vdr-configurable-input\r\n            [operationDefinition]=\"fulfillmentHandlerDef\"\r\n            [operation]=\"fulfillmentHandler\"\r\n            [formControl]=\"fulfillmentHandlerControl\"\r\n            [removable]=\"false\"\r\n        ></vdr-configurable-input>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        {{ 'order.create-fulfillment' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}:host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}.fulfillment-wrapper .shipping-details{margin-top:24px}@media screen and (min-width: 768px){.fulfillment-wrapper .shipping-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position"], outputs: ["remove"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FulfillOrderDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-fulfill-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\r\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                    <th>{{ 'order.fulfill' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\r\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\r\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\r\n                        type=\"number\"\r\n                        [max]=\"fulfillmentQuantities[line.id].max\"\r\n                        min=\"0\"\r\n                    />\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"shipping-details\">\r\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\r\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\r\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\r\n        <vdr-configurable-input\r\n            [operationDefinition]=\"fulfillmentHandlerDef\"\r\n            [operation]=\"fulfillmentHandler\"\r\n            [formControl]=\"fulfillmentHandlerControl\"\r\n            [removable]=\"false\"\r\n        ></vdr-configurable-input>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        {{ 'order.create-fulfillment' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}: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-right:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-right: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-left:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"] }]
+            args: [{ selector: 'vdr-fulfill-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\r\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                    <th>{{ 'order.fulfill' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\r\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\r\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\r\n                        type=\"number\"\r\n                        [max]=\"fulfillmentQuantities[line.id].max\"\r\n                        min=\"0\"\r\n                    />\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"shipping-details\">\r\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\r\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\r\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\r\n        <vdr-configurable-input\r\n            [operationDefinition]=\"fulfillmentHandlerDef\"\r\n            [operation]=\"fulfillmentHandler\"\r\n            [formControl]=\"fulfillmentHandlerControl\"\r\n            [removable]=\"false\"\r\n        ></vdr-configurable-input>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        {{ 'order.create-fulfillment' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}:host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.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: function () { return [{ type: i1.DataService }, { type: i0.ChangeDetectorRef }]; } });
 class SimpleItemListComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: SimpleItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: SimpleItemListComponent, selector: "vdr-simple-item-list", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"items-list\">\r\n    <ul>\r\n        <li *ngFor=\"let item of items\" [title]=\"item.name\">\r\n            <div class=\"quantity\">{{ item.quantity }}</div>\r\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\r\n            {{ item.name }}\r\n        </li>\r\n    </ul>\r\n</div>\r\n", styles: [".items-list{font-size:12px}.items-list ul{margin-top:6px;list-style-type:none;margin-left:2px}.items-list ul li{line-height:14px;text-overflow:ellipsis;overflow:hidden}.items-list .quantity{min-width:16px;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: SimpleItemListComponent, selector: "vdr-simple-item-list", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"items-list\">\r\n    <ul>\r\n        <li *ngFor=\"let item of items\" [title]=\"item.name\">\r\n            <div class=\"quantity\">{{ item.quantity }}</div>\r\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\r\n            {{ item.name }}\r\n        </li>\r\n    </ul>\r\n</div>\r\n", styles: [".items-list{font-size:12px}.items-list ul{margin-top:6px;list-style-type:none;margin-inline-start:2px}.items-list ul li{line-height:14px;text-overflow:ellipsis;overflow:hidden}.items-list .quantity{min-width:16px;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: SimpleItemListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-simple-item-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"items-list\">\r\n    <ul>\r\n        <li *ngFor=\"let item of items\" [title]=\"item.name\">\r\n            <div class=\"quantity\">{{ item.quantity }}</div>\r\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\r\n            {{ item.name }}\r\n        </li>\r\n    </ul>\r\n</div>\r\n", styles: [".items-list{font-size:12px}.items-list ul{margin-top:6px;list-style-type:none;margin-left:2px}.items-list ul li{line-height:14px;text-overflow:ellipsis;overflow:hidden}.items-list .quantity{min-width:16px;display:inline-block}\n"] }]
+            args: [{ selector: 'vdr-simple-item-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"items-list\">\r\n    <ul>\r\n        <li *ngFor=\"let item of items\" [title]=\"item.name\">\r\n            <div class=\"quantity\">{{ item.quantity }}</div>\r\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\r\n            {{ item.name }}\r\n        </li>\r\n    </ul>\r\n</div>\r\n", styles: [".items-list{font-size:12px}.items-list ul{margin-top:6px;list-style-type:none;margin-inline-start:2px}.items-list ul li{line-height:14px;text-overflow:ellipsis;overflow:hidden}.items-list .quantity{min-width:16px;display:inline-block}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }] } });
@@ -1238,11 +1238,11 @@ class OrderProcessNodeComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OrderProcessNodeComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: OrderProcessNodeComponent, selector: "vdr-order-process-node", inputs: { node: "node", index: "index", active: "active" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"node-wrapper\" [ngStyle]=\"getStyle()\" [class.active]=\"active$ | async\">\r\n    <div\r\n        class=\"node\"\r\n        [class.active-target]=\"activeTarget$ | async\"\r\n    >\r\n        {{ node.name | stateI18nToken | translate }}\r\n    </div>\r\n    <div class=\"cancelled-wrapper\" *ngIf=\"isCancellable\">\r\n        <div class=\"cancelled-edge\">\r\n        </div>\r\n        <clr-icon shape=\"dot-circle\"></clr-icon>\r\n        <div class=\"cancelled-node\">\r\n            {{ cancelledState | stateI18nToken | translate }}\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.node-wrapper{position:absolute;z-index:1;display:flex;align-items:center}.node{display:inline-block;border:2px solid var(--color-component-border-200);border-radius:3px;padding:3px 6px;z-index:1;background-color:var(--color-component-bg-100);opacity:.7;transition:opacity .2s,background-color .2s,color .2s;cursor:default}.node.active-target{border-color:var(--color-primary-500);opacity:.9}.cancelled-wrapper{display:flex;align-items:center;color:var(--color-grey-300);transition:color .2s,opacity .2s;opacity:.7}.cancelled-edge{width:48px;height:2px;background-color:var(--color-component-bg-300);transition:background-color .2s}clr-icon{margin-left:-1px}.cancelled-node{margin-left:6px}.active .cancelled-wrapper{opacity:1}.active .node{opacity:1;background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-primary-100)}.active .cancelled-wrapper{color:var(--color-error-500)}.active .cancelled-edge{background-color:var(--color-error-500)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: OrderProcessNodeComponent, selector: "vdr-order-process-node", inputs: { node: "node", index: "index", active: "active" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"node-wrapper\" [ngStyle]=\"getStyle()\" [class.active]=\"active$ | async\">\r\n    <div\r\n        class=\"node\"\r\n        [class.active-target]=\"activeTarget$ | async\"\r\n    >\r\n        {{ node.name | stateI18nToken | translate }}\r\n    </div>\r\n    <div class=\"cancelled-wrapper\" *ngIf=\"isCancellable\">\r\n        <div class=\"cancelled-edge\">\r\n        </div>\r\n        <clr-icon shape=\"dot-circle\"></clr-icon>\r\n        <div class=\"cancelled-node\">\r\n            {{ cancelledState | stateI18nToken | translate }}\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.node-wrapper{position:absolute;z-index:1;display:flex;align-items:center}.node{display:inline-block;border:2px solid var(--color-component-border-200);border-radius:3px;padding:3px 6px;z-index:1;background-color:var(--color-component-bg-100);opacity:.7;transition:opacity .2s,background-color .2s,color .2s;cursor:default}.node.active-target{border-color:var(--color-primary-500);opacity:.9}.cancelled-wrapper{display:flex;align-items:center;color:var(--color-grey-300);transition:color .2s,opacity .2s;opacity:.7}.cancelled-edge{width:48px;height:2px;background-color:var(--color-component-bg-300);transition:background-color .2s}clr-icon{margin-inline-start:-1px}.cancelled-node{margin-inline-start:6px}.active .cancelled-wrapper{opacity:1}.active .node{opacity:1;background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-primary-100)}.active .cancelled-wrapper{color:var(--color-error-500)}.active .cancelled-edge{background-color:var(--color-error-500)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OrderProcessNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-process-node', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"node-wrapper\" [ngStyle]=\"getStyle()\" [class.active]=\"active$ | async\">\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-left:-1px}.cancelled-node{margin-left: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, 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"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { node: [{
                 type: Input
             }], index: [{
@@ -1506,11 +1506,11 @@ class RefundOrderDialogComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: RefundOrderDialogComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: RefundOrderDialogComponent, selector: "vdr-refund-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.refund-and-cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"refund-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.prorated-unit-price' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.refund' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr *ngFor=\"let line of order.lines\" class=\"order-line\">\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    <div class=\"prorated-wrapper\">\r\n                        {{ line.proratedUnitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                        <ng-container *ngIf=\"line.discounts as discounts\">\r\n                            <vdr-dropdown *ngIf=\"discounts.length\">\r\n                                <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                                    <button class=\"icon-button\"><clr-icon shape=\"info\"></clr-icon></button>\r\n                                </div>\r\n                                <vdr-dropdown-menu>\r\n                                    <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                        {{ discount.description }}\r\n                                        <div class=\"promotion-amount\">\r\n                                            {{\r\n                                                discount.amount / 100 / line.quantity\r\n                                                    | number: '1.0-2'\r\n                                                    | currency: order.currencyCode\r\n                                            }}\r\n                                        </div>\r\n                                    </div>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </ng-container>\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle quantity-col\">\r\n                    <input\r\n                        *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                        [(ngModel)]=\"lineQuantities[line.id].quantity\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                        (input)=\"handleZeroQuantity(lineQuantities[line.id])\"\r\n                    />\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                    <div class=\"cancel-checkbox-wrapper\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                            clrCheckbox\r\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n                            [(ngModel)]=\"lineQuantities[line.id].refund\"\r\n                        />\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                    <div class=\"cancel-checkbox-wrapper\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                            clrCheckbox\r\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n                            [(ngModel)]=\"lineQuantities[line.id].cancel\"\r\n                        />\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"refund-details mt-4\" [class.faded]=\"!isRefunding() && !isCancelling()\">\r\n        <div>\r\n            <label class=\"clr-control-label\">{{ 'order.refund-cancellation-reason' | translate }}</label>\r\n            <ng-select\r\n                [disabled]=\"!isRefunding() && !isCancelling()\"\r\n                [items]=\"reasons\"\r\n                bindLabel=\"name\"\r\n                autofocus\r\n                [placeholder]=\"'order.refund-cancellation-reason-required' | translate\"\r\n                bindValue=\"id\"\r\n                [addTag]=\"true\"\r\n                [(ngModel)]=\"reason\"\r\n            ></ng-select>\r\n        </div>\r\n\r\n        <div>\r\n            <clr-select-container>\r\n                <label>{{ 'order.payment-to-refund' | translate }}</label>\r\n                <select clrSelect name=\"options\" [(ngModel)]=\"selectedPayment\" [disabled]=\"!isRefunding()\">\r\n                    <option\r\n                        *ngFor=\"let payment of settledPayments\"\r\n                        [ngValue]=\"payment\"\r\n                        [disabled]=\"payment.state !== 'Settled'\"\r\n                    >\r\n                        #{{ payment.id }} {{ payment.method }}:\r\n                        {{ payment.amount | localeCurrency: order.currencyCode }}\r\n                    </option>\r\n                </select>\r\n            </clr-select-container>\r\n\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"refundShipping\" [disabled]=\"!isRefunding()\" />\r\n                <label>\r\n                    {{ 'order.refund-shipping' | translate }} ({{\r\n                        order.shippingWithTax | localeCurrency: order.currencyCode\r\n                    }})\r\n                </label>\r\n            </clr-checkbox-wrapper>\r\n            <clr-input-container>\r\n                <label>{{ 'order.refund-adjustment' | translate }}</label>\r\n                <vdr-currency-input\r\n                    clrInput\r\n                    [disabled]=\"!isRefunding()\"\r\n                    [currencyCode]=\"order.currencyCode\"\r\n                    [(ngModel)]=\"adjustment\"\r\n                ></vdr-currency-input>\r\n            </clr-input-container>\r\n            <div class=\"totals\" [class.disabled]=\"!isRefunding()\">\r\n                <div class=\"order-total\">\r\n                    {{ 'order.payment-amount' | translate }}:\r\n                    {{ selectedPayment.amount | localeCurrency: order.currencyCode }}\r\n                </div>\r\n                <div class=\"refund-total\">\r\n                    {{ 'order.refund-total' | translate }}:\r\n                    {{ refundTotal | localeCurrency: order.currencyCode }}\r\n                </div>\r\n                <div class=\"refund-total-error\" *ngIf=\"refundTotal < 0 || settledPaymentsTotal < refundTotal\">\r\n                    {{\r\n                        'order.refund-total-error'\r\n                            | translate\r\n                                : {\r\n                                      min: 0 | currency: order.currencyCode,\r\n                                      max: settledPaymentsTotal | localeCurrency: order.currencyCode\r\n                                  }\r\n                    }}\r\n                </div>\r\n                <div class=\"refund-total-warning\" *ngIf=\"selectedPayment.amount < refundTotal\">\r\n                    {{ 'order.refund-total-warning' | translate }}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        <ng-container *ngIf=\"isRefunding(); else cancelling\">\r\n            {{\r\n                'order.refund-with-amount'\r\n                    | translate: { amount: refundTotal | localeCurrency: order.currencyCode }\r\n            }}\r\n        </ng-container>\r\n        <ng-template #cancelling>\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}.quantity-col{background-color:var(--color-warning-100)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;justify-content:space-between}.refund-details.faded{opacity:.5}.totals{margin-top:48px}.totals .refund-total{font-size:18px}.totals .refund-total-error{color:var(--color-error-500)}.totals .refund-total-warning{color:var(--color-warning-600);max-width:250px}.totals.disabled{color:var(--color-grey-300)}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-left:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1$1.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i1$1.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i1$1.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i1$1.ClrSelect, selector: "[clrSelect]" }, { kind: "component", type: i1$1.ClrSelectContainer, selector: "clr-select-container" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: RefundOrderDialogComponent, selector: "vdr-refund-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.refund-and-cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"refund-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.prorated-unit-price' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.refund' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr *ngFor=\"let line of order.lines\" class=\"order-line\">\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    <div class=\"prorated-wrapper\">\r\n                        {{ line.proratedUnitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                        <ng-container *ngIf=\"line.discounts as discounts\">\r\n                            <vdr-dropdown *ngIf=\"discounts.length\">\r\n                                <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                                    <button class=\"icon-button\"><clr-icon shape=\"info\"></clr-icon></button>\r\n                                </div>\r\n                                <vdr-dropdown-menu>\r\n                                    <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                        {{ discount.description }}\r\n                                        <div class=\"promotion-amount\">\r\n                                            {{\r\n                                                discount.amount / 100 / line.quantity\r\n                                                    | number: '1.0-2'\r\n                                                    | currency: order.currencyCode\r\n                                            }}\r\n                                        </div>\r\n                                    </div>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </ng-container>\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle quantity-col\">\r\n                    <input\r\n                        *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                        [(ngModel)]=\"lineQuantities[line.id].quantity\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                        (input)=\"handleZeroQuantity(lineQuantities[line.id])\"\r\n                    />\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                    <div class=\"cancel-checkbox-wrapper\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                            clrCheckbox\r\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n                            [(ngModel)]=\"lineQuantities[line.id].refund\"\r\n                        />\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                    <div class=\"cancel-checkbox-wrapper\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                            clrCheckbox\r\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n                            [(ngModel)]=\"lineQuantities[line.id].cancel\"\r\n                        />\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"refund-details mt-4\" [class.faded]=\"!isRefunding() && !isCancelling()\">\r\n        <div>\r\n            <label class=\"clr-control-label\">{{ 'order.refund-cancellation-reason' | translate }}</label>\r\n            <ng-select\r\n                [disabled]=\"!isRefunding() && !isCancelling()\"\r\n                [items]=\"reasons\"\r\n                bindLabel=\"name\"\r\n                autofocus\r\n                [placeholder]=\"'order.refund-cancellation-reason-required' | translate\"\r\n                bindValue=\"id\"\r\n                [addTag]=\"true\"\r\n                [(ngModel)]=\"reason\"\r\n            ></ng-select>\r\n        </div>\r\n\r\n        <div>\r\n            <clr-select-container>\r\n                <label>{{ 'order.payment-to-refund' | translate }}</label>\r\n                <select clrSelect name=\"options\" [(ngModel)]=\"selectedPayment\" [disabled]=\"!isRefunding()\">\r\n                    <option\r\n                        *ngFor=\"let payment of settledPayments\"\r\n                        [ngValue]=\"payment\"\r\n                        [disabled]=\"payment.state !== 'Settled'\"\r\n                    >\r\n                        #{{ payment.id }} {{ payment.method }}:\r\n                        {{ payment.amount | localeCurrency: order.currencyCode }}\r\n                    </option>\r\n                </select>\r\n            </clr-select-container>\r\n\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"refundShipping\" [disabled]=\"!isRefunding()\" />\r\n                <label>\r\n                    {{ 'order.refund-shipping' | translate }} ({{\r\n                        order.shippingWithTax | localeCurrency: order.currencyCode\r\n                    }})\r\n                </label>\r\n            </clr-checkbox-wrapper>\r\n            <clr-input-container>\r\n                <label>{{ 'order.refund-adjustment' | translate }}</label>\r\n                <vdr-currency-input\r\n                    clrInput\r\n                    [disabled]=\"!isRefunding()\"\r\n                    [currencyCode]=\"order.currencyCode\"\r\n                    [(ngModel)]=\"adjustment\"\r\n                ></vdr-currency-input>\r\n            </clr-input-container>\r\n            <div class=\"totals\" [class.disabled]=\"!isRefunding()\">\r\n                <div class=\"order-total\">\r\n                    {{ 'order.payment-amount' | translate }}:\r\n                    {{ selectedPayment.amount | localeCurrency: order.currencyCode }}\r\n                </div>\r\n                <div class=\"refund-total\">\r\n                    {{ 'order.refund-total' | translate }}:\r\n                    {{ refundTotal | localeCurrency: order.currencyCode }}\r\n                </div>\r\n                <div class=\"refund-total-error\" *ngIf=\"refundTotal < 0 || settledPaymentsTotal < refundTotal\">\r\n                    {{\r\n                        'order.refund-total-error'\r\n                            | translate\r\n                                : {\r\n                                      min: 0 | currency: order.currencyCode,\r\n                                      max: settledPaymentsTotal | localeCurrency: order.currencyCode\r\n                                  }\r\n                    }}\r\n                </div>\r\n                <div class=\"refund-total-warning\" *ngIf=\"selectedPayment.amount < refundTotal\">\r\n                    {{ 'order.refund-total-warning' | translate }}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        <ng-container *ngIf=\"isRefunding(); else cancelling\">\r\n            {{\r\n                'order.refund-with-amount'\r\n                    | translate: { amount: refundTotal | localeCurrency: order.currencyCode }\r\n            }}\r\n        </ng-container>\r\n        <ng-template #cancelling>\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}.quantity-col{background-color:var(--color-warning-100)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;justify-content:space-between}.refund-details.faded{opacity:.5}.totals{margin-top:48px}.totals .refund-total{font-size:18px}.totals .refund-total-error{color:var(--color-error-500)}.totals .refund-total-warning{color:var(--color-warning-600);max-width:250px}.totals.disabled{color:var(--color-grey-300)}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-inline-start:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1$1.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i1$1.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i1$1.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i1$1.ClrSelect, selector: "[clrSelect]" }, { kind: "component", type: i1$1.ClrSelectContainer, selector: "clr-select-container" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: RefundOrderDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-refund-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.refund-and-cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"refund-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.prorated-unit-price' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.refund' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr *ngFor=\"let line of order.lines\" class=\"order-line\">\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    <div class=\"prorated-wrapper\">\r\n                        {{ line.proratedUnitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                        <ng-container *ngIf=\"line.discounts as discounts\">\r\n                            <vdr-dropdown *ngIf=\"discounts.length\">\r\n                                <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                                    <button class=\"icon-button\"><clr-icon shape=\"info\"></clr-icon></button>\r\n                                </div>\r\n                                <vdr-dropdown-menu>\r\n                                    <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                        {{ discount.description }}\r\n                                        <div class=\"promotion-amount\">\r\n                                            {{\r\n                                                discount.amount / 100 / line.quantity\r\n                                                    | number: '1.0-2'\r\n                                                    | currency: order.currencyCode\r\n                                            }}\r\n                                        </div>\r\n                                    </div>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </ng-container>\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle quantity-col\">\r\n                    <input\r\n                        *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                        [(ngModel)]=\"lineQuantities[line.id].quantity\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                        (input)=\"handleZeroQuantity(lineQuantities[line.id])\"\r\n                    />\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                    <div class=\"cancel-checkbox-wrapper\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                            clrCheckbox\r\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n                            [(ngModel)]=\"lineQuantities[line.id].refund\"\r\n                        />\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                    <div class=\"cancel-checkbox-wrapper\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                            clrCheckbox\r\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n                            [(ngModel)]=\"lineQuantities[line.id].cancel\"\r\n                        />\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"refund-details mt-4\" [class.faded]=\"!isRefunding() && !isCancelling()\">\r\n        <div>\r\n            <label class=\"clr-control-label\">{{ 'order.refund-cancellation-reason' | translate }}</label>\r\n            <ng-select\r\n                [disabled]=\"!isRefunding() && !isCancelling()\"\r\n                [items]=\"reasons\"\r\n                bindLabel=\"name\"\r\n                autofocus\r\n                [placeholder]=\"'order.refund-cancellation-reason-required' | translate\"\r\n                bindValue=\"id\"\r\n                [addTag]=\"true\"\r\n                [(ngModel)]=\"reason\"\r\n            ></ng-select>\r\n        </div>\r\n\r\n        <div>\r\n            <clr-select-container>\r\n                <label>{{ 'order.payment-to-refund' | translate }}</label>\r\n                <select clrSelect name=\"options\" [(ngModel)]=\"selectedPayment\" [disabled]=\"!isRefunding()\">\r\n                    <option\r\n                        *ngFor=\"let payment of settledPayments\"\r\n                        [ngValue]=\"payment\"\r\n                        [disabled]=\"payment.state !== 'Settled'\"\r\n                    >\r\n                        #{{ payment.id }} {{ payment.method }}:\r\n                        {{ payment.amount | localeCurrency: order.currencyCode }}\r\n                    </option>\r\n                </select>\r\n            </clr-select-container>\r\n\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"refundShipping\" [disabled]=\"!isRefunding()\" />\r\n                <label>\r\n                    {{ 'order.refund-shipping' | translate }} ({{\r\n                        order.shippingWithTax | localeCurrency: order.currencyCode\r\n                    }})\r\n                </label>\r\n            </clr-checkbox-wrapper>\r\n            <clr-input-container>\r\n                <label>{{ 'order.refund-adjustment' | translate }}</label>\r\n                <vdr-currency-input\r\n                    clrInput\r\n                    [disabled]=\"!isRefunding()\"\r\n                    [currencyCode]=\"order.currencyCode\"\r\n                    [(ngModel)]=\"adjustment\"\r\n                ></vdr-currency-input>\r\n            </clr-input-container>\r\n            <div class=\"totals\" [class.disabled]=\"!isRefunding()\">\r\n                <div class=\"order-total\">\r\n                    {{ 'order.payment-amount' | translate }}:\r\n                    {{ selectedPayment.amount | localeCurrency: order.currencyCode }}\r\n                </div>\r\n                <div class=\"refund-total\">\r\n                    {{ 'order.refund-total' | translate }}:\r\n                    {{ refundTotal | localeCurrency: order.currencyCode }}\r\n                </div>\r\n                <div class=\"refund-total-error\" *ngIf=\"refundTotal < 0 || settledPaymentsTotal < refundTotal\">\r\n                    {{\r\n                        'order.refund-total-error'\r\n                            | translate\r\n                                : {\r\n                                      min: 0 | currency: order.currencyCode,\r\n                                      max: settledPaymentsTotal | localeCurrency: order.currencyCode\r\n                                  }\r\n                    }}\r\n                </div>\r\n                <div class=\"refund-total-warning\" *ngIf=\"selectedPayment.amount < refundTotal\">\r\n                    {{ 'order.refund-total-warning' | translate }}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        <ng-container *ngIf=\"isRefunding(); else cancelling\">\r\n            {{\r\n                'order.refund-with-amount'\r\n                    | translate: { amount: refundTotal | localeCurrency: order.currencyCode }\r\n            }}\r\n        </ng-container>\r\n        <ng-template #cancelling>\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}.quantity-col{background-color:var(--color-warning-100)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;justify-content:space-between}.refund-details.faded{opacity:.5}.totals{margin-top:48px}.totals .refund-total{font-size:18px}.totals .refund-total-error{color:var(--color-error-500)}.totals .refund-total-warning{color:var(--color-warning-600);max-width:250px}.totals.disabled{color:var(--color-grey-300)}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-left:12px}\n"] }]
+            args: [{ selector: 'vdr-refund-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.refund-and-cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"refund-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.prorated-unit-price' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.refund' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr *ngFor=\"let line of order.lines\" class=\"order-line\">\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    <div class=\"prorated-wrapper\">\r\n                        {{ line.proratedUnitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                        <ng-container *ngIf=\"line.discounts as discounts\">\r\n                            <vdr-dropdown *ngIf=\"discounts.length\">\r\n                                <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                                    <button class=\"icon-button\"><clr-icon shape=\"info\"></clr-icon></button>\r\n                                </div>\r\n                                <vdr-dropdown-menu>\r\n                                    <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                        {{ discount.description }}\r\n                                        <div class=\"promotion-amount\">\r\n                                            {{\r\n                                                discount.amount / 100 / line.quantity\r\n                                                    | number: '1.0-2'\r\n                                                    | currency: order.currencyCode\r\n                                            }}\r\n                                        </div>\r\n                                    </div>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </ng-container>\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle quantity-col\">\r\n                    <input\r\n                        *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                        [(ngModel)]=\"lineQuantities[line.id].quantity\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                        (input)=\"handleZeroQuantity(lineQuantities[line.id])\"\r\n                    />\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                    <div class=\"cancel-checkbox-wrapper\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                            clrCheckbox\r\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n                            [(ngModel)]=\"lineQuantities[line.id].refund\"\r\n                        />\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                    <div class=\"cancel-checkbox-wrapper\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                            clrCheckbox\r\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n                            [(ngModel)]=\"lineQuantities[line.id].cancel\"\r\n                        />\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"refund-details mt-4\" [class.faded]=\"!isRefunding() && !isCancelling()\">\r\n        <div>\r\n            <label class=\"clr-control-label\">{{ 'order.refund-cancellation-reason' | translate }}</label>\r\n            <ng-select\r\n                [disabled]=\"!isRefunding() && !isCancelling()\"\r\n                [items]=\"reasons\"\r\n                bindLabel=\"name\"\r\n                autofocus\r\n                [placeholder]=\"'order.refund-cancellation-reason-required' | translate\"\r\n                bindValue=\"id\"\r\n                [addTag]=\"true\"\r\n                [(ngModel)]=\"reason\"\r\n            ></ng-select>\r\n        </div>\r\n\r\n        <div>\r\n            <clr-select-container>\r\n                <label>{{ 'order.payment-to-refund' | translate }}</label>\r\n                <select clrSelect name=\"options\" [(ngModel)]=\"selectedPayment\" [disabled]=\"!isRefunding()\">\r\n                    <option\r\n                        *ngFor=\"let payment of settledPayments\"\r\n                        [ngValue]=\"payment\"\r\n                        [disabled]=\"payment.state !== 'Settled'\"\r\n                    >\r\n                        #{{ payment.id }} {{ payment.method }}:\r\n                        {{ payment.amount | localeCurrency: order.currencyCode }}\r\n                    </option>\r\n                </select>\r\n            </clr-select-container>\r\n\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"refundShipping\" [disabled]=\"!isRefunding()\" />\r\n                <label>\r\n                    {{ 'order.refund-shipping' | translate }} ({{\r\n                        order.shippingWithTax | localeCurrency: order.currencyCode\r\n                    }})\r\n                </label>\r\n            </clr-checkbox-wrapper>\r\n            <clr-input-container>\r\n                <label>{{ 'order.refund-adjustment' | translate }}</label>\r\n                <vdr-currency-input\r\n                    clrInput\r\n                    [disabled]=\"!isRefunding()\"\r\n                    [currencyCode]=\"order.currencyCode\"\r\n                    [(ngModel)]=\"adjustment\"\r\n                ></vdr-currency-input>\r\n            </clr-input-container>\r\n            <div class=\"totals\" [class.disabled]=\"!isRefunding()\">\r\n                <div class=\"order-total\">\r\n                    {{ 'order.payment-amount' | translate }}:\r\n                    {{ selectedPayment.amount | localeCurrency: order.currencyCode }}\r\n                </div>\r\n                <div class=\"refund-total\">\r\n                    {{ 'order.refund-total' | translate }}:\r\n                    {{ refundTotal | localeCurrency: order.currencyCode }}\r\n                </div>\r\n                <div class=\"refund-total-error\" *ngIf=\"refundTotal < 0 || settledPaymentsTotal < refundTotal\">\r\n                    {{\r\n                        'order.refund-total-error'\r\n                            | translate\r\n                                : {\r\n                                      min: 0 | currency: order.currencyCode,\r\n                                      max: settledPaymentsTotal | localeCurrency: order.currencyCode\r\n                                  }\r\n                    }}\r\n                </div>\r\n                <div class=\"refund-total-warning\" *ngIf=\"selectedPayment.amount < refundTotal\">\r\n                    {{ 'order.refund-total-warning' | translate }}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        <ng-container *ngIf=\"isRefunding(); else cancelling\">\r\n            {{\r\n                'order.refund-with-amount'\r\n                    | translate: { amount: refundTotal | localeCurrency: order.currencyCode }\r\n            }}\r\n        </ng-container>\r\n        <ng-template #cancelling>\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}.quantity-col{background-color:var(--color-warning-100)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;justify-content:space-between}.refund-details.faded{opacity:.5}.totals{margin-top:48px}.totals .refund-total{font-size:18px}.totals .refund-total-error{color:var(--color-error-500)}.totals .refund-total-warning{color:var(--color-warning-600);max-width:250px}.totals.disabled{color:var(--color-grey-300)}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-inline-start:12px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.I18nService }]; } });
 class SettleRefundDialogComponent {
@@ -1603,11 +1603,11 @@ class OrderPaymentCardComponent {
         return this.payment.nextStates.filter(s => s !== 'Settled' && s !== 'Error');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OrderPaymentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: OrderPaymentCardComponent, selector: "vdr-order-payment-card", inputs: { payment: "payment", currencyCode: "currencyCode" }, outputs: { settlePayment: "settlePayment", transitionPaymentState: "transitionPaymentState", settleRefund: "settleRefund" }, ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-header payment-header\">\r\n        <div>\r\n            {{ 'order.payment' | translate }}\r\n            <ng-container *ngIf=\"payment.transactionId\">#{{ payment.transactionId }}</ng-container>\r\n        </div>\r\n        <div class=\"payment-state\">\r\n            <vdr-payment-state-label [state]=\"payment.state\"></vdr-payment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-payment-detail [payment]=\"payment\" [currencyCode]=\"currencyCode\"></vdr-payment-detail>\r\n    </div>\r\n    <ng-container *ngFor=\"let refund of payment.refunds\">\r\n        <div class=\"card-header payment-header\">\r\n            <clr-icon shape=\"redo\" class=\"refund-icon\" dir=\"down\"></clr-icon>\r\n            {{ 'order.refund' | translate }} #{{ refund.id }}\r\n            <div class=\"clr-flex-fill\"></div>\r\n            <vdr-refund-state-label [state]=\"refund.state\"></vdr-refund-state-label>\r\n        </div>\r\n        <div class=\"card-block\">\r\n            <vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n                {{ refund.createdAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-total' | translate\">\r\n                {{ refund.total | localeCurrency: currencyCode }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.transaction-id' | translate\" *ngIf=\"refund.transactionId\">\r\n                {{ refund.transactionId }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-reason' | translate\" *ngIf=\"refund.reason\">\r\n                {{ refund.reason }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-metadata' | translate\" *ngIf=\"refundHasMetadata(refund)\">\r\n                <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\r\n            </vdr-labeled-data>\r\n        </div>\r\n        <div class=\"card-footer\" *ngIf=\"refund.state === 'Pending'\">\r\n            <button class=\"btn btn-sm btn-primary\" (click)=\"settleRefund.emit(refund)\">\r\n                {{ 'order.settle-refund' | translate }}\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"card-footer\" *ngIf=\"payment.nextStates.length\">\r\n        <button\r\n            class=\"btn btn-sm btn-primary\"\r\n            *ngIf=\"payment.nextStates.includes('Settled')\"\r\n            (click)=\"settlePayment.emit(payment)\"\r\n        >\r\n            {{ 'order.settle-payment' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionPaymentState.emit({ payment: payment, state: nextState })\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate: { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-payment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n", styles: [".payment-header{display:flex;justify-content:space-between;align-items:center}.refund-icon{margin-right:6px;color:var(--color-grey-400)}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: PaymentStateLabelComponent, selector: "vdr-payment-state-label", inputs: ["state"] }, { kind: "component", type: RefundStateLabelComponent, selector: "vdr-refund-state-label", inputs: ["state"] }, { kind: "component", type: PaymentDetailComponent, selector: "vdr-payment-detail", inputs: ["payment", "currencyCode"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: OrderPaymentCardComponent, selector: "vdr-order-payment-card", inputs: { payment: "payment", currencyCode: "currencyCode" }, outputs: { settlePayment: "settlePayment", transitionPaymentState: "transitionPaymentState", settleRefund: "settleRefund" }, ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-header payment-header\">\r\n        <div>\r\n            {{ 'order.payment' | translate }}\r\n            <ng-container *ngIf=\"payment.transactionId\">#{{ payment.transactionId }}</ng-container>\r\n        </div>\r\n        <div class=\"payment-state\">\r\n            <vdr-payment-state-label [state]=\"payment.state\"></vdr-payment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-payment-detail [payment]=\"payment\" [currencyCode]=\"currencyCode\"></vdr-payment-detail>\r\n    </div>\r\n    <ng-container *ngFor=\"let refund of payment.refunds\">\r\n        <div class=\"card-header payment-header\">\r\n            <clr-icon shape=\"redo\" class=\"refund-icon\" dir=\"down\"></clr-icon>\r\n            {{ 'order.refund' | translate }} #{{ refund.id }}\r\n            <div class=\"clr-flex-fill\"></div>\r\n            <vdr-refund-state-label [state]=\"refund.state\"></vdr-refund-state-label>\r\n        </div>\r\n        <div class=\"card-block\">\r\n            <vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n                {{ refund.createdAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-total' | translate\">\r\n                {{ refund.total | localeCurrency: currencyCode }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.transaction-id' | translate\" *ngIf=\"refund.transactionId\">\r\n                {{ refund.transactionId }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-reason' | translate\" *ngIf=\"refund.reason\">\r\n                {{ refund.reason }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-metadata' | translate\" *ngIf=\"refundHasMetadata(refund)\">\r\n                <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\r\n            </vdr-labeled-data>\r\n        </div>\r\n        <div class=\"card-footer\" *ngIf=\"refund.state === 'Pending'\">\r\n            <button class=\"btn btn-sm btn-primary\" (click)=\"settleRefund.emit(refund)\">\r\n                {{ 'order.settle-refund' | translate }}\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"card-footer\" *ngIf=\"payment.nextStates.length\">\r\n        <button\r\n            class=\"btn btn-sm btn-primary\"\r\n            *ngIf=\"payment.nextStates.includes('Settled')\"\r\n            (click)=\"settlePayment.emit(payment)\"\r\n        >\r\n            {{ 'order.settle-payment' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionPaymentState.emit({ payment: payment, state: nextState })\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate: { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-payment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n", styles: [".payment-header{display:flex;justify-content:space-between;align-items:center}.refund-icon{margin-inline-end:6px;color:var(--color-grey-400)}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: PaymentStateLabelComponent, selector: "vdr-payment-state-label", inputs: ["state"] }, { kind: "component", type: RefundStateLabelComponent, selector: "vdr-refund-state-label", inputs: ["state"] }, { kind: "component", type: PaymentDetailComponent, selector: "vdr-payment-detail", inputs: ["payment", "currencyCode"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OrderPaymentCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-payment-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card\">\r\n    <div class=\"card-header payment-header\">\r\n        <div>\r\n            {{ 'order.payment' | translate }}\r\n            <ng-container *ngIf=\"payment.transactionId\">#{{ payment.transactionId }}</ng-container>\r\n        </div>\r\n        <div class=\"payment-state\">\r\n            <vdr-payment-state-label [state]=\"payment.state\"></vdr-payment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-payment-detail [payment]=\"payment\" [currencyCode]=\"currencyCode\"></vdr-payment-detail>\r\n    </div>\r\n    <ng-container *ngFor=\"let refund of payment.refunds\">\r\n        <div class=\"card-header payment-header\">\r\n            <clr-icon shape=\"redo\" class=\"refund-icon\" dir=\"down\"></clr-icon>\r\n            {{ 'order.refund' | translate }} #{{ refund.id }}\r\n            <div class=\"clr-flex-fill\"></div>\r\n            <vdr-refund-state-label [state]=\"refund.state\"></vdr-refund-state-label>\r\n        </div>\r\n        <div class=\"card-block\">\r\n            <vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n                {{ refund.createdAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-total' | translate\">\r\n                {{ refund.total | localeCurrency: currencyCode }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.transaction-id' | translate\" *ngIf=\"refund.transactionId\">\r\n                {{ refund.transactionId }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-reason' | translate\" *ngIf=\"refund.reason\">\r\n                {{ refund.reason }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-metadata' | translate\" *ngIf=\"refundHasMetadata(refund)\">\r\n                <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\r\n            </vdr-labeled-data>\r\n        </div>\r\n        <div class=\"card-footer\" *ngIf=\"refund.state === 'Pending'\">\r\n            <button class=\"btn btn-sm btn-primary\" (click)=\"settleRefund.emit(refund)\">\r\n                {{ 'order.settle-refund' | translate }}\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"card-footer\" *ngIf=\"payment.nextStates.length\">\r\n        <button\r\n            class=\"btn btn-sm btn-primary\"\r\n            *ngIf=\"payment.nextStates.includes('Settled')\"\r\n            (click)=\"settlePayment.emit(payment)\"\r\n        >\r\n            {{ 'order.settle-payment' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionPaymentState.emit({ payment: payment, state: nextState })\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate: { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-payment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n", styles: [".payment-header{display:flex;justify-content:space-between;align-items:center}.refund-icon{margin-right:6px;color:var(--color-grey-400)}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"] }]
+            args: [{ selector: 'vdr-order-payment-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card\">\r\n    <div class=\"card-header payment-header\">\r\n        <div>\r\n            {{ 'order.payment' | translate }}\r\n            <ng-container *ngIf=\"payment.transactionId\">#{{ payment.transactionId }}</ng-container>\r\n        </div>\r\n        <div class=\"payment-state\">\r\n            <vdr-payment-state-label [state]=\"payment.state\"></vdr-payment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-payment-detail [payment]=\"payment\" [currencyCode]=\"currencyCode\"></vdr-payment-detail>\r\n    </div>\r\n    <ng-container *ngFor=\"let refund of payment.refunds\">\r\n        <div class=\"card-header payment-header\">\r\n            <clr-icon shape=\"redo\" class=\"refund-icon\" dir=\"down\"></clr-icon>\r\n            {{ 'order.refund' | translate }} #{{ refund.id }}\r\n            <div class=\"clr-flex-fill\"></div>\r\n            <vdr-refund-state-label [state]=\"refund.state\"></vdr-refund-state-label>\r\n        </div>\r\n        <div class=\"card-block\">\r\n            <vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n                {{ refund.createdAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-total' | translate\">\r\n                {{ refund.total | localeCurrency: currencyCode }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.transaction-id' | translate\" *ngIf=\"refund.transactionId\">\r\n                {{ refund.transactionId }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-reason' | translate\" *ngIf=\"refund.reason\">\r\n                {{ refund.reason }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-metadata' | translate\" *ngIf=\"refundHasMetadata(refund)\">\r\n                <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\r\n            </vdr-labeled-data>\r\n        </div>\r\n        <div class=\"card-footer\" *ngIf=\"refund.state === 'Pending'\">\r\n            <button class=\"btn btn-sm btn-primary\" (click)=\"settleRefund.emit(refund)\">\r\n                {{ 'order.settle-refund' | translate }}\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"card-footer\" *ngIf=\"payment.nextStates.length\">\r\n        <button\r\n            class=\"btn btn-sm btn-primary\"\r\n            *ngIf=\"payment.nextStates.includes('Settled')\"\r\n            (click)=\"settlePayment.emit(payment)\"\r\n        >\r\n            {{ 'order.settle-payment' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionPaymentState.emit({ payment: payment, state: nextState })\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate: { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-payment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n", styles: [".payment-header{display:flex;justify-content:space-between;align-items:center}.refund-icon{margin-inline-end:6px;color:var(--color-grey-400)}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"] }]
         }], propDecorators: { payment: [{
                 type: Input
             }], currencyCode: [{
@@ -1818,11 +1818,11 @@ class OrderHistoryComponent {
         this.noteIsPrivate = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OrderHistoryComponent, deps: [{ token: i1.HistoryEntryComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: OrderHistoryComponent, selector: "vdr-order-history", inputs: { order: "order", history: "history" }, outputs: { addNote: "addNote", updateNote: "updateNote", deleteNote: "deleteNote" }, ngImport: i0, template: "<div class=\"entry-list\" [class.expanded]=\"expanded\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\">\r\n        <div class=\"note-entry\">\r\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToOrder()\">\r\n                {{ 'common.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"visibility-select\">\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n                <label>{{ 'order.note-is-private' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n                {{ 'order.note-only-visible-to-administrators' | translate }}\r\n            </span>\r\n            <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n                {{ 'order.note-visible-to-customer' | translate }}\r\n            </span>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <ng-container *ngFor=\"let entry of history\">\r\n        <vdr-order-history-entry-host\r\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\r\n            [order]=\"order\"\r\n            [entry]=\"entry\"\r\n            [expanded]=\"expanded\"\r\n            (expandClick)=\"expanded = !expanded\"\r\n        ></vdr-order-history-entry-host>\r\n        <ng-template #defaultComponents>\r\n            <vdr-timeline-entry\r\n                [displayType]=\"getDisplayType(entry)\"\r\n                [iconShape]=\"getTimelineIcon(entry)\"\r\n                [createdAt]=\"entry.createdAt\"\r\n                [name]=\"getName(entry)\"\r\n                [featured]=\"isFeatured(entry)\"\r\n                [collapsed]=\"!expanded && !isFeatured(entry)\"\r\n                (expandClick)=\"expanded = !expanded\"\r\n            >\r\n                <ng-container [ngSwitch]=\"entry.type\">\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_STATE_TRANSITION\">\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            {{ 'order.history-order-fulfilled' | translate }}\r\n                        </div>\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Cancelled'\">\r\n                            {{ 'order.history-order-cancelled' | translate }}\r\n                        </div>\r\n                        <ng-template [ngIf]=\"entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'\">\r\n                            {{\r\n                                'order.history-order-transition'\r\n                                    | translate: { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_MODIFIED\">\r\n                        <div class=\"title\">\r\n                            {{ 'order.history-order-modified' | translate }}\r\n                        </div>\r\n                        <ng-container *ngIf=\"getModification(entry.data.modificationId) as modification\">\r\n                            {{ 'order.modify-order-price-difference' | translate }}:\r\n                            <strong>{{\r\n                                modification.priceChange | localeCurrency: order.currencyCode\r\n                            }}</strong>\r\n                            <vdr-chip colorType=\"success\" *ngIf=\"modification.isSettled\">{{\r\n                                'order.modification-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-chip colorType=\"error\" *ngIf=\"!modification.isSettled\">{{\r\n                                'order.modification-not-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-modification-detail\r\n                                    [order]=\"order\"\r\n                                    [modification]=\"modification\"\r\n                                ></vdr-modification-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_PAYMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularPaymentTransition\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-payment-settled' | translate }}\r\n                            </div>\r\n                            {{ 'order.transaction-id' | translate }}: {{ getPayment(entry)?.transactionId }}\r\n                            <vdr-history-entry-detail *ngIf=\"getPayment(entry) as payment\">\r\n                                <vdr-payment-detail\r\n                                    [payment]=\"payment\"\r\n                                    [currencyCode]=\"order.currencyCode\"\r\n                                ></vdr-payment-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </ng-container>\r\n                        <ng-template #regularPaymentTransition>\r\n                            {{\r\n                                'order.history-payment-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: getPayment(entry)?.transactionId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_REFUND_TRANSITION\">\r\n                        {{\r\n                            'order.history-refund-transition'\r\n                                | translate\r\n                                    : { from: entry.data.from, to: entry.data.to, id: entry.data.refundId }\r\n                        }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CANCELLATION\">\r\n                        {{\r\n                            'order.history-items-cancelled'\r\n                                | translate: { count: getCancelledQuantity(entry) }\r\n                        }}\r\n                        <vdr-history-entry-detail *ngIf=\"getCancelledItems(entry) as items\">\r\n                            <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                {{ entry.data.reason }}\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.shipping-cancelled' | translate\">\r\n                                {{ entry.data.shippingCancelled }}\r\n                            </vdr-labeled-data>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT\">\r\n                        {{ 'order.history-fulfillment-created' | translate }}\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-delivered' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to === 'Shipped'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-shipped' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'\">\r\n                            {{\r\n                                'order.history-fulfillment-transition'\r\n                                    | translate: { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-container>\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_NOTE\">\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                <span *ngIf=\"entry.isPublic\" class=\"note-visibility public\">{{\r\n                                    'common.public' | translate\r\n                                }}</span>\r\n                                <span *ngIf=\"!entry.isPublic\" class=\"note-visibility private\">{{\r\n                                    'common.private' | translate\r\n                                }}</span>\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-dropdown>\r\n                                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                                </button>\r\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"updateNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"edit\"></clr-icon>\r\n                                        {{ 'common.edit' | translate }}\r\n                                    </button>\r\n                                    <div class=\"dropdown-divider\"></div>\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"deleteNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                        {{ 'common.delete' | translate }}\r\n                                    </button>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_APPLIED\">\r\n                        {{ 'order.history-coupon-code-applied' | translate }}:\r\n                        <vdr-chip>\r\n                            <a [routerLink]=\"['/marketing', 'promotions', entry.data.promotionId]\">{{\r\n                                entry.data.couponCode\r\n                            }}</a>\r\n                        </vdr-chip>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_REMOVED\">\r\n                        {{ 'order.history-coupon-code-removed' | translate }}:\r\n                        <vdr-chip\r\n                            ><span class=\"cancelled-coupon-code\">{{ entry.data.couponCode }}</span></vdr-chip\r\n                        >\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"title\">\r\n                            {{ entry.type | translate }}\r\n                        </div>\r\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\r\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </vdr-timeline-entry>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <vdr-timeline-entry [isLast]=\"true\" [createdAt]=\"order.createdAt\" [featured]=\"true\">\r\n        <div class=\"title\">\r\n            {{ 'order.history-order-created' | translate }}\r\n        </div>\r\n    </vdr-timeline-entry>\r\n</div>\r\n", styles: [":host{display:block}.entry-list{margin-left: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-right:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-700)}.note-visibility.private{color:var(--color-success-700)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1$1.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: i1.TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: ["displayType", "createdAt", "name", "featured", "iconShape", "isLast", "collapsed"], outputs: ["expandClick"] }, { kind: "component", type: i1.HistoryEntryDetailComponent, selector: "vdr-history-entry-detail" }, { kind: "component", type: FulfillmentDetailComponent, selector: "vdr-fulfillment-detail", inputs: ["fulfillmentId", "order"] }, { kind: "component", type: PaymentDetailComponent, selector: "vdr-payment-detail", inputs: ["payment", "currencyCode"] }, { kind: "component", type: SimpleItemListComponent, selector: "vdr-simple-item-list", inputs: ["items"] }, { kind: "component", type: ModificationDetailComponent, selector: "vdr-modification-detail", inputs: ["order", "modification"] }, { kind: "component", type: OrderHistoryEntryHostComponent, selector: "vdr-order-history-entry-host", inputs: ["entry", "order", "expanded"], outputs: ["expandClick"], exportAs: ["historyEntry"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: OrderHistoryComponent, selector: "vdr-order-history", inputs: { order: "order", history: "history" }, outputs: { addNote: "addNote", updateNote: "updateNote", deleteNote: "deleteNote" }, ngImport: i0, template: "<div class=\"entry-list\" [class.expanded]=\"expanded\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\">\r\n        <div class=\"note-entry\">\r\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToOrder()\">\r\n                {{ 'common.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"visibility-select\">\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n                <label>{{ 'order.note-is-private' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n                {{ 'order.note-only-visible-to-administrators' | translate }}\r\n            </span>\r\n            <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n                {{ 'order.note-visible-to-customer' | translate }}\r\n            </span>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <ng-container *ngFor=\"let entry of history\">\r\n        <vdr-order-history-entry-host\r\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\r\n            [order]=\"order\"\r\n            [entry]=\"entry\"\r\n            [expanded]=\"expanded\"\r\n            (expandClick)=\"expanded = !expanded\"\r\n        ></vdr-order-history-entry-host>\r\n        <ng-template #defaultComponents>\r\n            <vdr-timeline-entry\r\n                [displayType]=\"getDisplayType(entry)\"\r\n                [iconShape]=\"getTimelineIcon(entry)\"\r\n                [createdAt]=\"entry.createdAt\"\r\n                [name]=\"getName(entry)\"\r\n                [featured]=\"isFeatured(entry)\"\r\n                [collapsed]=\"!expanded && !isFeatured(entry)\"\r\n                (expandClick)=\"expanded = !expanded\"\r\n            >\r\n                <ng-container [ngSwitch]=\"entry.type\">\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_STATE_TRANSITION\">\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            {{ 'order.history-order-fulfilled' | translate }}\r\n                        </div>\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Cancelled'\">\r\n                            {{ 'order.history-order-cancelled' | translate }}\r\n                        </div>\r\n                        <ng-template [ngIf]=\"entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'\">\r\n                            {{\r\n                                'order.history-order-transition'\r\n                                    | translate: { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_MODIFIED\">\r\n                        <div class=\"title\">\r\n                            {{ 'order.history-order-modified' | translate }}\r\n                        </div>\r\n                        <ng-container *ngIf=\"getModification(entry.data.modificationId) as modification\">\r\n                            {{ 'order.modify-order-price-difference' | translate }}:\r\n                            <strong>{{\r\n                                modification.priceChange | localeCurrency: order.currencyCode\r\n                            }}</strong>\r\n                            <vdr-chip colorType=\"success\" *ngIf=\"modification.isSettled\">{{\r\n                                'order.modification-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-chip colorType=\"error\" *ngIf=\"!modification.isSettled\">{{\r\n                                'order.modification-not-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-modification-detail\r\n                                    [order]=\"order\"\r\n                                    [modification]=\"modification\"\r\n                                ></vdr-modification-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_PAYMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularPaymentTransition\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-payment-settled' | translate }}\r\n                            </div>\r\n                            {{ 'order.transaction-id' | translate }}: {{ getPayment(entry)?.transactionId }}\r\n                            <vdr-history-entry-detail *ngIf=\"getPayment(entry) as payment\">\r\n                                <vdr-payment-detail\r\n                                    [payment]=\"payment\"\r\n                                    [currencyCode]=\"order.currencyCode\"\r\n                                ></vdr-payment-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </ng-container>\r\n                        <ng-template #regularPaymentTransition>\r\n                            {{\r\n                                'order.history-payment-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: getPayment(entry)?.transactionId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_REFUND_TRANSITION\">\r\n                        {{\r\n                            'order.history-refund-transition'\r\n                                | translate\r\n                                    : { from: entry.data.from, to: entry.data.to, id: entry.data.refundId }\r\n                        }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CANCELLATION\">\r\n                        {{\r\n                            'order.history-items-cancelled'\r\n                                | translate: { count: getCancelledQuantity(entry) }\r\n                        }}\r\n                        <vdr-history-entry-detail *ngIf=\"getCancelledItems(entry) as items\">\r\n                            <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                {{ entry.data.reason }}\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.shipping-cancelled' | translate\">\r\n                                {{ entry.data.shippingCancelled }}\r\n                            </vdr-labeled-data>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT\">\r\n                        {{ 'order.history-fulfillment-created' | translate }}\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-delivered' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to === 'Shipped'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-shipped' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'\">\r\n                            {{\r\n                                'order.history-fulfillment-transition'\r\n                                    | translate: { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-container>\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_NOTE\">\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                <span *ngIf=\"entry.isPublic\" class=\"note-visibility public\">{{\r\n                                    'common.public' | translate\r\n                                }}</span>\r\n                                <span *ngIf=\"!entry.isPublic\" class=\"note-visibility private\">{{\r\n                                    'common.private' | translate\r\n                                }}</span>\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-dropdown>\r\n                                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                                </button>\r\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"updateNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"edit\"></clr-icon>\r\n                                        {{ 'common.edit' | translate }}\r\n                                    </button>\r\n                                    <div class=\"dropdown-divider\"></div>\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"deleteNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                        {{ 'common.delete' | translate }}\r\n                                    </button>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_APPLIED\">\r\n                        {{ 'order.history-coupon-code-applied' | translate }}:\r\n                        <vdr-chip>\r\n                            <a [routerLink]=\"['/marketing', 'promotions', entry.data.promotionId]\">{{\r\n                                entry.data.couponCode\r\n                            }}</a>\r\n                        </vdr-chip>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_REMOVED\">\r\n                        {{ 'order.history-coupon-code-removed' | translate }}:\r\n                        <vdr-chip\r\n                            ><span class=\"cancelled-coupon-code\">{{ entry.data.couponCode }}</span></vdr-chip\r\n                        >\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"title\">\r\n                            {{ entry.type | translate }}\r\n                        </div>\r\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\r\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </vdr-timeline-entry>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <vdr-timeline-entry [isLast]=\"true\" [createdAt]=\"order.createdAt\" [featured]=\"true\">\r\n        <div class=\"title\">\r\n            {{ 'order.history-order-created' | translate }}\r\n        </div>\r\n    </vdr-timeline-entry>\r\n</div>\r\n", styles: [":host{display:block}.entry-list{margin-inline-start:calc(var(--space-unit) * 2)}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}.visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-700)}.visibility-select .private{color:var(--color-success-700)}textarea.note{flex:1;height:36px;border-radius:3px;margin-inline-end:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-700)}.note-visibility.private{color:var(--color-success-700)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1$1.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: i1.TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: ["displayType", "createdAt", "name", "featured", "iconShape", "isLast", "collapsed"], outputs: ["expandClick"] }, { kind: "component", type: i1.HistoryEntryDetailComponent, selector: "vdr-history-entry-detail" }, { kind: "component", type: FulfillmentDetailComponent, selector: "vdr-fulfillment-detail", inputs: ["fulfillmentId", "order"] }, { kind: "component", type: PaymentDetailComponent, selector: "vdr-payment-detail", inputs: ["payment", "currencyCode"] }, { kind: "component", type: SimpleItemListComponent, selector: "vdr-simple-item-list", inputs: ["items"] }, { kind: "component", type: ModificationDetailComponent, selector: "vdr-modification-detail", inputs: ["order", "modification"] }, { kind: "component", type: OrderHistoryEntryHostComponent, selector: "vdr-order-history-entry-host", inputs: ["entry", "order", "expanded"], outputs: ["expandClick"], exportAs: ["historyEntry"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OrderHistoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-history', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"entry-list\" [class.expanded]=\"expanded\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\">\r\n        <div class=\"note-entry\">\r\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToOrder()\">\r\n                {{ 'common.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"visibility-select\">\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n                <label>{{ 'order.note-is-private' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n                {{ 'order.note-only-visible-to-administrators' | translate }}\r\n            </span>\r\n            <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n                {{ 'order.note-visible-to-customer' | translate }}\r\n            </span>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <ng-container *ngFor=\"let entry of history\">\r\n        <vdr-order-history-entry-host\r\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\r\n            [order]=\"order\"\r\n            [entry]=\"entry\"\r\n            [expanded]=\"expanded\"\r\n            (expandClick)=\"expanded = !expanded\"\r\n        ></vdr-order-history-entry-host>\r\n        <ng-template #defaultComponents>\r\n            <vdr-timeline-entry\r\n                [displayType]=\"getDisplayType(entry)\"\r\n                [iconShape]=\"getTimelineIcon(entry)\"\r\n                [createdAt]=\"entry.createdAt\"\r\n                [name]=\"getName(entry)\"\r\n                [featured]=\"isFeatured(entry)\"\r\n                [collapsed]=\"!expanded && !isFeatured(entry)\"\r\n                (expandClick)=\"expanded = !expanded\"\r\n            >\r\n                <ng-container [ngSwitch]=\"entry.type\">\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_STATE_TRANSITION\">\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            {{ 'order.history-order-fulfilled' | translate }}\r\n                        </div>\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Cancelled'\">\r\n                            {{ 'order.history-order-cancelled' | translate }}\r\n                        </div>\r\n                        <ng-template [ngIf]=\"entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'\">\r\n                            {{\r\n                                'order.history-order-transition'\r\n                                    | translate: { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_MODIFIED\">\r\n                        <div class=\"title\">\r\n                            {{ 'order.history-order-modified' | translate }}\r\n                        </div>\r\n                        <ng-container *ngIf=\"getModification(entry.data.modificationId) as modification\">\r\n                            {{ 'order.modify-order-price-difference' | translate }}:\r\n                            <strong>{{\r\n                                modification.priceChange | localeCurrency: order.currencyCode\r\n                            }}</strong>\r\n                            <vdr-chip colorType=\"success\" *ngIf=\"modification.isSettled\">{{\r\n                                'order.modification-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-chip colorType=\"error\" *ngIf=\"!modification.isSettled\">{{\r\n                                'order.modification-not-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-modification-detail\r\n                                    [order]=\"order\"\r\n                                    [modification]=\"modification\"\r\n                                ></vdr-modification-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_PAYMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularPaymentTransition\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-payment-settled' | translate }}\r\n                            </div>\r\n                            {{ 'order.transaction-id' | translate }}: {{ getPayment(entry)?.transactionId }}\r\n                            <vdr-history-entry-detail *ngIf=\"getPayment(entry) as payment\">\r\n                                <vdr-payment-detail\r\n                                    [payment]=\"payment\"\r\n                                    [currencyCode]=\"order.currencyCode\"\r\n                                ></vdr-payment-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </ng-container>\r\n                        <ng-template #regularPaymentTransition>\r\n                            {{\r\n                                'order.history-payment-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: getPayment(entry)?.transactionId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_REFUND_TRANSITION\">\r\n                        {{\r\n                            'order.history-refund-transition'\r\n                                | translate\r\n                                    : { from: entry.data.from, to: entry.data.to, id: entry.data.refundId }\r\n                        }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CANCELLATION\">\r\n                        {{\r\n                            'order.history-items-cancelled'\r\n                                | translate: { count: getCancelledQuantity(entry) }\r\n                        }}\r\n                        <vdr-history-entry-detail *ngIf=\"getCancelledItems(entry) as items\">\r\n                            <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                {{ entry.data.reason }}\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.shipping-cancelled' | translate\">\r\n                                {{ entry.data.shippingCancelled }}\r\n                            </vdr-labeled-data>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT\">\r\n                        {{ 'order.history-fulfillment-created' | translate }}\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-delivered' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to === 'Shipped'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-shipped' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'\">\r\n                            {{\r\n                                'order.history-fulfillment-transition'\r\n                                    | translate: { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-container>\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_NOTE\">\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                <span *ngIf=\"entry.isPublic\" class=\"note-visibility public\">{{\r\n                                    'common.public' | translate\r\n                                }}</span>\r\n                                <span *ngIf=\"!entry.isPublic\" class=\"note-visibility private\">{{\r\n                                    'common.private' | translate\r\n                                }}</span>\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-dropdown>\r\n                                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                                </button>\r\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"updateNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"edit\"></clr-icon>\r\n                                        {{ 'common.edit' | translate }}\r\n                                    </button>\r\n                                    <div class=\"dropdown-divider\"></div>\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"deleteNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                        {{ 'common.delete' | translate }}\r\n                                    </button>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_APPLIED\">\r\n                        {{ 'order.history-coupon-code-applied' | translate }}:\r\n                        <vdr-chip>\r\n                            <a [routerLink]=\"['/marketing', 'promotions', entry.data.promotionId]\">{{\r\n                                entry.data.couponCode\r\n                            }}</a>\r\n                        </vdr-chip>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_REMOVED\">\r\n                        {{ 'order.history-coupon-code-removed' | translate }}:\r\n                        <vdr-chip\r\n                            ><span class=\"cancelled-coupon-code\">{{ entry.data.couponCode }}</span></vdr-chip\r\n                        >\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"title\">\r\n                            {{ entry.type | translate }}\r\n                        </div>\r\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\r\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </vdr-timeline-entry>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <vdr-timeline-entry [isLast]=\"true\" [createdAt]=\"order.createdAt\" [featured]=\"true\">\r\n        <div class=\"title\">\r\n            {{ 'order.history-order-created' | translate }}\r\n        </div>\r\n    </vdr-timeline-entry>\r\n</div>\r\n", styles: [":host{display:block}.entry-list{margin-left: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-right:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-700)}.note-visibility.private{color:var(--color-success-700)}\n"] }]
+            args: [{ selector: 'vdr-order-history', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"entry-list\" [class.expanded]=\"expanded\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\">\r\n        <div class=\"note-entry\">\r\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToOrder()\">\r\n                {{ 'common.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"visibility-select\">\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n                <label>{{ 'order.note-is-private' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n                {{ 'order.note-only-visible-to-administrators' | translate }}\r\n            </span>\r\n            <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n                {{ 'order.note-visible-to-customer' | translate }}\r\n            </span>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <ng-container *ngFor=\"let entry of history\">\r\n        <vdr-order-history-entry-host\r\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\r\n            [order]=\"order\"\r\n            [entry]=\"entry\"\r\n            [expanded]=\"expanded\"\r\n            (expandClick)=\"expanded = !expanded\"\r\n        ></vdr-order-history-entry-host>\r\n        <ng-template #defaultComponents>\r\n            <vdr-timeline-entry\r\n                [displayType]=\"getDisplayType(entry)\"\r\n                [iconShape]=\"getTimelineIcon(entry)\"\r\n                [createdAt]=\"entry.createdAt\"\r\n                [name]=\"getName(entry)\"\r\n                [featured]=\"isFeatured(entry)\"\r\n                [collapsed]=\"!expanded && !isFeatured(entry)\"\r\n                (expandClick)=\"expanded = !expanded\"\r\n            >\r\n                <ng-container [ngSwitch]=\"entry.type\">\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_STATE_TRANSITION\">\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            {{ 'order.history-order-fulfilled' | translate }}\r\n                        </div>\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Cancelled'\">\r\n                            {{ 'order.history-order-cancelled' | translate }}\r\n                        </div>\r\n                        <ng-template [ngIf]=\"entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'\">\r\n                            {{\r\n                                'order.history-order-transition'\r\n                                    | translate: { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_MODIFIED\">\r\n                        <div class=\"title\">\r\n                            {{ 'order.history-order-modified' | translate }}\r\n                        </div>\r\n                        <ng-container *ngIf=\"getModification(entry.data.modificationId) as modification\">\r\n                            {{ 'order.modify-order-price-difference' | translate }}:\r\n                            <strong>{{\r\n                                modification.priceChange | localeCurrency: order.currencyCode\r\n                            }}</strong>\r\n                            <vdr-chip colorType=\"success\" *ngIf=\"modification.isSettled\">{{\r\n                                'order.modification-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-chip colorType=\"error\" *ngIf=\"!modification.isSettled\">{{\r\n                                'order.modification-not-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-modification-detail\r\n                                    [order]=\"order\"\r\n                                    [modification]=\"modification\"\r\n                                ></vdr-modification-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_PAYMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularPaymentTransition\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-payment-settled' | translate }}\r\n                            </div>\r\n                            {{ 'order.transaction-id' | translate }}: {{ getPayment(entry)?.transactionId }}\r\n                            <vdr-history-entry-detail *ngIf=\"getPayment(entry) as payment\">\r\n                                <vdr-payment-detail\r\n                                    [payment]=\"payment\"\r\n                                    [currencyCode]=\"order.currencyCode\"\r\n                                ></vdr-payment-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </ng-container>\r\n                        <ng-template #regularPaymentTransition>\r\n                            {{\r\n                                'order.history-payment-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: getPayment(entry)?.transactionId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_REFUND_TRANSITION\">\r\n                        {{\r\n                            'order.history-refund-transition'\r\n                                | translate\r\n                                    : { from: entry.data.from, to: entry.data.to, id: entry.data.refundId }\r\n                        }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CANCELLATION\">\r\n                        {{\r\n                            'order.history-items-cancelled'\r\n                                | translate: { count: getCancelledQuantity(entry) }\r\n                        }}\r\n                        <vdr-history-entry-detail *ngIf=\"getCancelledItems(entry) as items\">\r\n                            <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                {{ entry.data.reason }}\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.shipping-cancelled' | translate\">\r\n                                {{ entry.data.shippingCancelled }}\r\n                            </vdr-labeled-data>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT\">\r\n                        {{ 'order.history-fulfillment-created' | translate }}\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-delivered' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to === 'Shipped'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-shipped' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'\">\r\n                            {{\r\n                                'order.history-fulfillment-transition'\r\n                                    | translate: { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-container>\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_NOTE\">\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                <span *ngIf=\"entry.isPublic\" class=\"note-visibility public\">{{\r\n                                    'common.public' | translate\r\n                                }}</span>\r\n                                <span *ngIf=\"!entry.isPublic\" class=\"note-visibility private\">{{\r\n                                    'common.private' | translate\r\n                                }}</span>\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-dropdown>\r\n                                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                                </button>\r\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"updateNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"edit\"></clr-icon>\r\n                                        {{ 'common.edit' | translate }}\r\n                                    </button>\r\n                                    <div class=\"dropdown-divider\"></div>\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"deleteNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                        {{ 'common.delete' | translate }}\r\n                                    </button>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_APPLIED\">\r\n                        {{ 'order.history-coupon-code-applied' | translate }}:\r\n                        <vdr-chip>\r\n                            <a [routerLink]=\"['/marketing', 'promotions', entry.data.promotionId]\">{{\r\n                                entry.data.couponCode\r\n                            }}</a>\r\n                        </vdr-chip>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_REMOVED\">\r\n                        {{ 'order.history-coupon-code-removed' | translate }}:\r\n                        <vdr-chip\r\n                            ><span class=\"cancelled-coupon-code\">{{ entry.data.couponCode }}</span></vdr-chip\r\n                        >\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"title\">\r\n                            {{ entry.type | translate }}\r\n                        </div>\r\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\r\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </vdr-timeline-entry>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <vdr-timeline-entry [isLast]=\"true\" [createdAt]=\"order.createdAt\" [featured]=\"true\">\r\n        <div class=\"title\">\r\n            {{ 'order.history-order-created' | translate }}\r\n        </div>\r\n    </vdr-timeline-entry>\r\n</div>\r\n", styles: [":host{display:block}.entry-list{margin-inline-start:calc(var(--space-unit) * 2)}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}.visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-700)}.visibility-select .private{color:var(--color-success-700)}textarea.note{flex:1;height:36px;border-radius:3px;margin-inline-end:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-700)}.note-visibility.private{color:var(--color-success-700)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.HistoryEntryComponentService }]; }, propDecorators: { order: [{
                 type: Input
             }], history: [{
@@ -2818,11 +2818,11 @@ class OrderEditorComponent extends BaseDetailComponent {
         /* not used */
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OrderEditorComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: i1.ServerConfigService }, { token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: OrderTransitionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: OrderEditorComponent, selector: "vdr-order-editor", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-align-items-center\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\r\n                {{ 'order.cancel-modification' | translate }}\r\n            </button>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-block>\r\n    <div *ngIf=\"entity$ | async as order\">\r\n        <div class=\"clr-row\">\r\n            <div class=\"clr-col-lg-8\">\r\n                <table class=\"order-table table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th></th>\r\n                            <th>{{ 'order.product-name' | translate }}</th>\r\n                            <th>{{ 'order.product-sku' | translate }}</th>\r\n                            <th>{{ 'order.unit-price' | translate }}</th>\r\n                            <th>{{ 'order.quantity' | translate }}</th>\r\n                            <th *ngIf=\"orderLineCustomFields.length\">\r\n                                {{ 'common.custom-fields' | translate }}\r\n                            </th>\r\n                            <th>{{ 'order.total' | translate }}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr\r\n                            *ngFor=\"let line of order.lines; let i = index\"\r\n                            class=\"order-line\"\r\n                            [class.is-cancelled]=\"line.quantity === 0\"\r\n                            [class.modified]=\"isLineModified(line)\"\r\n                        >\r\n                            <td class=\"align-middle thumb\">\r\n                                <img\r\n                                    *ngIf=\"line.featuredAsset\"\r\n                                    [src]=\"line.featuredAsset | assetPreview : 'tiny'\"\r\n                                />\r\n                            </td>\r\n                            <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                            <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                            <td class=\"align-middle unit-price\">\r\n                                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ line.unitPrice | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                            <td class=\"align-middle quantity\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    min=\"0\"\r\n                                    [value]=\"line.quantity\"\r\n                                    (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n                                />\r\n                                <vdr-line-refunds\r\n                                    [line]=\"line\"\r\n                                    [payments]=\"order.payments\"\r\n                                ></vdr-line-refunds>\r\n                                <vdr-line-fulfillment\r\n                                    [line]=\"line\"\r\n                                    [allOrderFulfillments]=\"order.fulfillments\"\r\n                                    [orderState]=\"order.state\"\r\n                                ></vdr-line-fulfillment>\r\n                            </td>\r\n                            <td\r\n                                *ngIf=\"orderLineCustomFields.length\"\r\n                                class=\"order-line-custom-field align-middle\"\r\n                            >\r\n                                <vdr-tabbed-custom-fields\r\n                                    entityName=\"OrderLine\"\r\n                                    [customFields]=\"orderLineCustomFields\"\r\n                                    [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.get([i])\"\r\n                                    [compact]=\"true\"\r\n                                ></vdr-tabbed-custom-fields>\r\n                            </td>\r\n                            <td class=\"align-middle total\">\r\n                                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ line.linePrice | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                        <tr\r\n                            *ngFor=\"\r\n                                let addedLine of addedLines;\r\n                                trackBy: trackByProductVariantId;\r\n                                let i = index\r\n                            \"\r\n                            class=\"modified\"\r\n                        >\r\n                            <td class=\"align-middle thumb\">\r\n                                <img\r\n                                    *ngIf=\"addedLine.productAsset\"\r\n                                    [src]=\"addedLine.productAsset | assetPreview : 'tiny'\"\r\n                                />\r\n                            </td>\r\n                            <td class=\"align-middle name\">{{ addedLine.productVariantName }}</td>\r\n                            <td class=\"align-middle sku\">{{ addedLine.sku }}</td>\r\n                            <td class=\"align-middle unit-price\">\r\n                                {{ addedLine.priceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ addedLine.price | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                            <td class=\"align-middle quantity\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    min=\"0\"\r\n                                    [value]=\"addedLine.quantity\"\r\n                                    (input)=\"updateAddedItemQuantity(addedLine, $event.target.value)\"\r\n                                />\r\n                                <button class=\"icon-button\" (click)=\"removeAddedItem(i)\">\r\n                                    <clr-icon shape=\"trash\"></clr-icon>\r\n                                </button>\r\n                            </td>\r\n                            <td\r\n                                *ngIf=\"orderLineCustomFields.length\"\r\n                                class=\"order-line-custom-field align-middle\"\r\n                            >\r\n                                <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                                    <vdr-custom-field-control\r\n                                        [customField]=\"customField\"\r\n                                        [customFieldsFormGroup]=\"addItemCustomFieldsFormArray.get([i])\"\r\n                                        entityName=\"OrderLine\"\r\n                                        [compact]=\"true\"\r\n                                    ></vdr-custom-field-control>\r\n                                </ng-container>\r\n                            </td>\r\n                            <td class=\"align-middle total\">\r\n                                {{\r\n                                    (addedLine.priceWithTax * addedLine.quantity) / 100\r\n                                        | currency : order.currencyCode\r\n                                }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{\r\n                                        (addedLine.price * addedLine.quantity) / 100\r\n                                            | currency : order.currencyCode\r\n                                    }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                        <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n                            <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n                            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                            <td class=\"align-middle\"></td>\r\n                            <td></td>\r\n                            <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                            <td class=\"align-middle total\">\r\n                                {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ surcharge.price | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                        <tr\r\n                            class=\"surcharge modified\"\r\n                            *ngFor=\"let surcharge of modifyOrderInput.surcharges; let i = index\"\r\n                        >\r\n                            <td class=\"align-middle name left\" colspan=\"2\">\r\n                                {{ surcharge.description }}\r\n                                <button class=\"icon-button\" (click)=\"removeSurcharge(i)\">\r\n                                    <clr-icon shape=\"trash\"></clr-icon>\r\n                                </button>\r\n                            </td>\r\n                            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                            <td class=\"align-middle\"></td>\r\n                            <td></td>\r\n                            <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                            <td class=\"align-middle total\">\r\n                                <ng-container *ngIf=\"getSurchargePrices(surcharge) as surchargePrice\">\r\n                                    {{ surchargePrice.priceWithTax | localeCurrency : order.currencyCode }}\r\n                                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                        {{ surchargePrice.price | localeCurrency : order.currencyCode }}\r\n                                    </div>\r\n                                </ng-container>\r\n                            </td>\r\n                        </tr>\r\n                        <tr class=\"shipping\">\r\n                            <td class=\"left clr-align-middle\">{{ 'order.shipping' | translate }}</td>\r\n                            <td class=\"clr-align-middle\">\r\n                                {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n                            </td>\r\n                            <td colspan=\"3\"></td>\r\n                            <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                            <td class=\"clr-align-middle\">\r\n                                {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ order.shipping | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n\r\n                <h4 class=\"mb-2\">{{ 'order.modifications' | translate }}</h4>\r\n                <clr-accordion>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{ 'order.add-item-to-order' | translate }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-product-variant-selector\r\n                                class=\"mb-4\"\r\n                                (productSelected)=\"addItemSelectedVariant = $event\"\r\n                            >\r\n                            </vdr-product-variant-selector>\r\n                            <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb-4\">\r\n                                <img\r\n                                    *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n                                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                                    class=\"mr-4 add-item-thumb\"\r\n                                />\r\n                                <div>\r\n                                    <strong class=\"mr-4\">{{\r\n                                        addItemSelectedVariant.productVariantName\r\n                                    }}</strong>\r\n                                    <small>{{ addItemSelectedVariant.sku }}</small>\r\n                                    <div>\r\n                                        {{\r\n                                            getSelectedItemPrice(addItemSelectedVariant)\r\n                                                | localeCurrency : order.currencyCode\r\n                                        }}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                                <vdr-custom-field-control\r\n                                    [readonly]=\"!addItemSelectedVariant\"\r\n                                    [customField]=\"customField\"\r\n                                    [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n                                    entityName=\"OrderLine\"\r\n                                    [compact]=\"true\"\r\n                                ></vdr-custom-field-control>\r\n                            </ng-container>\r\n                            <button\r\n                                class=\"btn btn-secondary\"\r\n                                [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\r\n                                (click)=\"addItemToOrder(addItemSelectedVariant)\"\r\n                            >\r\n                                {{ 'order.add-item-to-order' | translate }}\r\n                            </button>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{ 'order.set-coupon-codes' | translate }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-coupon-code-selector\r\n                                [control]=\"couponCodesControl\"\r\n                            ></vdr-coupon-code-selector>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{ 'order.add-surcharge' | translate }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n                                <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\r\n                                    ><input id=\"description\" type=\"text\" formControlName=\"description\"\r\n                                /></vdr-form-field>\r\n                                <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\r\n                                    ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\r\n                                /></vdr-form-field>\r\n                                <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\r\n                                    <vdr-currency-input\r\n                                        [currencyCode]=\"order.currencyCode\"\r\n                                        id=\"price\"\r\n                                        formControlName=\"price\"\r\n                                    ></vdr-currency-input>\r\n                                </vdr-form-field>\r\n                                <vdr-form-field\r\n                                    [label]=\"\r\n                                        'catalog.price-includes-tax-at'\r\n                                            | translate : { rate: surchargeForm.get('taxRate')?.value }\r\n                                    \"\r\n                                    for=\"priceIncludesTax\"\r\n                                    ><input\r\n                                        id=\"priceIncludesTax\"\r\n                                        type=\"checkbox\"\r\n                                        clrCheckbox\r\n                                        formControlName=\"priceIncludesTax\"\r\n                                /></vdr-form-field>\r\n                                <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\r\n                                    <vdr-affixed-input suffix=\"%\"\r\n                                        ><input\r\n                                            id=\"taxRate\"\r\n                                            type=\"number\"\r\n                                            min=\"0\"\r\n                                            max=\"100\"\r\n                                            formControlName=\"taxRate\"\r\n                                    /></vdr-affixed-input>\r\n                                </vdr-form-field>\r\n                                <vdr-form-field\r\n                                    [label]=\"'order.tax-description' | translate\"\r\n                                    for=\"taxDescription\"\r\n                                    ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\r\n                                /></vdr-form-field>\r\n                                <button\r\n                                    class=\"btn btn-secondary\"\r\n                                    [disabled]=\"\r\n                                        surchargeForm.invalid ||\r\n                                        surchargeForm.pristine ||\r\n                                        surchargeForm.get('price')?.value === 0\r\n                                    \"\r\n                                >\r\n                                    {{ 'order.add-surcharge' | translate }}\r\n                                </button>\r\n                            </form>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{\r\n                            'order.edit-shipping-address' | translate\r\n                        }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-address-form\r\n                                [formGroup]=\"shippingAddressForm\"\r\n                                [availableCountries]=\"availableCountries$ | async\"\r\n                                [customFields]=\"addressCustomFields\"\r\n                            ></vdr-address-form>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{\r\n                            'order.edit-billing-address' | translate\r\n                        }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-address-form\r\n                                [formGroup]=\"billingAddressForm\"\r\n                                [availableCountries]=\"availableCountries$ | async\"\r\n                                [customFields]=\"addressCustomFields\"\r\n                            ></vdr-address-form>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                </clr-accordion>\r\n            </div>\r\n            <div class=\"clr-col-lg-4 order-cards\">\r\n                <div class=\"card\">\r\n                    <div class=\"card-header\">\r\n                        {{ 'order.modification-summary' | translate }}\r\n                    </div>\r\n                    <div class=\"card-block\">\r\n                        <ul>\r\n                            <li *ngIf=\"modifyOrderInput.addItems?.length\">\r\n                                {{\r\n                                    'order.modification-adding-items'\r\n                                        | translate : { count: modifyOrderInput.addItems?.length }\r\n                                }}\r\n                            </li>\r\n                            <li *ngIf=\"modifyOrderInput.adjustOrderLines?.length\">\r\n                                {{\r\n                                    'order.modification-adjusting-lines'\r\n                                        | translate : { count: modifyOrderInput.adjustOrderLines?.length }\r\n                                }}\r\n                            </li>\r\n                            <li *ngIf=\"modifyOrderInput.surcharges?.length\">\r\n                                {{\r\n                                    'order.modification-adding-surcharges'\r\n                                        | translate : { count: modifyOrderInput.surcharges?.length }\r\n                                }}\r\n                            </li>\r\n                            <li *ngIf=\"shippingAddressForm.dirty\">\r\n                                {{ 'order.modification-updating-shipping-address' | translate }}\r\n                            </li>\r\n                            <li *ngIf=\"billingAddressForm.dirty\">\r\n                                {{ 'order.modification-updating-billing-address' | translate }}\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                    <div class=\"card-block\">\r\n                        <label class=\"clr-control-label\">{{ 'order.note' | translate }}</label>\r\n                        <textarea [(ngModel)]=\"note\" name=\"note\" clrTextarea required></textarea>\r\n                        <clr-checkbox-wrapper class=\"\">\r\n                            <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"recalculateShipping\" />\r\n                            <label>{{ 'order.modification-recalculate-shipping' | translate }}</label>\r\n                        </clr-checkbox-wrapper>\r\n                    </div>\r\n                    <div class=\"card-footer\">\r\n                        <button\r\n                            class=\"btn btn-primary\"\r\n                            [disabled]=\"!canPreviewChanges()\"\r\n                            (click)=\"previewAndModify(order)\"\r\n                        >\r\n                            {{ 'order.preview-changes' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <vdr-page-block> </vdr-page-block\r\n></vdr-page-block>\r\n", styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table img{border-radius:var(--border-radius-img)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-right:18px}.order-table .draft-qty{max-width:48px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}.order-table .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .thumb img{width:50px;height:50px}.order-table .shipping-method-name{font-size:var(--font-size-xs);margin-right:2px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}.add-item-thumb{max-width:50px}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1$1.ÇlrDatagridDetailRegisterer, selector: "[clrIfExpanded]" }, { kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.ClrIfExpanded, selector: "[clrIfExpanded]", inputs: ["clrIfExpanded"], outputs: ["clrIfExpandedChange"] }, { kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1$1.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i1$1.ClrTextarea, selector: "[clrTextarea]" }, { kind: "component", type: i1$1.ClrAccordion, selector: "clr-accordion", inputs: ["clrAccordionMultiPanel"] }, { kind: "component", type: i1$1.ClrAccordionPanel, selector: "clr-accordion-panel", inputs: ["clrAccordionPanelDisabled", "clrAccordionPanelOpen"], outputs: ["clrAccordionPanelOpenChange"] }, { kind: "component", type: i1$1.ClrAccordionTitle, selector: "clr-accordion-title, clr-step-title" }, { kind: "component", type: i1$1.ClrAccordionContent, selector: "clr-accordion-content, clr-step-content" }, { kind: "directive", type: i1$1.ÇlrAccordionOompaLoompa, selector: "clr-accordion-panel" }, { kind: "directive", type: i1$1.ÇlrAccordionWillyWonka, selector: "clr-accordion" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "component", type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: ["couponCodes", "control"], outputs: ["addCouponCode", "removeCouponCode"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: OrderEditorComponent, selector: "vdr-order-editor", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-align-items-center\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\r\n                {{ 'order.cancel-modification' | translate }}\r\n            </button>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-block>\r\n    <div *ngIf=\"entity$ | async as order\">\r\n        <div class=\"clr-row\">\r\n            <div class=\"clr-col-lg-8\">\r\n                <table class=\"order-table table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th></th>\r\n                            <th>{{ 'order.product-name' | translate }}</th>\r\n                            <th>{{ 'order.product-sku' | translate }}</th>\r\n                            <th>{{ 'order.unit-price' | translate }}</th>\r\n                            <th>{{ 'order.quantity' | translate }}</th>\r\n                            <th *ngIf=\"orderLineCustomFields.length\">\r\n                                {{ 'common.custom-fields' | translate }}\r\n                            </th>\r\n                            <th>{{ 'order.total' | translate }}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr\r\n                            *ngFor=\"let line of order.lines; let i = index\"\r\n                            class=\"order-line\"\r\n                            [class.is-cancelled]=\"line.quantity === 0\"\r\n                            [class.modified]=\"isLineModified(line)\"\r\n                        >\r\n                            <td class=\"align-middle thumb\">\r\n                                <img\r\n                                    *ngIf=\"line.featuredAsset\"\r\n                                    [src]=\"line.featuredAsset | assetPreview : 'tiny'\"\r\n                                />\r\n                            </td>\r\n                            <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                            <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                            <td class=\"align-middle unit-price\">\r\n                                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ line.unitPrice | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                            <td class=\"align-middle quantity\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    min=\"0\"\r\n                                    [value]=\"line.quantity\"\r\n                                    (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n                                />\r\n                                <vdr-line-refunds\r\n                                    [line]=\"line\"\r\n                                    [payments]=\"order.payments\"\r\n                                ></vdr-line-refunds>\r\n                                <vdr-line-fulfillment\r\n                                    [line]=\"line\"\r\n                                    [allOrderFulfillments]=\"order.fulfillments\"\r\n                                    [orderState]=\"order.state\"\r\n                                ></vdr-line-fulfillment>\r\n                            </td>\r\n                            <td\r\n                                *ngIf=\"orderLineCustomFields.length\"\r\n                                class=\"order-line-custom-field align-middle\"\r\n                            >\r\n                                <vdr-tabbed-custom-fields\r\n                                    entityName=\"OrderLine\"\r\n                                    [customFields]=\"orderLineCustomFields\"\r\n                                    [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.get([i])\"\r\n                                    [compact]=\"true\"\r\n                                ></vdr-tabbed-custom-fields>\r\n                            </td>\r\n                            <td class=\"align-middle total\">\r\n                                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ line.linePrice | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                        <tr\r\n                            *ngFor=\"\r\n                                let addedLine of addedLines;\r\n                                trackBy: trackByProductVariantId;\r\n                                let i = index\r\n                            \"\r\n                            class=\"modified\"\r\n                        >\r\n                            <td class=\"align-middle thumb\">\r\n                                <img\r\n                                    *ngIf=\"addedLine.productAsset\"\r\n                                    [src]=\"addedLine.productAsset | assetPreview : 'tiny'\"\r\n                                />\r\n                            </td>\r\n                            <td class=\"align-middle name\">{{ addedLine.productVariantName }}</td>\r\n                            <td class=\"align-middle sku\">{{ addedLine.sku }}</td>\r\n                            <td class=\"align-middle unit-price\">\r\n                                {{ addedLine.priceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ addedLine.price | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                            <td class=\"align-middle quantity\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    min=\"0\"\r\n                                    [value]=\"addedLine.quantity\"\r\n                                    (input)=\"updateAddedItemQuantity(addedLine, $event.target.value)\"\r\n                                />\r\n                                <button class=\"icon-button\" (click)=\"removeAddedItem(i)\">\r\n                                    <clr-icon shape=\"trash\"></clr-icon>\r\n                                </button>\r\n                            </td>\r\n                            <td\r\n                                *ngIf=\"orderLineCustomFields.length\"\r\n                                class=\"order-line-custom-field align-middle\"\r\n                            >\r\n                                <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                                    <vdr-custom-field-control\r\n                                        [customField]=\"customField\"\r\n                                        [customFieldsFormGroup]=\"addItemCustomFieldsFormArray.get([i])\"\r\n                                        entityName=\"OrderLine\"\r\n                                        [compact]=\"true\"\r\n                                    ></vdr-custom-field-control>\r\n                                </ng-container>\r\n                            </td>\r\n                            <td class=\"align-middle total\">\r\n                                {{\r\n                                    (addedLine.priceWithTax * addedLine.quantity) / 100\r\n                                        | currency : order.currencyCode\r\n                                }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{\r\n                                        (addedLine.price * addedLine.quantity) / 100\r\n                                            | currency : order.currencyCode\r\n                                    }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                        <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n                            <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n                            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                            <td class=\"align-middle\"></td>\r\n                            <td></td>\r\n                            <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                            <td class=\"align-middle total\">\r\n                                {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ surcharge.price | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                        <tr\r\n                            class=\"surcharge modified\"\r\n                            *ngFor=\"let surcharge of modifyOrderInput.surcharges; let i = index\"\r\n                        >\r\n                            <td class=\"align-middle name left\" colspan=\"2\">\r\n                                {{ surcharge.description }}\r\n                                <button class=\"icon-button\" (click)=\"removeSurcharge(i)\">\r\n                                    <clr-icon shape=\"trash\"></clr-icon>\r\n                                </button>\r\n                            </td>\r\n                            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                            <td class=\"align-middle\"></td>\r\n                            <td></td>\r\n                            <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                            <td class=\"align-middle total\">\r\n                                <ng-container *ngIf=\"getSurchargePrices(surcharge) as surchargePrice\">\r\n                                    {{ surchargePrice.priceWithTax | localeCurrency : order.currencyCode }}\r\n                                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                        {{ surchargePrice.price | localeCurrency : order.currencyCode }}\r\n                                    </div>\r\n                                </ng-container>\r\n                            </td>\r\n                        </tr>\r\n                        <tr class=\"shipping\">\r\n                            <td class=\"left clr-align-middle\">{{ 'order.shipping' | translate }}</td>\r\n                            <td class=\"clr-align-middle\">\r\n                                {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n                            </td>\r\n                            <td colspan=\"3\"></td>\r\n                            <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                            <td class=\"clr-align-middle\">\r\n                                {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ order.shipping | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n\r\n                <h4 class=\"mb-2\">{{ 'order.modifications' | translate }}</h4>\r\n                <clr-accordion>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{ 'order.add-item-to-order' | translate }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-product-variant-selector\r\n                                class=\"mb-4\"\r\n                                (productSelected)=\"addItemSelectedVariant = $event\"\r\n                            >\r\n                            </vdr-product-variant-selector>\r\n                            <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb-4\">\r\n                                <img\r\n                                    *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n                                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                                    class=\"mr-4 add-item-thumb\"\r\n                                />\r\n                                <div>\r\n                                    <strong class=\"mr-4\">{{\r\n                                        addItemSelectedVariant.productVariantName\r\n                                    }}</strong>\r\n                                    <small>{{ addItemSelectedVariant.sku }}</small>\r\n                                    <div>\r\n                                        {{\r\n                                            getSelectedItemPrice(addItemSelectedVariant)\r\n                                                | localeCurrency : order.currencyCode\r\n                                        }}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                                <vdr-custom-field-control\r\n                                    [readonly]=\"!addItemSelectedVariant\"\r\n                                    [customField]=\"customField\"\r\n                                    [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n                                    entityName=\"OrderLine\"\r\n                                    [compact]=\"true\"\r\n                                ></vdr-custom-field-control>\r\n                            </ng-container>\r\n                            <button\r\n                                class=\"btn btn-secondary\"\r\n                                [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\r\n                                (click)=\"addItemToOrder(addItemSelectedVariant)\"\r\n                            >\r\n                                {{ 'order.add-item-to-order' | translate }}\r\n                            </button>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{ 'order.set-coupon-codes' | translate }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-coupon-code-selector\r\n                                [control]=\"couponCodesControl\"\r\n                            ></vdr-coupon-code-selector>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{ 'order.add-surcharge' | translate }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n                                <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\r\n                                    ><input id=\"description\" type=\"text\" formControlName=\"description\"\r\n                                /></vdr-form-field>\r\n                                <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\r\n                                    ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\r\n                                /></vdr-form-field>\r\n                                <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\r\n                                    <vdr-currency-input\r\n                                        [currencyCode]=\"order.currencyCode\"\r\n                                        id=\"price\"\r\n                                        formControlName=\"price\"\r\n                                    ></vdr-currency-input>\r\n                                </vdr-form-field>\r\n                                <vdr-form-field\r\n                                    [label]=\"\r\n                                        'catalog.price-includes-tax-at'\r\n                                            | translate : { rate: surchargeForm.get('taxRate')?.value }\r\n                                    \"\r\n                                    for=\"priceIncludesTax\"\r\n                                    ><input\r\n                                        id=\"priceIncludesTax\"\r\n                                        type=\"checkbox\"\r\n                                        clrCheckbox\r\n                                        formControlName=\"priceIncludesTax\"\r\n                                /></vdr-form-field>\r\n                                <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\r\n                                    <vdr-affixed-input suffix=\"%\"\r\n                                        ><input\r\n                                            id=\"taxRate\"\r\n                                            type=\"number\"\r\n                                            min=\"0\"\r\n                                            max=\"100\"\r\n                                            formControlName=\"taxRate\"\r\n                                    /></vdr-affixed-input>\r\n                                </vdr-form-field>\r\n                                <vdr-form-field\r\n                                    [label]=\"'order.tax-description' | translate\"\r\n                                    for=\"taxDescription\"\r\n                                    ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\r\n                                /></vdr-form-field>\r\n                                <button\r\n                                    class=\"btn btn-secondary\"\r\n                                    [disabled]=\"\r\n                                        surchargeForm.invalid ||\r\n                                        surchargeForm.pristine ||\r\n                                        surchargeForm.get('price')?.value === 0\r\n                                    \"\r\n                                >\r\n                                    {{ 'order.add-surcharge' | translate }}\r\n                                </button>\r\n                            </form>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{\r\n                            'order.edit-shipping-address' | translate\r\n                        }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-address-form\r\n                                [formGroup]=\"shippingAddressForm\"\r\n                                [availableCountries]=\"availableCountries$ | async\"\r\n                                [customFields]=\"addressCustomFields\"\r\n                            ></vdr-address-form>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{\r\n                            'order.edit-billing-address' | translate\r\n                        }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-address-form\r\n                                [formGroup]=\"billingAddressForm\"\r\n                                [availableCountries]=\"availableCountries$ | async\"\r\n                                [customFields]=\"addressCustomFields\"\r\n                            ></vdr-address-form>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                </clr-accordion>\r\n            </div>\r\n            <div class=\"clr-col-lg-4 order-cards\">\r\n                <div class=\"card\">\r\n                    <div class=\"card-header\">\r\n                        {{ 'order.modification-summary' | translate }}\r\n                    </div>\r\n                    <div class=\"card-block\">\r\n                        <ul>\r\n                            <li *ngIf=\"modifyOrderInput.addItems?.length\">\r\n                                {{\r\n                                    'order.modification-adding-items'\r\n                                        | translate : { count: modifyOrderInput.addItems?.length }\r\n                                }}\r\n                            </li>\r\n                            <li *ngIf=\"modifyOrderInput.adjustOrderLines?.length\">\r\n                                {{\r\n                                    'order.modification-adjusting-lines'\r\n                                        | translate : { count: modifyOrderInput.adjustOrderLines?.length }\r\n                                }}\r\n                            </li>\r\n                            <li *ngIf=\"modifyOrderInput.surcharges?.length\">\r\n                                {{\r\n                                    'order.modification-adding-surcharges'\r\n                                        | translate : { count: modifyOrderInput.surcharges?.length }\r\n                                }}\r\n                            </li>\r\n                            <li *ngIf=\"shippingAddressForm.dirty\">\r\n                                {{ 'order.modification-updating-shipping-address' | translate }}\r\n                            </li>\r\n                            <li *ngIf=\"billingAddressForm.dirty\">\r\n                                {{ 'order.modification-updating-billing-address' | translate }}\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                    <div class=\"card-block\">\r\n                        <label class=\"clr-control-label\">{{ 'order.note' | translate }}</label>\r\n                        <textarea [(ngModel)]=\"note\" name=\"note\" clrTextarea required></textarea>\r\n                        <clr-checkbox-wrapper class=\"\">\r\n                            <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"recalculateShipping\" />\r\n                            <label>{{ 'order.modification-recalculate-shipping' | translate }}</label>\r\n                        </clr-checkbox-wrapper>\r\n                    </div>\r\n                    <div class=\"card-footer\">\r\n                        <button\r\n                            class=\"btn btn-primary\"\r\n                            [disabled]=\"!canPreviewChanges()\"\r\n                            (click)=\"previewAndModify(order)\"\r\n                        >\r\n                            {{ 'order.preview-changes' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <vdr-page-block> </vdr-page-block\r\n></vdr-page-block>\r\n", styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table img{border-radius:var(--border-radius-img)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}.order-table .draft-qty{max-width:48px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}.order-table .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .thumb img{width:50px;height:50px}.order-table .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}.add-item-thumb{max-width:50px}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1$1.ÇlrDatagridDetailRegisterer, selector: "[clrIfExpanded]" }, { kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.ClrIfExpanded, selector: "[clrIfExpanded]", inputs: ["clrIfExpanded"], outputs: ["clrIfExpandedChange"] }, { kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1$1.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i1$1.ClrTextarea, selector: "[clrTextarea]" }, { kind: "component", type: i1$1.ClrAccordion, selector: "clr-accordion", inputs: ["clrAccordionMultiPanel"] }, { kind: "component", type: i1$1.ClrAccordionPanel, selector: "clr-accordion-panel", inputs: ["clrAccordionPanelDisabled", "clrAccordionPanelOpen"], outputs: ["clrAccordionPanelOpenChange"] }, { kind: "component", type: i1$1.ClrAccordionTitle, selector: "clr-accordion-title, clr-step-title" }, { kind: "component", type: i1$1.ClrAccordionContent, selector: "clr-accordion-content, clr-step-content" }, { kind: "directive", type: i1$1.ÇlrAccordionOompaLoompa, selector: "clr-accordion-panel" }, { kind: "directive", type: i1$1.ÇlrAccordionWillyWonka, selector: "clr-accordion" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "component", type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: ["couponCodes", "control"], outputs: ["addCouponCode", "removeCouponCode"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OrderEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-align-items-center\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\r\n                {{ 'order.cancel-modification' | translate }}\r\n            </button>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-block>\r\n    <div *ngIf=\"entity$ | async as order\">\r\n        <div class=\"clr-row\">\r\n            <div class=\"clr-col-lg-8\">\r\n                <table class=\"order-table table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th></th>\r\n                            <th>{{ 'order.product-name' | translate }}</th>\r\n                            <th>{{ 'order.product-sku' | translate }}</th>\r\n                            <th>{{ 'order.unit-price' | translate }}</th>\r\n                            <th>{{ 'order.quantity' | translate }}</th>\r\n                            <th *ngIf=\"orderLineCustomFields.length\">\r\n                                {{ 'common.custom-fields' | translate }}\r\n                            </th>\r\n                            <th>{{ 'order.total' | translate }}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr\r\n                            *ngFor=\"let line of order.lines; let i = index\"\r\n                            class=\"order-line\"\r\n                            [class.is-cancelled]=\"line.quantity === 0\"\r\n                            [class.modified]=\"isLineModified(line)\"\r\n                        >\r\n                            <td class=\"align-middle thumb\">\r\n                                <img\r\n                                    *ngIf=\"line.featuredAsset\"\r\n                                    [src]=\"line.featuredAsset | assetPreview : 'tiny'\"\r\n                                />\r\n                            </td>\r\n                            <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                            <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                            <td class=\"align-middle unit-price\">\r\n                                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ line.unitPrice | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                            <td class=\"align-middle quantity\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    min=\"0\"\r\n                                    [value]=\"line.quantity\"\r\n                                    (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n                                />\r\n                                <vdr-line-refunds\r\n                                    [line]=\"line\"\r\n                                    [payments]=\"order.payments\"\r\n                                ></vdr-line-refunds>\r\n                                <vdr-line-fulfillment\r\n                                    [line]=\"line\"\r\n                                    [allOrderFulfillments]=\"order.fulfillments\"\r\n                                    [orderState]=\"order.state\"\r\n                                ></vdr-line-fulfillment>\r\n                            </td>\r\n                            <td\r\n                                *ngIf=\"orderLineCustomFields.length\"\r\n                                class=\"order-line-custom-field align-middle\"\r\n                            >\r\n                                <vdr-tabbed-custom-fields\r\n                                    entityName=\"OrderLine\"\r\n                                    [customFields]=\"orderLineCustomFields\"\r\n                                    [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.get([i])\"\r\n                                    [compact]=\"true\"\r\n                                ></vdr-tabbed-custom-fields>\r\n                            </td>\r\n                            <td class=\"align-middle total\">\r\n                                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ line.linePrice | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                        <tr\r\n                            *ngFor=\"\r\n                                let addedLine of addedLines;\r\n                                trackBy: trackByProductVariantId;\r\n                                let i = index\r\n                            \"\r\n                            class=\"modified\"\r\n                        >\r\n                            <td class=\"align-middle thumb\">\r\n                                <img\r\n                                    *ngIf=\"addedLine.productAsset\"\r\n                                    [src]=\"addedLine.productAsset | assetPreview : 'tiny'\"\r\n                                />\r\n                            </td>\r\n                            <td class=\"align-middle name\">{{ addedLine.productVariantName }}</td>\r\n                            <td class=\"align-middle sku\">{{ addedLine.sku }}</td>\r\n                            <td class=\"align-middle unit-price\">\r\n                                {{ addedLine.priceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ addedLine.price | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                            <td class=\"align-middle quantity\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    min=\"0\"\r\n                                    [value]=\"addedLine.quantity\"\r\n                                    (input)=\"updateAddedItemQuantity(addedLine, $event.target.value)\"\r\n                                />\r\n                                <button class=\"icon-button\" (click)=\"removeAddedItem(i)\">\r\n                                    <clr-icon shape=\"trash\"></clr-icon>\r\n                                </button>\r\n                            </td>\r\n                            <td\r\n                                *ngIf=\"orderLineCustomFields.length\"\r\n                                class=\"order-line-custom-field align-middle\"\r\n                            >\r\n                                <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                                    <vdr-custom-field-control\r\n                                        [customField]=\"customField\"\r\n                                        [customFieldsFormGroup]=\"addItemCustomFieldsFormArray.get([i])\"\r\n                                        entityName=\"OrderLine\"\r\n                                        [compact]=\"true\"\r\n                                    ></vdr-custom-field-control>\r\n                                </ng-container>\r\n                            </td>\r\n                            <td class=\"align-middle total\">\r\n                                {{\r\n                                    (addedLine.priceWithTax * addedLine.quantity) / 100\r\n                                        | currency : order.currencyCode\r\n                                }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{\r\n                                        (addedLine.price * addedLine.quantity) / 100\r\n                                            | currency : order.currencyCode\r\n                                    }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                        <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n                            <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n                            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                            <td class=\"align-middle\"></td>\r\n                            <td></td>\r\n                            <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                            <td class=\"align-middle total\">\r\n                                {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ surcharge.price | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                        <tr\r\n                            class=\"surcharge modified\"\r\n                            *ngFor=\"let surcharge of modifyOrderInput.surcharges; let i = index\"\r\n                        >\r\n                            <td class=\"align-middle name left\" colspan=\"2\">\r\n                                {{ surcharge.description }}\r\n                                <button class=\"icon-button\" (click)=\"removeSurcharge(i)\">\r\n                                    <clr-icon shape=\"trash\"></clr-icon>\r\n                                </button>\r\n                            </td>\r\n                            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                            <td class=\"align-middle\"></td>\r\n                            <td></td>\r\n                            <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                            <td class=\"align-middle total\">\r\n                                <ng-container *ngIf=\"getSurchargePrices(surcharge) as surchargePrice\">\r\n                                    {{ surchargePrice.priceWithTax | localeCurrency : order.currencyCode }}\r\n                                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                        {{ surchargePrice.price | localeCurrency : order.currencyCode }}\r\n                                    </div>\r\n                                </ng-container>\r\n                            </td>\r\n                        </tr>\r\n                        <tr class=\"shipping\">\r\n                            <td class=\"left clr-align-middle\">{{ 'order.shipping' | translate }}</td>\r\n                            <td class=\"clr-align-middle\">\r\n                                {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n                            </td>\r\n                            <td colspan=\"3\"></td>\r\n                            <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                            <td class=\"clr-align-middle\">\r\n                                {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ order.shipping | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n\r\n                <h4 class=\"mb-2\">{{ 'order.modifications' | translate }}</h4>\r\n                <clr-accordion>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{ 'order.add-item-to-order' | translate }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-product-variant-selector\r\n                                class=\"mb-4\"\r\n                                (productSelected)=\"addItemSelectedVariant = $event\"\r\n                            >\r\n                            </vdr-product-variant-selector>\r\n                            <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb-4\">\r\n                                <img\r\n                                    *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n                                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                                    class=\"mr-4 add-item-thumb\"\r\n                                />\r\n                                <div>\r\n                                    <strong class=\"mr-4\">{{\r\n                                        addItemSelectedVariant.productVariantName\r\n                                    }}</strong>\r\n                                    <small>{{ addItemSelectedVariant.sku }}</small>\r\n                                    <div>\r\n                                        {{\r\n                                            getSelectedItemPrice(addItemSelectedVariant)\r\n                                                | localeCurrency : order.currencyCode\r\n                                        }}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                                <vdr-custom-field-control\r\n                                    [readonly]=\"!addItemSelectedVariant\"\r\n                                    [customField]=\"customField\"\r\n                                    [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n                                    entityName=\"OrderLine\"\r\n                                    [compact]=\"true\"\r\n                                ></vdr-custom-field-control>\r\n                            </ng-container>\r\n                            <button\r\n                                class=\"btn btn-secondary\"\r\n                                [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\r\n                                (click)=\"addItemToOrder(addItemSelectedVariant)\"\r\n                            >\r\n                                {{ 'order.add-item-to-order' | translate }}\r\n                            </button>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{ 'order.set-coupon-codes' | translate }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-coupon-code-selector\r\n                                [control]=\"couponCodesControl\"\r\n                            ></vdr-coupon-code-selector>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{ 'order.add-surcharge' | translate }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n                                <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\r\n                                    ><input id=\"description\" type=\"text\" formControlName=\"description\"\r\n                                /></vdr-form-field>\r\n                                <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\r\n                                    ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\r\n                                /></vdr-form-field>\r\n                                <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\r\n                                    <vdr-currency-input\r\n                                        [currencyCode]=\"order.currencyCode\"\r\n                                        id=\"price\"\r\n                                        formControlName=\"price\"\r\n                                    ></vdr-currency-input>\r\n                                </vdr-form-field>\r\n                                <vdr-form-field\r\n                                    [label]=\"\r\n                                        'catalog.price-includes-tax-at'\r\n                                            | translate : { rate: surchargeForm.get('taxRate')?.value }\r\n                                    \"\r\n                                    for=\"priceIncludesTax\"\r\n                                    ><input\r\n                                        id=\"priceIncludesTax\"\r\n                                        type=\"checkbox\"\r\n                                        clrCheckbox\r\n                                        formControlName=\"priceIncludesTax\"\r\n                                /></vdr-form-field>\r\n                                <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\r\n                                    <vdr-affixed-input suffix=\"%\"\r\n                                        ><input\r\n                                            id=\"taxRate\"\r\n                                            type=\"number\"\r\n                                            min=\"0\"\r\n                                            max=\"100\"\r\n                                            formControlName=\"taxRate\"\r\n                                    /></vdr-affixed-input>\r\n                                </vdr-form-field>\r\n                                <vdr-form-field\r\n                                    [label]=\"'order.tax-description' | translate\"\r\n                                    for=\"taxDescription\"\r\n                                    ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\r\n                                /></vdr-form-field>\r\n                                <button\r\n                                    class=\"btn btn-secondary\"\r\n                                    [disabled]=\"\r\n                                        surchargeForm.invalid ||\r\n                                        surchargeForm.pristine ||\r\n                                        surchargeForm.get('price')?.value === 0\r\n                                    \"\r\n                                >\r\n                                    {{ 'order.add-surcharge' | translate }}\r\n                                </button>\r\n                            </form>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{\r\n                            'order.edit-shipping-address' | translate\r\n                        }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-address-form\r\n                                [formGroup]=\"shippingAddressForm\"\r\n                                [availableCountries]=\"availableCountries$ | async\"\r\n                                [customFields]=\"addressCustomFields\"\r\n                            ></vdr-address-form>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{\r\n                            'order.edit-billing-address' | translate\r\n                        }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-address-form\r\n                                [formGroup]=\"billingAddressForm\"\r\n                                [availableCountries]=\"availableCountries$ | async\"\r\n                                [customFields]=\"addressCustomFields\"\r\n                            ></vdr-address-form>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                </clr-accordion>\r\n            </div>\r\n            <div class=\"clr-col-lg-4 order-cards\">\r\n                <div class=\"card\">\r\n                    <div class=\"card-header\">\r\n                        {{ 'order.modification-summary' | translate }}\r\n                    </div>\r\n                    <div class=\"card-block\">\r\n                        <ul>\r\n                            <li *ngIf=\"modifyOrderInput.addItems?.length\">\r\n                                {{\r\n                                    'order.modification-adding-items'\r\n                                        | translate : { count: modifyOrderInput.addItems?.length }\r\n                                }}\r\n                            </li>\r\n                            <li *ngIf=\"modifyOrderInput.adjustOrderLines?.length\">\r\n                                {{\r\n                                    'order.modification-adjusting-lines'\r\n                                        | translate : { count: modifyOrderInput.adjustOrderLines?.length }\r\n                                }}\r\n                            </li>\r\n                            <li *ngIf=\"modifyOrderInput.surcharges?.length\">\r\n                                {{\r\n                                    'order.modification-adding-surcharges'\r\n                                        | translate : { count: modifyOrderInput.surcharges?.length }\r\n                                }}\r\n                            </li>\r\n                            <li *ngIf=\"shippingAddressForm.dirty\">\r\n                                {{ 'order.modification-updating-shipping-address' | translate }}\r\n                            </li>\r\n                            <li *ngIf=\"billingAddressForm.dirty\">\r\n                                {{ 'order.modification-updating-billing-address' | translate }}\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                    <div class=\"card-block\">\r\n                        <label class=\"clr-control-label\">{{ 'order.note' | translate }}</label>\r\n                        <textarea [(ngModel)]=\"note\" name=\"note\" clrTextarea required></textarea>\r\n                        <clr-checkbox-wrapper class=\"\">\r\n                            <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"recalculateShipping\" />\r\n                            <label>{{ 'order.modification-recalculate-shipping' | translate }}</label>\r\n                        </clr-checkbox-wrapper>\r\n                    </div>\r\n                    <div class=\"card-footer\">\r\n                        <button\r\n                            class=\"btn btn-primary\"\r\n                            [disabled]=\"!canPreviewChanges()\"\r\n                            (click)=\"previewAndModify(order)\"\r\n                        >\r\n                            {{ 'order.preview-changes' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <vdr-page-block> </vdr-page-block\r\n></vdr-page-block>\r\n", styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table img{border-radius:var(--border-radius-img)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-right:18px}.order-table .draft-qty{max-width:48px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}.order-table .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .thumb img{width:50px;height:50px}.order-table .shipping-method-name{font-size:var(--font-size-xs);margin-right:2px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}.add-item-thumb{max-width:50px}\n"] }]
+            args: [{ selector: 'vdr-order-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-align-items-center\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\r\n                {{ 'order.cancel-modification' | translate }}\r\n            </button>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-block>\r\n    <div *ngIf=\"entity$ | async as order\">\r\n        <div class=\"clr-row\">\r\n            <div class=\"clr-col-lg-8\">\r\n                <table class=\"order-table table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th></th>\r\n                            <th>{{ 'order.product-name' | translate }}</th>\r\n                            <th>{{ 'order.product-sku' | translate }}</th>\r\n                            <th>{{ 'order.unit-price' | translate }}</th>\r\n                            <th>{{ 'order.quantity' | translate }}</th>\r\n                            <th *ngIf=\"orderLineCustomFields.length\">\r\n                                {{ 'common.custom-fields' | translate }}\r\n                            </th>\r\n                            <th>{{ 'order.total' | translate }}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr\r\n                            *ngFor=\"let line of order.lines; let i = index\"\r\n                            class=\"order-line\"\r\n                            [class.is-cancelled]=\"line.quantity === 0\"\r\n                            [class.modified]=\"isLineModified(line)\"\r\n                        >\r\n                            <td class=\"align-middle thumb\">\r\n                                <img\r\n                                    *ngIf=\"line.featuredAsset\"\r\n                                    [src]=\"line.featuredAsset | assetPreview : 'tiny'\"\r\n                                />\r\n                            </td>\r\n                            <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                            <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                            <td class=\"align-middle unit-price\">\r\n                                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ line.unitPrice | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                            <td class=\"align-middle quantity\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    min=\"0\"\r\n                                    [value]=\"line.quantity\"\r\n                                    (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n                                />\r\n                                <vdr-line-refunds\r\n                                    [line]=\"line\"\r\n                                    [payments]=\"order.payments\"\r\n                                ></vdr-line-refunds>\r\n                                <vdr-line-fulfillment\r\n                                    [line]=\"line\"\r\n                                    [allOrderFulfillments]=\"order.fulfillments\"\r\n                                    [orderState]=\"order.state\"\r\n                                ></vdr-line-fulfillment>\r\n                            </td>\r\n                            <td\r\n                                *ngIf=\"orderLineCustomFields.length\"\r\n                                class=\"order-line-custom-field align-middle\"\r\n                            >\r\n                                <vdr-tabbed-custom-fields\r\n                                    entityName=\"OrderLine\"\r\n                                    [customFields]=\"orderLineCustomFields\"\r\n                                    [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.get([i])\"\r\n                                    [compact]=\"true\"\r\n                                ></vdr-tabbed-custom-fields>\r\n                            </td>\r\n                            <td class=\"align-middle total\">\r\n                                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ line.linePrice | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                        <tr\r\n                            *ngFor=\"\r\n                                let addedLine of addedLines;\r\n                                trackBy: trackByProductVariantId;\r\n                                let i = index\r\n                            \"\r\n                            class=\"modified\"\r\n                        >\r\n                            <td class=\"align-middle thumb\">\r\n                                <img\r\n                                    *ngIf=\"addedLine.productAsset\"\r\n                                    [src]=\"addedLine.productAsset | assetPreview : 'tiny'\"\r\n                                />\r\n                            </td>\r\n                            <td class=\"align-middle name\">{{ addedLine.productVariantName }}</td>\r\n                            <td class=\"align-middle sku\">{{ addedLine.sku }}</td>\r\n                            <td class=\"align-middle unit-price\">\r\n                                {{ addedLine.priceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ addedLine.price | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                            <td class=\"align-middle quantity\">\r\n                                <input\r\n                                    type=\"number\"\r\n                                    min=\"0\"\r\n                                    [value]=\"addedLine.quantity\"\r\n                                    (input)=\"updateAddedItemQuantity(addedLine, $event.target.value)\"\r\n                                />\r\n                                <button class=\"icon-button\" (click)=\"removeAddedItem(i)\">\r\n                                    <clr-icon shape=\"trash\"></clr-icon>\r\n                                </button>\r\n                            </td>\r\n                            <td\r\n                                *ngIf=\"orderLineCustomFields.length\"\r\n                                class=\"order-line-custom-field align-middle\"\r\n                            >\r\n                                <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                                    <vdr-custom-field-control\r\n                                        [customField]=\"customField\"\r\n                                        [customFieldsFormGroup]=\"addItemCustomFieldsFormArray.get([i])\"\r\n                                        entityName=\"OrderLine\"\r\n                                        [compact]=\"true\"\r\n                                    ></vdr-custom-field-control>\r\n                                </ng-container>\r\n                            </td>\r\n                            <td class=\"align-middle total\">\r\n                                {{\r\n                                    (addedLine.priceWithTax * addedLine.quantity) / 100\r\n                                        | currency : order.currencyCode\r\n                                }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{\r\n                                        (addedLine.price * addedLine.quantity) / 100\r\n                                            | currency : order.currencyCode\r\n                                    }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                        <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n                            <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n                            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                            <td class=\"align-middle\"></td>\r\n                            <td></td>\r\n                            <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                            <td class=\"align-middle total\">\r\n                                {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ surcharge.price | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                        <tr\r\n                            class=\"surcharge modified\"\r\n                            *ngFor=\"let surcharge of modifyOrderInput.surcharges; let i = index\"\r\n                        >\r\n                            <td class=\"align-middle name left\" colspan=\"2\">\r\n                                {{ surcharge.description }}\r\n                                <button class=\"icon-button\" (click)=\"removeSurcharge(i)\">\r\n                                    <clr-icon shape=\"trash\"></clr-icon>\r\n                                </button>\r\n                            </td>\r\n                            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                            <td class=\"align-middle\"></td>\r\n                            <td></td>\r\n                            <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                            <td class=\"align-middle total\">\r\n                                <ng-container *ngIf=\"getSurchargePrices(surcharge) as surchargePrice\">\r\n                                    {{ surchargePrice.priceWithTax | localeCurrency : order.currencyCode }}\r\n                                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                        {{ surchargePrice.price | localeCurrency : order.currencyCode }}\r\n                                    </div>\r\n                                </ng-container>\r\n                            </td>\r\n                        </tr>\r\n                        <tr class=\"shipping\">\r\n                            <td class=\"left clr-align-middle\">{{ 'order.shipping' | translate }}</td>\r\n                            <td class=\"clr-align-middle\">\r\n                                {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n                            </td>\r\n                            <td colspan=\"3\"></td>\r\n                            <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                            <td class=\"clr-align-middle\">\r\n                                {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ order.shipping | localeCurrency : order.currencyCode }}\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n\r\n                <h4 class=\"mb-2\">{{ 'order.modifications' | translate }}</h4>\r\n                <clr-accordion>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{ 'order.add-item-to-order' | translate }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-product-variant-selector\r\n                                class=\"mb-4\"\r\n                                (productSelected)=\"addItemSelectedVariant = $event\"\r\n                            >\r\n                            </vdr-product-variant-selector>\r\n                            <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb-4\">\r\n                                <img\r\n                                    *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n                                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                                    class=\"mr-4 add-item-thumb\"\r\n                                />\r\n                                <div>\r\n                                    <strong class=\"mr-4\">{{\r\n                                        addItemSelectedVariant.productVariantName\r\n                                    }}</strong>\r\n                                    <small>{{ addItemSelectedVariant.sku }}</small>\r\n                                    <div>\r\n                                        {{\r\n                                            getSelectedItemPrice(addItemSelectedVariant)\r\n                                                | localeCurrency : order.currencyCode\r\n                                        }}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                                <vdr-custom-field-control\r\n                                    [readonly]=\"!addItemSelectedVariant\"\r\n                                    [customField]=\"customField\"\r\n                                    [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n                                    entityName=\"OrderLine\"\r\n                                    [compact]=\"true\"\r\n                                ></vdr-custom-field-control>\r\n                            </ng-container>\r\n                            <button\r\n                                class=\"btn btn-secondary\"\r\n                                [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\r\n                                (click)=\"addItemToOrder(addItemSelectedVariant)\"\r\n                            >\r\n                                {{ 'order.add-item-to-order' | translate }}\r\n                            </button>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{ 'order.set-coupon-codes' | translate }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-coupon-code-selector\r\n                                [control]=\"couponCodesControl\"\r\n                            ></vdr-coupon-code-selector>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{ 'order.add-surcharge' | translate }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n                                <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\r\n                                    ><input id=\"description\" type=\"text\" formControlName=\"description\"\r\n                                /></vdr-form-field>\r\n                                <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\r\n                                    ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\r\n                                /></vdr-form-field>\r\n                                <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\r\n                                    <vdr-currency-input\r\n                                        [currencyCode]=\"order.currencyCode\"\r\n                                        id=\"price\"\r\n                                        formControlName=\"price\"\r\n                                    ></vdr-currency-input>\r\n                                </vdr-form-field>\r\n                                <vdr-form-field\r\n                                    [label]=\"\r\n                                        'catalog.price-includes-tax-at'\r\n                                            | translate : { rate: surchargeForm.get('taxRate')?.value }\r\n                                    \"\r\n                                    for=\"priceIncludesTax\"\r\n                                    ><input\r\n                                        id=\"priceIncludesTax\"\r\n                                        type=\"checkbox\"\r\n                                        clrCheckbox\r\n                                        formControlName=\"priceIncludesTax\"\r\n                                /></vdr-form-field>\r\n                                <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\r\n                                    <vdr-affixed-input suffix=\"%\"\r\n                                        ><input\r\n                                            id=\"taxRate\"\r\n                                            type=\"number\"\r\n                                            min=\"0\"\r\n                                            max=\"100\"\r\n                                            formControlName=\"taxRate\"\r\n                                    /></vdr-affixed-input>\r\n                                </vdr-form-field>\r\n                                <vdr-form-field\r\n                                    [label]=\"'order.tax-description' | translate\"\r\n                                    for=\"taxDescription\"\r\n                                    ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\r\n                                /></vdr-form-field>\r\n                                <button\r\n                                    class=\"btn btn-secondary\"\r\n                                    [disabled]=\"\r\n                                        surchargeForm.invalid ||\r\n                                        surchargeForm.pristine ||\r\n                                        surchargeForm.get('price')?.value === 0\r\n                                    \"\r\n                                >\r\n                                    {{ 'order.add-surcharge' | translate }}\r\n                                </button>\r\n                            </form>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{\r\n                            'order.edit-shipping-address' | translate\r\n                        }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-address-form\r\n                                [formGroup]=\"shippingAddressForm\"\r\n                                [availableCountries]=\"availableCountries$ | async\"\r\n                                [customFields]=\"addressCustomFields\"\r\n                            ></vdr-address-form>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                    <clr-accordion-panel>\r\n                        <clr-accordion-title>{{\r\n                            'order.edit-billing-address' | translate\r\n                        }}</clr-accordion-title>\r\n                        <clr-accordion-content *clrIfExpanded>\r\n                            <vdr-address-form\r\n                                [formGroup]=\"billingAddressForm\"\r\n                                [availableCountries]=\"availableCountries$ | async\"\r\n                                [customFields]=\"addressCustomFields\"\r\n                            ></vdr-address-form>\r\n                        </clr-accordion-content>\r\n                    </clr-accordion-panel>\r\n                </clr-accordion>\r\n            </div>\r\n            <div class=\"clr-col-lg-4 order-cards\">\r\n                <div class=\"card\">\r\n                    <div class=\"card-header\">\r\n                        {{ 'order.modification-summary' | translate }}\r\n                    </div>\r\n                    <div class=\"card-block\">\r\n                        <ul>\r\n                            <li *ngIf=\"modifyOrderInput.addItems?.length\">\r\n                                {{\r\n                                    'order.modification-adding-items'\r\n                                        | translate : { count: modifyOrderInput.addItems?.length }\r\n                                }}\r\n                            </li>\r\n                            <li *ngIf=\"modifyOrderInput.adjustOrderLines?.length\">\r\n                                {{\r\n                                    'order.modification-adjusting-lines'\r\n                                        | translate : { count: modifyOrderInput.adjustOrderLines?.length }\r\n                                }}\r\n                            </li>\r\n                            <li *ngIf=\"modifyOrderInput.surcharges?.length\">\r\n                                {{\r\n                                    'order.modification-adding-surcharges'\r\n                                        | translate : { count: modifyOrderInput.surcharges?.length }\r\n                                }}\r\n                            </li>\r\n                            <li *ngIf=\"shippingAddressForm.dirty\">\r\n                                {{ 'order.modification-updating-shipping-address' | translate }}\r\n                            </li>\r\n                            <li *ngIf=\"billingAddressForm.dirty\">\r\n                                {{ 'order.modification-updating-billing-address' | translate }}\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                    <div class=\"card-block\">\r\n                        <label class=\"clr-control-label\">{{ 'order.note' | translate }}</label>\r\n                        <textarea [(ngModel)]=\"note\" name=\"note\" clrTextarea required></textarea>\r\n                        <clr-checkbox-wrapper class=\"\">\r\n                            <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"recalculateShipping\" />\r\n                            <label>{{ 'order.modification-recalculate-shipping' | translate }}</label>\r\n                        </clr-checkbox-wrapper>\r\n                    </div>\r\n                    <div class=\"card-footer\">\r\n                        <button\r\n                            class=\"btn btn-primary\"\r\n                            [disabled]=\"!canPreviewChanges()\"\r\n                            (click)=\"previewAndModify(order)\"\r\n                        >\r\n                            {{ 'order.preview-changes' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <vdr-page-block> </vdr-page-block\r\n></vdr-page-block>\r\n", styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table img{border-radius:var(--border-radius-img)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}.order-table .draft-qty{max-width:48px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}.order-table .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .thumb img{width:50px;height:50px}.order-table .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}.add-item-thumb{max-width:50px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: i1.ServerConfigService }, { type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i1.NotificationService }, { type: i1.ModalService }, { type: OrderTransitionService }]; } });
 class OrderListComponent extends TypedBaseListComponent {