@vendure/admin-ui 2.2.4 → 2.2.6

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

@@ -1739,7 +1739,7 @@ class OrderHistoryEntryHostComponent {
         (expandClick)="expandClick.emit()"
     >
         <div #portal></div>
-    </vdr-timeline-entry>`, isInline: true, dependencies: [{ kind: "component", type: i1.TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: ["displayType", "createdAt", "name", "featured", "iconShape", "isLast", "collapsed"], outputs: ["expandClick"] }] }); }
+    </vdr-timeline-entry>`, isInline: true, dependencies: [{ kind: "component", type: i1.TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: ["displayType", "createdAt", "name", "featured", "iconShape", "isFirst", "isLast", "collapsed"], outputs: ["expandClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OrderHistoryEntryHostComponent, decorators: [{
             type: Component,
@@ -1924,11 +1924,11 @@ class OrderHistoryComponent {
         this.noteIsPrivate = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OrderHistoryComponent, deps: [{ token: i1.HistoryEntryComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OrderHistoryComponent, selector: "vdr-order-history", inputs: { order: "order", history: "history" }, outputs: { addNote: "addNote", updateNote: "updateNote", deleteNote: "deleteNote" }, ngImport: i0, template: "<div class=\"entry-list\" [class.expanded]=\"expanded\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\">\r\n        <div class=\"note-entry\">\r\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToOrder()\">\r\n                {{ 'common.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"visibility-select\">\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n                <label>{{ 'order.note-is-private' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n                {{ 'order.note-only-visible-to-administrators' | translate }}\r\n            </span>\r\n            <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n                {{ 'order.note-visible-to-customer' | translate }}\r\n            </span>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <ng-container *ngFor=\"let entry of history\">\r\n        <vdr-order-history-entry-host\r\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\r\n            [order]=\"order\"\r\n            [entry]=\"entry\"\r\n            [expanded]=\"expanded\"\r\n            (expandClick)=\"expanded = !expanded\"\r\n        ></vdr-order-history-entry-host>\r\n        <ng-template #defaultComponents>\r\n            <vdr-timeline-entry\r\n                [displayType]=\"getDisplayType(entry)\"\r\n                [iconShape]=\"getTimelineIcon(entry)\"\r\n                [createdAt]=\"entry.createdAt\"\r\n                [name]=\"getName(entry)\"\r\n                [featured]=\"isFeatured(entry)\"\r\n                [collapsed]=\"!expanded && !isFeatured(entry)\"\r\n                (expandClick)=\"expanded = !expanded\"\r\n            >\r\n                <ng-container [ngSwitch]=\"entry.type\">\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_STATE_TRANSITION\">\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            {{ 'order.history-order-fulfilled' | translate }}\r\n                        </div>\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Cancelled'\">\r\n                            {{ 'order.history-order-cancelled' | translate }}\r\n                        </div>\r\n                        <ng-template [ngIf]=\"entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'\">\r\n                            {{\r\n                                'order.history-order-transition'\r\n                                    | translate : { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_MODIFIED\">\r\n                        <div class=\"title\">\r\n                            {{ 'order.history-order-modified' | translate }}\r\n                        </div>\r\n                        <div\r\n                            class=\"flex items-center\"\r\n                            *ngIf=\"getModification(entry.data.modificationId) as modification\"\r\n                        >\r\n                            {{ 'order.modify-order-price-difference' | translate }}:\r\n                            <strong>{{\r\n                                modification.priceChange | localeCurrency : order.currencyCode\r\n                            }}</strong>\r\n                            <vdr-chip colorType=\"success\" class=\"mx-1\" *ngIf=\"modification.isSettled\">{{\r\n                                'order.modification-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-chip colorType=\"error\" class=\"mx-1\" *ngIf=\"!modification.isSettled\">{{\r\n                                'order.modification-not-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-modification-detail\r\n                                    [order]=\"order\"\r\n                                    [modification]=\"modification\"\r\n                                ></vdr-modification-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_PAYMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularPaymentTransition\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-payment-settled' | translate }}\r\n                            </div>\r\n                            <div class=\"flex items-center\">\r\n                                <vdr-chip *ngIf=\"getPayment(entry) as payment\" class=\"mr-1\">{{\r\n                                    payment.amount | localeCurrency : order.currencyCode\r\n                                }}</vdr-chip>\r\n                                <vdr-history-entry-detail *ngIf=\"getPayment(entry) as payment\">\r\n                                    <vdr-payment-detail\r\n                                        [payment]=\"payment\"\r\n                                        [currencyCode]=\"order.currencyCode\"\r\n                                    ></vdr-payment-detail>\r\n                                </vdr-history-entry-detail>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-template #regularPaymentTransition>\r\n                            {{\r\n                                'order.history-payment-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: getPayment(entry)?.transactionId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_REFUND_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularRefundTransition\">\r\n                            <ng-container *ngIf=\"getRefund(entry) as refund\">\r\n                                <div class=\"title\">{{ 'order.refund' | translate }} #{{ refund.id }}</div>\r\n                                <div class=\"flex items-center\">\r\n                                    <vdr-chip colorType=\"warning\" class=\"mr-1\">{{\r\n                                        refund.total | localeCurrency : order.currencyCode\r\n                                    }}</vdr-chip>\r\n                                    <vdr-history-entry-detail>\r\n                                        <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                            {{ entry.data.reason }}\r\n                                        </vdr-labeled-data>\r\n                                        <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                            <vdr-simple-item-list\r\n                                                [items]=\"getCancelledItems(refund.lines)\"\r\n                                            ></vdr-simple-item-list>\r\n                                        </vdr-labeled-data>\r\n                                    </vdr-history-entry-detail>\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #regularRefundTransition>\r\n                            {{\r\n                                'order.history-refund-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: entry.data.refundId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CANCELLATION\">\r\n                        {{\r\n                            'order.history-items-cancelled'\r\n                                | translate : { count: getCancelledQuantity(entry) }\r\n                        }}\r\n                        <vdr-history-entry-detail *ngIf=\"getCancelledItems(entry.data.lines) as items\">\r\n                            <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                {{ entry.data.reason }}\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.shipping-cancelled' | translate\">\r\n                                {{ entry.data.shippingCancelled }}\r\n                            </vdr-labeled-data>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT\">\r\n                        {{ 'order.history-fulfillment-created' | translate }}\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-delivered' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to === 'Shipped'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-shipped' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'\">\r\n                            {{\r\n                                'order.history-fulfillment-transition'\r\n                                    | translate : { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-container>\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_NOTE\">\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                <span *ngIf=\"entry.isPublic\" class=\"note-visibility public\">{{\r\n                                    'common.public' | translate\r\n                                }}</span>\r\n                                <span *ngIf=\"!entry.isPublic\" class=\"note-visibility private\">{{\r\n                                    'common.private' | translate\r\n                                }}</span>\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-dropdown>\r\n                                <button class=\"button-small ml-1\" vdrDropdownTrigger>\r\n                                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n                                </button>\r\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"updateNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"edit\"></clr-icon>\r\n                                        {{ 'common.edit' | translate }}\r\n                                    </button>\r\n                                    <div class=\"dropdown-divider\"></div>\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"deleteNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                        {{ 'common.delete' | translate }}\r\n                                    </button>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_APPLIED\">\r\n                        {{ 'order.history-coupon-code-applied' | translate }}:\r\n                        <vdr-chip>\r\n                            <a [routerLink]=\"['/marketing', 'promotions', entry.data.promotionId]\">{{\r\n                                entry.data.couponCode\r\n                            }}</a>\r\n                        </vdr-chip>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_REMOVED\">\r\n                        {{ 'order.history-coupon-code-removed' | translate }}:\r\n                        <vdr-chip\r\n                            ><span class=\"cancelled-coupon-code\">{{ entry.data.couponCode }}</span></vdr-chip\r\n                        >\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CUSTOMER_UPDATED\">\r\n                        <div class=\"title\">\r\n                            {{\r\n                                'order.history-customer-updated'\r\n                                    | translate : { newCustomerName: entry.data.newCustomerName }\r\n                            }}\r\n                        </div>\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-labeled-data [label]=\"'order.previous-customer' | translate\">\r\n                                    <a\r\n                                        *ngIf=\"entry.data.previousCustomerId\"\r\n                                        class=\"button-ghost\"\r\n                                        [routerLink]=\"[\r\n                                            '/customer',\r\n                                            'customers',\r\n                                            entry.data.previousCustomerId\r\n                                        ]\"\r\n                                    >\r\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\r\n                                        <span>{{ entry.data.previousCustomerName }}</span>\r\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                                    </a>\r\n                                </vdr-labeled-data>\r\n                                <vdr-labeled-data [label]=\"'order.new-customer' | translate\">\r\n                                    <a\r\n                                        *ngIf=\"entry.data.newCustomerId\"\r\n                                        class=\"button-ghost\"\r\n                                        [routerLink]=\"['/customer', 'customers', entry.data.newCustomerId]\"\r\n                                    >\r\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\r\n                                        <span>{{ entry.data.newCustomerName }}</span>\r\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                                    </a>\r\n                                </vdr-labeled-data>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"title\">\r\n                            {{ entry.type | translate }}\r\n                        </div>\r\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\r\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </vdr-timeline-entry>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <vdr-timeline-entry [isLast]=\"true\" [createdAt]=\"order.createdAt\" [featured]=\"true\">\r\n        <div class=\"title\">\r\n            {{ 'order.history-order-created' | translate }}\r\n        </div>\r\n    </vdr-timeline-entry>\r\n</div>\r\n", styles: [":host{display:block}.entry-list{margin-inline-start:calc(var(--space-unit) * 2)}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}.visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-700)}.visibility-select .private{color:var(--color-success-700)}textarea.note{flex:1;height:36px;border-radius:3px;margin-inline-end:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap;max-width:580px}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-700)}.note-visibility.private{color:var(--color-success-700)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: i1.TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: ["displayType", "createdAt", "name", "featured", "iconShape", "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: "17.2.4", 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\" [isFirst]=\"true\">\r\n        <div class=\"note-entry\">\r\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToOrder()\">\r\n                {{ 'common.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"visibility-select\">\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n                <label>{{ 'order.note-is-private' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n                {{ 'order.note-only-visible-to-administrators' | translate }}\r\n            </span>\r\n            <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n                {{ 'order.note-visible-to-customer' | translate }}\r\n            </span>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <ng-container *ngFor=\"let entry of history\">\r\n        <vdr-order-history-entry-host\r\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\r\n            [order]=\"order\"\r\n            [entry]=\"entry\"\r\n            [expanded]=\"expanded\"\r\n            (expandClick)=\"expanded = !expanded\"\r\n        ></vdr-order-history-entry-host>\r\n        <ng-template #defaultComponents>\r\n            <vdr-timeline-entry\r\n                [displayType]=\"getDisplayType(entry)\"\r\n                [iconShape]=\"getTimelineIcon(entry)\"\r\n                [createdAt]=\"entry.createdAt\"\r\n                [name]=\"getName(entry)\"\r\n                [featured]=\"isFeatured(entry)\"\r\n                [collapsed]=\"!expanded && !isFeatured(entry)\"\r\n                (expandClick)=\"expanded = !expanded\"\r\n            >\r\n                <ng-container [ngSwitch]=\"entry.type\">\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_STATE_TRANSITION\">\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            {{ 'order.history-order-fulfilled' | translate }}\r\n                        </div>\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Cancelled'\">\r\n                            {{ 'order.history-order-cancelled' | translate }}\r\n                        </div>\r\n                        <ng-template [ngIf]=\"entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'\">\r\n                            {{\r\n                                'order.history-order-transition'\r\n                                    | translate : { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_MODIFIED\">\r\n                        <div class=\"title\">\r\n                            {{ 'order.history-order-modified' | translate }}\r\n                        </div>\r\n                        <div\r\n                            class=\"flex items-center\"\r\n                            *ngIf=\"getModification(entry.data.modificationId) as modification\"\r\n                        >\r\n                            {{ 'order.modify-order-price-difference' | translate }}:\r\n                            <strong>{{\r\n                                modification.priceChange | localeCurrency : order.currencyCode\r\n                            }}</strong>\r\n                            <vdr-chip colorType=\"success\" class=\"mx-1\" *ngIf=\"modification.isSettled\">{{\r\n                                'order.modification-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-chip colorType=\"error\" class=\"mx-1\" *ngIf=\"!modification.isSettled\">{{\r\n                                'order.modification-not-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-modification-detail\r\n                                    [order]=\"order\"\r\n                                    [modification]=\"modification\"\r\n                                ></vdr-modification-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_PAYMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularPaymentTransition\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-payment-settled' | translate }}\r\n                            </div>\r\n                            <div class=\"flex items-center\">\r\n                                <vdr-chip *ngIf=\"getPayment(entry) as payment\" class=\"mr-1\">{{\r\n                                    payment.amount | localeCurrency : order.currencyCode\r\n                                }}</vdr-chip>\r\n                                <vdr-history-entry-detail *ngIf=\"getPayment(entry) as payment\">\r\n                                    <vdr-payment-detail\r\n                                        [payment]=\"payment\"\r\n                                        [currencyCode]=\"order.currencyCode\"\r\n                                    ></vdr-payment-detail>\r\n                                </vdr-history-entry-detail>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-template #regularPaymentTransition>\r\n                            {{\r\n                                'order.history-payment-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: getPayment(entry)?.transactionId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_REFUND_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularRefundTransition\">\r\n                            <ng-container *ngIf=\"getRefund(entry) as refund\">\r\n                                <div class=\"title\">{{ 'order.refund' | translate }} #{{ refund.id }}</div>\r\n                                <div class=\"flex items-center\">\r\n                                    <vdr-chip colorType=\"warning\" class=\"mr-1\">{{\r\n                                        refund.total | localeCurrency : order.currencyCode\r\n                                    }}</vdr-chip>\r\n                                    <vdr-history-entry-detail>\r\n                                        <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                            {{ entry.data.reason }}\r\n                                        </vdr-labeled-data>\r\n                                        <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                            <vdr-simple-item-list\r\n                                                [items]=\"getCancelledItems(refund.lines)\"\r\n                                            ></vdr-simple-item-list>\r\n                                        </vdr-labeled-data>\r\n                                    </vdr-history-entry-detail>\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #regularRefundTransition>\r\n                            {{\r\n                                'order.history-refund-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: entry.data.refundId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CANCELLATION\">\r\n                        {{\r\n                            'order.history-items-cancelled'\r\n                                | translate : { count: getCancelledQuantity(entry) }\r\n                        }}\r\n                        <vdr-history-entry-detail *ngIf=\"getCancelledItems(entry.data.lines) as items\">\r\n                            <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                {{ entry.data.reason }}\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.shipping-cancelled' | translate\">\r\n                                {{ entry.data.shippingCancelled }}\r\n                            </vdr-labeled-data>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT\">\r\n                        {{ 'order.history-fulfillment-created' | translate }}\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-delivered' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to === 'Shipped'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-shipped' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'\">\r\n                            {{\r\n                                'order.history-fulfillment-transition'\r\n                                    | translate : { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-container>\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_NOTE\">\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                <span *ngIf=\"entry.isPublic\" class=\"note-visibility public\">{{\r\n                                    'common.public' | translate\r\n                                }}</span>\r\n                                <span *ngIf=\"!entry.isPublic\" class=\"note-visibility private\">{{\r\n                                    'common.private' | translate\r\n                                }}</span>\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-dropdown>\r\n                                <button class=\"button-small ml-1\" vdrDropdownTrigger>\r\n                                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n                                </button>\r\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"updateNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"edit\"></clr-icon>\r\n                                        {{ 'common.edit' | translate }}\r\n                                    </button>\r\n                                    <div class=\"dropdown-divider\"></div>\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"deleteNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                        {{ 'common.delete' | translate }}\r\n                                    </button>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_APPLIED\">\r\n                        {{ 'order.history-coupon-code-applied' | translate }}:\r\n                        <vdr-chip>\r\n                            <a [routerLink]=\"['/marketing', 'promotions', entry.data.promotionId]\">{{\r\n                                entry.data.couponCode\r\n                            }}</a>\r\n                        </vdr-chip>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_REMOVED\">\r\n                        {{ 'order.history-coupon-code-removed' | translate }}:\r\n                        <vdr-chip\r\n                            ><span class=\"cancelled-coupon-code\">{{ entry.data.couponCode }}</span></vdr-chip\r\n                        >\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CUSTOMER_UPDATED\">\r\n                        <div class=\"title\">\r\n                            {{\r\n                                'order.history-customer-updated'\r\n                                    | translate : { newCustomerName: entry.data.newCustomerName }\r\n                            }}\r\n                        </div>\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-labeled-data [label]=\"'order.previous-customer' | translate\">\r\n                                    <a\r\n                                        *ngIf=\"entry.data.previousCustomerId\"\r\n                                        class=\"button-ghost\"\r\n                                        [routerLink]=\"[\r\n                                            '/customer',\r\n                                            'customers',\r\n                                            entry.data.previousCustomerId\r\n                                        ]\"\r\n                                    >\r\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\r\n                                        <span>{{ entry.data.previousCustomerName }}</span>\r\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                                    </a>\r\n                                </vdr-labeled-data>\r\n                                <vdr-labeled-data [label]=\"'order.new-customer' | translate\">\r\n                                    <a\r\n                                        *ngIf=\"entry.data.newCustomerId\"\r\n                                        class=\"button-ghost\"\r\n                                        [routerLink]=\"['/customer', 'customers', entry.data.newCustomerId]\"\r\n                                    >\r\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\r\n                                        <span>{{ entry.data.newCustomerName }}</span>\r\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                                    </a>\r\n                                </vdr-labeled-data>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"title\">\r\n                            {{ entry.type | translate }}\r\n                        </div>\r\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\r\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </vdr-timeline-entry>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <vdr-timeline-entry [isLast]=\"true\" [createdAt]=\"order.createdAt\" [featured]=\"true\">\r\n        <div class=\"title\">\r\n            {{ 'order.history-order-created' | translate }}\r\n        </div>\r\n    </vdr-timeline-entry>\r\n</div>\r\n", styles: [":host{display:block}.entry-list{margin-inline-start:calc(var(--space-unit) * 2)}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}.visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-700)}.visibility-select .private{color:var(--color-success-700)}textarea.note{flex:1;height:36px;border-radius:3px;margin-inline-end:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap;max-width:580px}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-700)}.note-visibility.private{color:var(--color-success-700)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: i1.TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: ["displayType", "createdAt", "name", "featured", "iconShape", "isFirst", "isLast", "collapsed"], outputs: ["expandClick"] }, { kind: "component", type: i1.HistoryEntryDetailComponent, selector: "vdr-history-entry-detail" }, { kind: "component", type: FulfillmentDetailComponent, selector: "vdr-fulfillment-detail", inputs: ["fulfillmentId", "order"] }, { kind: "component", type: PaymentDetailComponent, selector: "vdr-payment-detail", inputs: ["payment", "currencyCode"] }, { kind: "component", type: SimpleItemListComponent, selector: "vdr-simple-item-list", inputs: ["items"] }, { kind: "component", type: ModificationDetailComponent, selector: "vdr-modification-detail", inputs: ["order", "modification"] }, { kind: "component", type: OrderHistoryEntryHostComponent, selector: "vdr-order-history-entry-host", inputs: ["entry", "order", "expanded"], outputs: ["expandClick"], exportAs: ["historyEntry"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", 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                        <div\r\n                            class=\"flex items-center\"\r\n                            *ngIf=\"getModification(entry.data.modificationId) as modification\"\r\n                        >\r\n                            {{ 'order.modify-order-price-difference' | translate }}:\r\n                            <strong>{{\r\n                                modification.priceChange | localeCurrency : order.currencyCode\r\n                            }}</strong>\r\n                            <vdr-chip colorType=\"success\" class=\"mx-1\" *ngIf=\"modification.isSettled\">{{\r\n                                'order.modification-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-chip colorType=\"error\" class=\"mx-1\" *ngIf=\"!modification.isSettled\">{{\r\n                                'order.modification-not-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-modification-detail\r\n                                    [order]=\"order\"\r\n                                    [modification]=\"modification\"\r\n                                ></vdr-modification-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_PAYMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularPaymentTransition\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-payment-settled' | translate }}\r\n                            </div>\r\n                            <div class=\"flex items-center\">\r\n                                <vdr-chip *ngIf=\"getPayment(entry) as payment\" class=\"mr-1\">{{\r\n                                    payment.amount | localeCurrency : order.currencyCode\r\n                                }}</vdr-chip>\r\n                                <vdr-history-entry-detail *ngIf=\"getPayment(entry) as payment\">\r\n                                    <vdr-payment-detail\r\n                                        [payment]=\"payment\"\r\n                                        [currencyCode]=\"order.currencyCode\"\r\n                                    ></vdr-payment-detail>\r\n                                </vdr-history-entry-detail>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-template #regularPaymentTransition>\r\n                            {{\r\n                                'order.history-payment-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: getPayment(entry)?.transactionId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_REFUND_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularRefundTransition\">\r\n                            <ng-container *ngIf=\"getRefund(entry) as refund\">\r\n                                <div class=\"title\">{{ 'order.refund' | translate }} #{{ refund.id }}</div>\r\n                                <div class=\"flex items-center\">\r\n                                    <vdr-chip colorType=\"warning\" class=\"mr-1\">{{\r\n                                        refund.total | localeCurrency : order.currencyCode\r\n                                    }}</vdr-chip>\r\n                                    <vdr-history-entry-detail>\r\n                                        <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                            {{ entry.data.reason }}\r\n                                        </vdr-labeled-data>\r\n                                        <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                            <vdr-simple-item-list\r\n                                                [items]=\"getCancelledItems(refund.lines)\"\r\n                                            ></vdr-simple-item-list>\r\n                                        </vdr-labeled-data>\r\n                                    </vdr-history-entry-detail>\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #regularRefundTransition>\r\n                            {{\r\n                                'order.history-refund-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: entry.data.refundId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CANCELLATION\">\r\n                        {{\r\n                            'order.history-items-cancelled'\r\n                                | translate : { count: getCancelledQuantity(entry) }\r\n                        }}\r\n                        <vdr-history-entry-detail *ngIf=\"getCancelledItems(entry.data.lines) as items\">\r\n                            <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                {{ entry.data.reason }}\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.shipping-cancelled' | translate\">\r\n                                {{ entry.data.shippingCancelled }}\r\n                            </vdr-labeled-data>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT\">\r\n                        {{ 'order.history-fulfillment-created' | translate }}\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-delivered' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to === 'Shipped'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-shipped' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'\">\r\n                            {{\r\n                                'order.history-fulfillment-transition'\r\n                                    | translate : { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-container>\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_NOTE\">\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                <span *ngIf=\"entry.isPublic\" class=\"note-visibility public\">{{\r\n                                    'common.public' | translate\r\n                                }}</span>\r\n                                <span *ngIf=\"!entry.isPublic\" class=\"note-visibility private\">{{\r\n                                    'common.private' | translate\r\n                                }}</span>\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-dropdown>\r\n                                <button class=\"button-small ml-1\" vdrDropdownTrigger>\r\n                                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n                                </button>\r\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"updateNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"edit\"></clr-icon>\r\n                                        {{ 'common.edit' | translate }}\r\n                                    </button>\r\n                                    <div class=\"dropdown-divider\"></div>\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"deleteNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                        {{ 'common.delete' | translate }}\r\n                                    </button>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_APPLIED\">\r\n                        {{ 'order.history-coupon-code-applied' | translate }}:\r\n                        <vdr-chip>\r\n                            <a [routerLink]=\"['/marketing', 'promotions', entry.data.promotionId]\">{{\r\n                                entry.data.couponCode\r\n                            }}</a>\r\n                        </vdr-chip>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_REMOVED\">\r\n                        {{ 'order.history-coupon-code-removed' | translate }}:\r\n                        <vdr-chip\r\n                            ><span class=\"cancelled-coupon-code\">{{ entry.data.couponCode }}</span></vdr-chip\r\n                        >\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CUSTOMER_UPDATED\">\r\n                        <div class=\"title\">\r\n                            {{\r\n                                'order.history-customer-updated'\r\n                                    | translate : { newCustomerName: entry.data.newCustomerName }\r\n                            }}\r\n                        </div>\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-labeled-data [label]=\"'order.previous-customer' | translate\">\r\n                                    <a\r\n                                        *ngIf=\"entry.data.previousCustomerId\"\r\n                                        class=\"button-ghost\"\r\n                                        [routerLink]=\"[\r\n                                            '/customer',\r\n                                            'customers',\r\n                                            entry.data.previousCustomerId\r\n                                        ]\"\r\n                                    >\r\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\r\n                                        <span>{{ entry.data.previousCustomerName }}</span>\r\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                                    </a>\r\n                                </vdr-labeled-data>\r\n                                <vdr-labeled-data [label]=\"'order.new-customer' | translate\">\r\n                                    <a\r\n                                        *ngIf=\"entry.data.newCustomerId\"\r\n                                        class=\"button-ghost\"\r\n                                        [routerLink]=\"['/customer', 'customers', entry.data.newCustomerId]\"\r\n                                    >\r\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\r\n                                        <span>{{ entry.data.newCustomerName }}</span>\r\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                                    </a>\r\n                                </vdr-labeled-data>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"title\">\r\n                            {{ entry.type | translate }}\r\n                        </div>\r\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\r\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </vdr-timeline-entry>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <vdr-timeline-entry [isLast]=\"true\" [createdAt]=\"order.createdAt\" [featured]=\"true\">\r\n        <div class=\"title\">\r\n            {{ 'order.history-order-created' | translate }}\r\n        </div>\r\n    </vdr-timeline-entry>\r\n</div>\r\n", styles: [":host{display:block}.entry-list{margin-inline-start:calc(var(--space-unit) * 2)}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}.visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-700)}.visibility-select .private{color:var(--color-success-700)}textarea.note{flex:1;height:36px;border-radius:3px;margin-inline-end:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap;max-width:580px}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-700)}.note-visibility.private{color:var(--color-success-700)}\n"] }]
+            args: [{ selector: 'vdr-order-history', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"entry-list\" [class.expanded]=\"expanded\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\" [isFirst]=\"true\">\r\n        <div class=\"note-entry\">\r\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToOrder()\">\r\n                {{ 'common.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"visibility-select\">\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n                <label>{{ 'order.note-is-private' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n                {{ 'order.note-only-visible-to-administrators' | translate }}\r\n            </span>\r\n            <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n                {{ 'order.note-visible-to-customer' | translate }}\r\n            </span>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <ng-container *ngFor=\"let entry of history\">\r\n        <vdr-order-history-entry-host\r\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\r\n            [order]=\"order\"\r\n            [entry]=\"entry\"\r\n            [expanded]=\"expanded\"\r\n            (expandClick)=\"expanded = !expanded\"\r\n        ></vdr-order-history-entry-host>\r\n        <ng-template #defaultComponents>\r\n            <vdr-timeline-entry\r\n                [displayType]=\"getDisplayType(entry)\"\r\n                [iconShape]=\"getTimelineIcon(entry)\"\r\n                [createdAt]=\"entry.createdAt\"\r\n                [name]=\"getName(entry)\"\r\n                [featured]=\"isFeatured(entry)\"\r\n                [collapsed]=\"!expanded && !isFeatured(entry)\"\r\n                (expandClick)=\"expanded = !expanded\"\r\n            >\r\n                <ng-container [ngSwitch]=\"entry.type\">\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_STATE_TRANSITION\">\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            {{ 'order.history-order-fulfilled' | translate }}\r\n                        </div>\r\n                        <div class=\"title\" *ngIf=\"entry.data.to === 'Cancelled'\">\r\n                            {{ 'order.history-order-cancelled' | translate }}\r\n                        </div>\r\n                        <ng-template [ngIf]=\"entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'\">\r\n                            {{\r\n                                'order.history-order-transition'\r\n                                    | translate : { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_MODIFIED\">\r\n                        <div class=\"title\">\r\n                            {{ 'order.history-order-modified' | translate }}\r\n                        </div>\r\n                        <div\r\n                            class=\"flex items-center\"\r\n                            *ngIf=\"getModification(entry.data.modificationId) as modification\"\r\n                        >\r\n                            {{ 'order.modify-order-price-difference' | translate }}:\r\n                            <strong>{{\r\n                                modification.priceChange | localeCurrency : order.currencyCode\r\n                            }}</strong>\r\n                            <vdr-chip colorType=\"success\" class=\"mx-1\" *ngIf=\"modification.isSettled\">{{\r\n                                'order.modification-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-chip colorType=\"error\" class=\"mx-1\" *ngIf=\"!modification.isSettled\">{{\r\n                                'order.modification-not-settled' | translate\r\n                            }}</vdr-chip>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-modification-detail\r\n                                    [order]=\"order\"\r\n                                    [modification]=\"modification\"\r\n                                ></vdr-modification-detail>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_PAYMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularPaymentTransition\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-payment-settled' | translate }}\r\n                            </div>\r\n                            <div class=\"flex items-center\">\r\n                                <vdr-chip *ngIf=\"getPayment(entry) as payment\" class=\"mr-1\">{{\r\n                                    payment.amount | localeCurrency : order.currencyCode\r\n                                }}</vdr-chip>\r\n                                <vdr-history-entry-detail *ngIf=\"getPayment(entry) as payment\">\r\n                                    <vdr-payment-detail\r\n                                        [payment]=\"payment\"\r\n                                        [currencyCode]=\"order.currencyCode\"\r\n                                    ></vdr-payment-detail>\r\n                                </vdr-history-entry-detail>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-template #regularPaymentTransition>\r\n                            {{\r\n                                'order.history-payment-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: getPayment(entry)?.transactionId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_REFUND_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularRefundTransition\">\r\n                            <ng-container *ngIf=\"getRefund(entry) as refund\">\r\n                                <div class=\"title\">{{ 'order.refund' | translate }} #{{ refund.id }}</div>\r\n                                <div class=\"flex items-center\">\r\n                                    <vdr-chip colorType=\"warning\" class=\"mr-1\">{{\r\n                                        refund.total | localeCurrency : order.currencyCode\r\n                                    }}</vdr-chip>\r\n                                    <vdr-history-entry-detail>\r\n                                        <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                            {{ entry.data.reason }}\r\n                                        </vdr-labeled-data>\r\n                                        <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                            <vdr-simple-item-list\r\n                                                [items]=\"getCancelledItems(refund.lines)\"\r\n                                            ></vdr-simple-item-list>\r\n                                        </vdr-labeled-data>\r\n                                    </vdr-history-entry-detail>\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #regularRefundTransition>\r\n                            {{\r\n                                'order.history-refund-transition'\r\n                                    | translate\r\n                                        : {\r\n                                              from: entry.data.from,\r\n                                              to: entry.data.to,\r\n                                              id: entry.data.refundId\r\n                                          }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CANCELLATION\">\r\n                        {{\r\n                            'order.history-items-cancelled'\r\n                                | translate : { count: getCancelledQuantity(entry) }\r\n                        }}\r\n                        <vdr-history-entry-detail *ngIf=\"getCancelledItems(entry.data.lines) as items\">\r\n                            <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                                {{ entry.data.reason }}\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                                <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n                            </vdr-labeled-data>\r\n                            <vdr-labeled-data [label]=\"'order.shipping-cancelled' | translate\">\r\n                                {{ entry.data.shippingCancelled }}\r\n                            </vdr-labeled-data>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT\">\r\n                        {{ 'order.history-fulfillment-created' | translate }}\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT_TRANSITION\">\r\n                        <ng-container *ngIf=\"entry.data.to === 'Delivered'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-delivered' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to === 'Shipped'\">\r\n                            <div class=\"title\">\r\n                                {{ 'order.history-fulfillment-shipped' | translate }}\r\n                            </div>\r\n                            {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'\">\r\n                            {{\r\n                                'order.history-fulfillment-transition'\r\n                                    | translate : { from: entry.data.from, to: entry.data.to }\r\n                            }}\r\n                        </ng-container>\r\n                        <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                            <vdr-fulfillment-detail\r\n                                [fulfillmentId]=\"fulfillment.id\"\r\n                                [order]=\"order\"\r\n                            ></vdr-fulfillment-detail>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_NOTE\">\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                <span *ngIf=\"entry.isPublic\" class=\"note-visibility public\">{{\r\n                                    'common.public' | translate\r\n                                }}</span>\r\n                                <span *ngIf=\"!entry.isPublic\" class=\"note-visibility private\">{{\r\n                                    'common.private' | translate\r\n                                }}</span>\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-dropdown>\r\n                                <button class=\"button-small ml-1\" vdrDropdownTrigger>\r\n                                    <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n                                </button>\r\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"updateNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"edit\"></clr-icon>\r\n                                        {{ 'common.edit' | translate }}\r\n                                    </button>\r\n                                    <div class=\"dropdown-divider\"></div>\r\n                                    <button\r\n                                        vdrDropdownItem\r\n                                        (click)=\"deleteNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                        {{ 'common.delete' | translate }}\r\n                                    </button>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_APPLIED\">\r\n                        {{ 'order.history-coupon-code-applied' | translate }}:\r\n                        <vdr-chip>\r\n                            <a [routerLink]=\"['/marketing', 'promotions', entry.data.promotionId]\">{{\r\n                                entry.data.couponCode\r\n                            }}</a>\r\n                        </vdr-chip>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_COUPON_REMOVED\">\r\n                        {{ 'order.history-coupon-code-removed' | translate }}:\r\n                        <vdr-chip\r\n                            ><span class=\"cancelled-coupon-code\">{{ entry.data.couponCode }}</span></vdr-chip\r\n                        >\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.ORDER_CUSTOMER_UPDATED\">\r\n                        <div class=\"title\">\r\n                            {{\r\n                                'order.history-customer-updated'\r\n                                    | translate : { newCustomerName: entry.data.newCustomerName }\r\n                            }}\r\n                        </div>\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-labeled-data [label]=\"'order.previous-customer' | translate\">\r\n                                    <a\r\n                                        *ngIf=\"entry.data.previousCustomerId\"\r\n                                        class=\"button-ghost\"\r\n                                        [routerLink]=\"[\r\n                                            '/customer',\r\n                                            'customers',\r\n                                            entry.data.previousCustomerId\r\n                                        ]\"\r\n                                    >\r\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\r\n                                        <span>{{ entry.data.previousCustomerName }}</span>\r\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                                    </a>\r\n                                </vdr-labeled-data>\r\n                                <vdr-labeled-data [label]=\"'order.new-customer' | translate\">\r\n                                    <a\r\n                                        *ngIf=\"entry.data.newCustomerId\"\r\n                                        class=\"button-ghost\"\r\n                                        [routerLink]=\"['/customer', 'customers', entry.data.newCustomerId]\"\r\n                                    >\r\n                                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon>\r\n                                        <span>{{ entry.data.newCustomerName }}</span>\r\n                                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                                    </a>\r\n                                </vdr-labeled-data>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"title\">\r\n                            {{ entry.type | translate }}\r\n                        </div>\r\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\r\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </vdr-timeline-entry>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <vdr-timeline-entry [isLast]=\"true\" [createdAt]=\"order.createdAt\" [featured]=\"true\">\r\n        <div class=\"title\">\r\n            {{ 'order.history-order-created' | translate }}\r\n        </div>\r\n    </vdr-timeline-entry>\r\n</div>\r\n", styles: [":host{display:block}.entry-list{margin-inline-start:calc(var(--space-unit) * 2)}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}.visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-700)}.visibility-select .private{color:var(--color-success-700)}textarea.note{flex:1;height:36px;border-radius:3px;margin-inline-end:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap;max-width:580px}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-700)}.note-visibility.private{color:var(--color-success-700)}\n"] }]
         }], ctorParameters: () => [{ type: i1.HistoryEntryComponentService }], propDecorators: { order: [{
                 type: Input
             }], history: [{