import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { AdjustmentType } from '@vendure/admin-ui/core';
import * as i0 from "@angular/core";
import * as i1 from "@clr/angular";
import * as i2 from "@angular/common";
import * as i3 from "@angular/router";
import * as i4 from "@vendure/admin-ui/core";
import * as i5 from "../line-fulfillment/line-fulfillment.component";
import * as i6 from "../line-refunds/line-refunds.component";
import * as i7 from "../order-data-table/order-data-table.component";
import * as i8 from "../order-data-table/order-total-column.component";
import * as i9 from "@ngx-translate/core";
export class OrderTableComponent {
    constructor() {
        this.isDraft = false;
        this.adjust = new EventEmitter();
        this.remove = new EventEmitter();
        this.orderLineCustomFieldsVisible = false;
        this.customFieldsForLine = {};
    }
    get visibleOrderLineCustomFields() {
        return this.orderLineCustomFieldsVisible ? this.orderLineCustomFields : [];
    }
    get showElided() {
        return !this.orderLineCustomFieldsVisible && 0 < this.orderLineCustomFields.length;
    }
    ngOnInit() {
        this.orderLineCustomFieldsVisible = this.orderLineCustomFields.length < 2;
        this.getLineCustomFields();
    }
    draftInputBlur(line, quantity) {
        if (line.quantity !== quantity) {
            this.adjust.emit({ lineId: line.id, quantity });
        }
    }
    toggleOrderLineCustomFields() {
        this.orderLineCustomFieldsVisible = !this.orderLineCustomFieldsVisible;
    }
    getLineDiscounts(line) {
        return line.discounts.filter(a => a.type === AdjustmentType.PROMOTION);
    }
    getLineCustomFields() {
        for (const line of this.order.lines) {
            const formGroup = new UntypedFormGroup({});
            const result = this.orderLineCustomFields
                .map(config => {
                const value = line.customFields[config.name];
                formGroup.addControl(config.name, new UntypedFormControl(value));
                return {
                    config,
                    formGroup,
                    value,
                };
            })
                .filter(field => this.orderLineCustomFieldsVisible ? true : field.value != null);
            this.customFieldsForLine[line.id] = result;
        }
    }
    getPromotionLink(promotion) {
        const id = promotion.adjustmentSource.split(':')[1];
        return ['/marketing', 'promotions', id];
    }
    getCouponCodeForAdjustment(order, promotionAdjustment) {
        const id = promotionAdjustment.adjustmentSource.split(':')[1];
        const promotion = order.promotions.find(p => p.id === id);
        if (promotion) {
            return promotion.couponCode || undefined;
        }
    }
    getShippingNames(order) {
        if (order.shippingLines.length) {
            return order.shippingLines.map(shippingLine => shippingLine.shippingMethod.name).join(', ');
        }
        else {
            return '';
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderTableComponent, selector: "vdr-order-table", inputs: { order: "order", orderLineCustomFields: "orderLineCustomFields", isDraft: "isDraft" }, outputs: { adjust: "adjust", remove: "remove" }, ngImport: i0, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\n    <vdr-dt2-column [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{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}: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: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i4.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i4.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i4.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "component", type: i4.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i4.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i5.LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: i6.LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: i7.OrderDataTableComponent, selector: "vdr-order-data-table", inputs: ["order"] }, { kind: "component", type: i8.OrderTotalColumnComponent, selector: "vdr-order-total-column", exportAs: ["row"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i4.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderTableComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-order-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\n    <vdr-dt2-column [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{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-inline-start:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"] }]
        }], propDecorators: { order: [{
                type: Input
            }], orderLineCustomFields: [{
                type: Input
            }], isDraft: [{
                type: Input
            }], adjust: [{
                type: Output
            }], remove: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 