@vendure/admin-ui 3.3.2 → 3.3.3

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

@@ -747,11 +747,11 @@ class OrderTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OrderTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: OrderTableComponent, isStandalone: false, selector: "vdr-order-table", inputs: { order: "order", orderLineCustomFields: "orderLineCustomFields", isDraft: "isDraft" }, outputs: { adjust: "adjust", remove: "remove" }, ngImport: i0, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\n    <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\n        <ng-template let-line=\"item\">\n            {{ line.id }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n            id=\"created-at\"\n            [heading]=\"'common.created-at' | translate\"\n            [hiddenByDefault]=\"true\"\n    >\n        <ng-template let-line=\"item\">\n            {{ line.createdAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n            id=\"updated-at\"\n            [heading]=\"'common.updated-at' | translate\"\n            [hiddenByDefault]=\"true\"\n    >\n        <ng-template let-line=\"item\">\n            {{ line.updatedAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n        <ng-template let-line=\"item\">\n            <div class=\"image-placeholder\">\n                <img\n                    *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\n                    [src]=\"asset | assetPreview : 'tiny'\"\n                />\n                <ng-template #imagePlaceholder>\n                    <div class=\"placeholder\">\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n                    </div>\n                </ng-template>\n            </div>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.product-name' | translate\" id=\"product-name\">\n        <ng-template let-line=\"item\">\n            {{ line.productVariant.name }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.product-sku' | translate\" id=\"product-sku\" [optional]=\"false\">\n        <ng-template let-line=\"item\">\n            {{ line.productVariant.sku }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.unit-price' | translate\" id=\"unit-price\">\n        <ng-template let-line=\"item\">\n            <div class=\"unit-price\">\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                    {{ line.unitPrice | localeCurrency : order.currencyCode }}\n                </div>\n            </div>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.quantity' | translate\" id=\"quantity\" [optional]=\"false\">\n        <ng-template let-line=\"item\">\n            <ng-container *ngIf=\"!isDraft; else draft\">\n                <div class=\"flex\">\n                    <div\n                        *ngIf=\"line.orderPlacedQuantity && line.quantity !== line.orderPlacedQuantity\"\n                        class=\"order-placed-quantity\"\n                        [title]=\"'order.original-quantity-at-checkout' | translate\"\n                    >\n                        {{ line.orderPlacedQuantity }}\n                    </div>\n                    <div>{{ line.quantity }}</div>\n                </div>\n            </ng-container>\n            <ng-template #draft>\n                <div class=\"flex\">\n                    <input\n                        class=\"draft-qty\"\n                        type=\"number\"\n                        min=\"0\"\n                        #qtyInput\n                        [value]=\"line.quantity\"\n                        (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\n                    />\n                    <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\n                        <clr-icon shape=\"trash\"></clr-icon>\n                    </button>\n                </div>\n            </ng-template>\n            <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\n            <vdr-line-fulfillment\n                [line]=\"line\"\n                [orderState]=\"order.state\"\n                [allOrderFulfillments]=\"order.fulfillments\"\n            ></vdr-line-fulfillment>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-custom-field-column\n        *ngFor=\"let customField of orderLineCustomFields\"\n        [customField]=\"customField\"\n    />\n    <vdr-order-total-column [heading]=\"'order.total' | translate\" id=\"total\" [optional]=\"false\">\n        <ng-template let-line=\"item\">\n            <div class=\"unit-price\">\n                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                    {{ line.linePrice | localeCurrency : order.currencyCode }}\n                </div>\n            </div>\n\n            <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\n                <vdr-dropdown *ngIf=\"discounts.length\">\n                    <div class=\"promotions-label\" vdrDropdownTrigger>\n                        {{ 'order.promotions-applied' | translate }}\n                    </div>\n                    <vdr-dropdown-menu>\n                        <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\n                            <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\n                                discount.description\n                            }}</a>\n                            <div class=\"promotion-amount\">\n                                {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                                    {{ discount.amount | localeCurrency : order.currencyCode }}\n                                </div>\n                            </div>\n                        </div>\n                    </vdr-dropdown-menu>\n                </vdr-dropdown>\n            </ng-container>\n        </ng-template>\n    </vdr-order-total-column>\n</vdr-order-data-table>\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-inline-start:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: ["order"] }, { kind: "component", type: OrderTotalColumnComponent, selector: "vdr-order-total-column", exportAs: ["row"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: OrderTableComponent, isStandalone: false, selector: "vdr-order-table", inputs: { order: "order", orderLineCustomFields: "orderLineCustomFields", isDraft: "isDraft" }, outputs: { adjust: "adjust", remove: "remove" }, ngImport: i0, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\n    <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\n        <ng-template let-line=\"item\">\n            {{ line.id }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n            id=\"created-at\"\n            [heading]=\"'common.created-at' | translate\"\n            [hiddenByDefault]=\"true\"\n    >\n        <ng-template let-line=\"item\">\n            {{ line.createdAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n            id=\"updated-at\"\n            [heading]=\"'common.updated-at' | translate\"\n            [hiddenByDefault]=\"true\"\n    >\n        <ng-template let-line=\"item\">\n            {{ line.updatedAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n        <ng-template let-line=\"item\">\n            <div class=\"image-placeholder\">\n                <img\n                    *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\n                    [src]=\"asset | assetPreview : 'tiny'\"\n                />\n                <ng-template #imagePlaceholder>\n                    <div class=\"placeholder\">\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n                    </div>\n                </ng-template>\n            </div>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.product-name' | translate\" id=\"product-name\">\n        <ng-template let-line=\"item\">\n            <a class=\"button-ghost\" [routerLink]=\"['/catalog/products', line.productVariant.product.id]\"\n            ><span>{{ line.productVariant.product.name }}</span>\n                <clr-icon shape=\"arrow right\"></clr-icon>\n            </a>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.product-variant' | translate\" id=\"product-variant\">\n        <ng-template let-line=\"item\">\n            <a class=\"button-ghost\" [routerLink]=\"['/catalog/products', line.productVariant.product.id, 'variants', line.productVariant.id]\"\n            ><span>{{ line.productVariant.name }}</span>\n                <clr-icon shape=\"arrow right\"></clr-icon>\n            </a>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.product-sku' | translate\" id=\"product-sku\">\n        <ng-template let-line=\"item\">\n            {{ line.productVariant.sku }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.unit-price' | translate\" id=\"unit-price\">\n        <ng-template let-line=\"item\">\n            <div class=\"unit-price\">\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                    {{ line.unitPrice | localeCurrency : order.currencyCode }}\n                </div>\n            </div>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.quantity' | translate\" id=\"quantity\" [optional]=\"false\">\n        <ng-template let-line=\"item\">\n            <ng-container *ngIf=\"!isDraft; else draft\">\n                <div class=\"flex\">\n                    <div\n                        *ngIf=\"line.orderPlacedQuantity && line.quantity !== line.orderPlacedQuantity\"\n                        class=\"order-placed-quantity\"\n                        [title]=\"'order.original-quantity-at-checkout' | translate\"\n                    >\n                        {{ line.orderPlacedQuantity }}\n                    </div>\n                    <div>{{ line.quantity }}</div>\n                </div>\n            </ng-container>\n            <ng-template #draft>\n                <div class=\"flex\">\n                    <input\n                        class=\"draft-qty\"\n                        type=\"number\"\n                        min=\"0\"\n                        #qtyInput\n                        [value]=\"line.quantity\"\n                        (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\n                    />\n                    <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\n                        <clr-icon shape=\"trash\"></clr-icon>\n                    </button>\n                </div>\n            </ng-template>\n            <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\n            <vdr-line-fulfillment\n                [line]=\"line\"\n                [orderState]=\"order.state\"\n                [allOrderFulfillments]=\"order.fulfillments\"\n            ></vdr-line-fulfillment>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-custom-field-column\n        *ngFor=\"let customField of orderLineCustomFields\"\n        [customField]=\"customField\"\n    />\n    <vdr-order-total-column [heading]=\"'order.total' | translate\" id=\"total\" [optional]=\"false\">\n        <ng-template let-line=\"item\">\n            <div class=\"unit-price\">\n                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                    {{ line.linePrice | localeCurrency : order.currencyCode }}\n                </div>\n            </div>\n\n            <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\n                <vdr-dropdown *ngIf=\"discounts.length\">\n                    <div class=\"promotions-label\" vdrDropdownTrigger>\n                        {{ 'order.promotions-applied' | translate }}\n                    </div>\n                    <vdr-dropdown-menu>\n                        <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\n                            <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\n                                discount.description\n                            }}</a>\n                            <div class=\"promotion-amount\">\n                                {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                                    {{ discount.amount | localeCurrency : order.currencyCode }}\n                                </div>\n                            </div>\n                        </div>\n                    </vdr-dropdown-menu>\n                </vdr-dropdown>\n            </ng-container>\n        </ng-template>\n    </vdr-order-total-column>\n</vdr-order-data-table>\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-inline-start:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: ["order"] }, { kind: "component", type: OrderTotalColumnComponent, selector: "vdr-order-total-column", exportAs: ["row"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OrderTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\n    <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\n        <ng-template let-line=\"item\">\n            {{ line.id }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n            id=\"created-at\"\n            [heading]=\"'common.created-at' | translate\"\n            [hiddenByDefault]=\"true\"\n    >\n        <ng-template let-line=\"item\">\n            {{ line.createdAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n            id=\"updated-at\"\n            [heading]=\"'common.updated-at' | translate\"\n            [hiddenByDefault]=\"true\"\n    >\n        <ng-template let-line=\"item\">\n            {{ line.updatedAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n        <ng-template let-line=\"item\">\n            <div class=\"image-placeholder\">\n                <img\n                    *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\n                    [src]=\"asset | assetPreview : 'tiny'\"\n                />\n                <ng-template #imagePlaceholder>\n                    <div class=\"placeholder\">\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n                    </div>\n                </ng-template>\n            </div>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.product-name' | translate\" id=\"product-name\">\n        <ng-template let-line=\"item\">\n            {{ line.productVariant.name }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.product-sku' | translate\" id=\"product-sku\" [optional]=\"false\">\n        <ng-template let-line=\"item\">\n            {{ line.productVariant.sku }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.unit-price' | translate\" id=\"unit-price\">\n        <ng-template let-line=\"item\">\n            <div class=\"unit-price\">\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                    {{ line.unitPrice | localeCurrency : order.currencyCode }}\n                </div>\n            </div>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.quantity' | translate\" id=\"quantity\" [optional]=\"false\">\n        <ng-template let-line=\"item\">\n            <ng-container *ngIf=\"!isDraft; else draft\">\n                <div class=\"flex\">\n                    <div\n                        *ngIf=\"line.orderPlacedQuantity && line.quantity !== line.orderPlacedQuantity\"\n                        class=\"order-placed-quantity\"\n                        [title]=\"'order.original-quantity-at-checkout' | translate\"\n                    >\n                        {{ line.orderPlacedQuantity }}\n                    </div>\n                    <div>{{ line.quantity }}</div>\n                </div>\n            </ng-container>\n            <ng-template #draft>\n                <div class=\"flex\">\n                    <input\n                        class=\"draft-qty\"\n                        type=\"number\"\n                        min=\"0\"\n                        #qtyInput\n                        [value]=\"line.quantity\"\n                        (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\n                    />\n                    <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\n                        <clr-icon shape=\"trash\"></clr-icon>\n                    </button>\n                </div>\n            </ng-template>\n            <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\n            <vdr-line-fulfillment\n                [line]=\"line\"\n                [orderState]=\"order.state\"\n                [allOrderFulfillments]=\"order.fulfillments\"\n            ></vdr-line-fulfillment>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-custom-field-column\n        *ngFor=\"let customField of orderLineCustomFields\"\n        [customField]=\"customField\"\n    />\n    <vdr-order-total-column [heading]=\"'order.total' | translate\" id=\"total\" [optional]=\"false\">\n        <ng-template let-line=\"item\">\n            <div class=\"unit-price\">\n                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                    {{ line.linePrice | localeCurrency : order.currencyCode }}\n                </div>\n            </div>\n\n            <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\n                <vdr-dropdown *ngIf=\"discounts.length\">\n                    <div class=\"promotions-label\" vdrDropdownTrigger>\n                        {{ 'order.promotions-applied' | translate }}\n                    </div>\n                    <vdr-dropdown-menu>\n                        <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\n                            <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\n                                discount.description\n                            }}</a>\n                            <div class=\"promotion-amount\">\n                                {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                                    {{ discount.amount | localeCurrency : order.currencyCode }}\n                                </div>\n                            </div>\n                        </div>\n                    </vdr-dropdown-menu>\n                </vdr-dropdown>\n            </ng-container>\n        </ng-template>\n    </vdr-order-total-column>\n</vdr-order-data-table>\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-inline-start:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"] }]
+            args: [{ selector: 'vdr-order-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\n    <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\n        <ng-template let-line=\"item\">\n            {{ line.id }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n            id=\"created-at\"\n            [heading]=\"'common.created-at' | translate\"\n            [hiddenByDefault]=\"true\"\n    >\n        <ng-template let-line=\"item\">\n            {{ line.createdAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n            id=\"updated-at\"\n            [heading]=\"'common.updated-at' | translate\"\n            [hiddenByDefault]=\"true\"\n    >\n        <ng-template let-line=\"item\">\n            {{ line.updatedAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n        <ng-template let-line=\"item\">\n            <div class=\"image-placeholder\">\n                <img\n                    *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\n                    [src]=\"asset | assetPreview : 'tiny'\"\n                />\n                <ng-template #imagePlaceholder>\n                    <div class=\"placeholder\">\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n                    </div>\n                </ng-template>\n            </div>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.product-name' | translate\" id=\"product-name\">\n        <ng-template let-line=\"item\">\n            <a class=\"button-ghost\" [routerLink]=\"['/catalog/products', line.productVariant.product.id]\"\n            ><span>{{ line.productVariant.product.name }}</span>\n                <clr-icon shape=\"arrow right\"></clr-icon>\n            </a>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.product-variant' | translate\" id=\"product-variant\">\n        <ng-template let-line=\"item\">\n            <a class=\"button-ghost\" [routerLink]=\"['/catalog/products', line.productVariant.product.id, 'variants', line.productVariant.id]\"\n            ><span>{{ line.productVariant.name }}</span>\n                <clr-icon shape=\"arrow right\"></clr-icon>\n            </a>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.product-sku' | translate\" id=\"product-sku\">\n        <ng-template let-line=\"item\">\n            {{ line.productVariant.sku }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.unit-price' | translate\" id=\"unit-price\">\n        <ng-template let-line=\"item\">\n            <div class=\"unit-price\">\n                {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                    {{ line.unitPrice | localeCurrency : order.currencyCode }}\n                </div>\n            </div>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'order.quantity' | translate\" id=\"quantity\" [optional]=\"false\">\n        <ng-template let-line=\"item\">\n            <ng-container *ngIf=\"!isDraft; else draft\">\n                <div class=\"flex\">\n                    <div\n                        *ngIf=\"line.orderPlacedQuantity && line.quantity !== line.orderPlacedQuantity\"\n                        class=\"order-placed-quantity\"\n                        [title]=\"'order.original-quantity-at-checkout' | translate\"\n                    >\n                        {{ line.orderPlacedQuantity }}\n                    </div>\n                    <div>{{ line.quantity }}</div>\n                </div>\n            </ng-container>\n            <ng-template #draft>\n                <div class=\"flex\">\n                    <input\n                        class=\"draft-qty\"\n                        type=\"number\"\n                        min=\"0\"\n                        #qtyInput\n                        [value]=\"line.quantity\"\n                        (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\n                    />\n                    <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\n                        <clr-icon shape=\"trash\"></clr-icon>\n                    </button>\n                </div>\n            </ng-template>\n            <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\n            <vdr-line-fulfillment\n                [line]=\"line\"\n                [orderState]=\"order.state\"\n                [allOrderFulfillments]=\"order.fulfillments\"\n            ></vdr-line-fulfillment>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-custom-field-column\n        *ngFor=\"let customField of orderLineCustomFields\"\n        [customField]=\"customField\"\n    />\n    <vdr-order-total-column [heading]=\"'order.total' | translate\" id=\"total\" [optional]=\"false\">\n        <ng-template let-line=\"item\">\n            <div class=\"unit-price\">\n                {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                    {{ line.linePrice | localeCurrency : order.currencyCode }}\n                </div>\n            </div>\n\n            <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\n                <vdr-dropdown *ngIf=\"discounts.length\">\n                    <div class=\"promotions-label\" vdrDropdownTrigger>\n                        {{ 'order.promotions-applied' | translate }}\n                    </div>\n                    <vdr-dropdown-menu>\n                        <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\n                            <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\n                                discount.description\n                            }}</a>\n                            <div class=\"promotion-amount\">\n                                {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                                    {{ discount.amount | localeCurrency : order.currencyCode }}\n                                </div>\n                            </div>\n                        </div>\n                    </vdr-dropdown-menu>\n                </vdr-dropdown>\n            </ng-container>\n        </ng-template>\n    </vdr-order-total-column>\n</vdr-order-data-table>\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-inline-start:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"] }]
         }], propDecorators: { order: [{
                 type: Input
             }], orderLineCustomFields: [{