import { ChangeDetectionStrategy, Component, ContentChildren, Input } from '@angular/core';
import { DataTable2Component } from '@vendure/admin-ui/core';
import { OrderTotalColumnComponent } from './order-total-column.component';
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 "ngx-pagination";
import * as i6 from "@ngx-translate/core";
export class OrderDataTableComponent extends DataTable2Component {
    get allColumns() {
        return [...(this.columns ?? []), ...(this.customFieldColumns ?? []), ...(this.totalColumns ?? [])];
    }
    get sortedColumns() {
        const columns = this.allColumns;
        const dataTableConfig = this.getDataTableConfig();
        for (const [id, index] of Object.entries(dataTableConfig[this.id].order)) {
            const column = columns.find(c => c.id === id);
            const currentIndex = columns.findIndex(c => c.id === id);
            if (currentIndex !== -1 && column) {
                columns.splice(currentIndex, 1);
                columns.splice(index, 0, column);
            }
        }
        return columns;
    }
    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: OrderDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: { order: "order" }, queries: [{ propertyName: "totalColumns", predicate: OrderTotalColumnComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"bulk-actions\">\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\n</div>\n<div class=\"table-wrapper\">\n    <table\n        class=\"\"\n        [class.no-select]=\"disableSelect\"\n    >\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\n            <tr class=\"heading-row\">\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\n                    <input\n                        type=\"checkbox\"\n                        clrCheckbox\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\n                        (change)=\"onToggleAllClick()\"\n                    />\n                </th>\n                <th\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\n                    [class.expand]=\"column.expand\"\n                >\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\n                        <vdr-ui-extension-point\n                            [locationId]=\"id\"\n                            [metadata]=\"column.id\"\n                            api=\"dataTable\"\n                            [topPx]=\"-6\"\n                            [leftPx]=\"-24\"\n                            display=\"block\"\n                        >\n                            <span>{{ column.heading }}</span>\n                        </vdr-ui-extension-point>\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\n                            </button>\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\n                        </div>\n                    </div>\n                </th>\n                <th>\n                    <div class=\"column-picker\">\n                        <vdr-data-table-colum-picker\n                            [uiLanguage]=\"uiLanguage$ | async\"\n                            [columns]=\"sortedColumns\"\n                            (reorder)=\"onColumnReorder($event)\"\n                            (resetColumns)=\"onColumnsReset()\"\n                        ></vdr-data-table-colum-picker>\n                    </div>\n                </th>\n            </tr>\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\n                <th\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\n                    class=\"filter-row\"\n                    [class.active]=\"showSearchFilterRow\"\n                >\n                    <button\n                        class=\"button-ghost toggle-search-filter-row\"\n                        [class.active]=\"showSearchFilterRow\"\n                        (click)=\"toggleSearchFilterRow()\"\n                        [title]=\"'common.search-and-filter-list' | translate\"\n                    >\n                        <clr-icon shape=\"search\"></clr-icon>\n                    </button>\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\n                        <ng-container *ngIf=\"filters\">\n                            <div class=\"filters\">\n                                <vdr-data-table-filters\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\n                                    [filterWithValue]=\"activeFilter\"\n                                    [filters]=\"filters\"\n                                    class=\"mt-1\"\n                                ></vdr-data-table-filters>\n                                <vdr-data-table-filters\n                                    *ngIf=\"filters.length\"\n                                    [filters]=\"filters\"\n                                    class=\"mt-1\"\n                                ></vdr-data-table-filters>\n                            </div>\n                        </ng-container>\n                    </div>\n                </th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr\n                *ngFor=\"\n                    let item of items\n                        | paginate\n                            : {\n                                  id: id,\n                                  itemsPerPage: itemsPerPage,\n                                  currentPage: currentPage,\n                                  totalItems: totalItems\n                              };\n                    index as i;\n                    trackBy: trackByFn\n                \"\n            >\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\n                    <input\n                        type=\"checkbox\"\n                        clrCheckbox\n                        [checked]=\"selectionManager?.isSelected(item)\"\n                        (click)=\"onRowClick(item, $event)\"\n                    />\n                </td>\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\n                        <ng-container\n                            *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\n                        >\n                            <ng-container\n                                *ngComponentOutlet=\"\n                                    componentConfig.config.component;\n                                    inputs: { rowItem: item };\n                                    injector: componentConfig.injector\n                                \"\n                            ></ng-container>\n                        </ng-container>\n                        <ng-template #defaultComponent>\n                            <ng-container\n                                *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\n                            ></ng-container>\n                        </ng-template>\n                    </div>\n                </td>\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\n            </tr>\n            <ng-container>\n                <tr *ngIf=\"!items?.length\">\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\n                        <vdr-empty-placeholder [emptyStateLabel]=\"'order.order-is-empty' | translate\"></vdr-empty-placeholder>\n                    </td>\n                </tr>\n            </ng-container>\n            <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\n                <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\n                <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\n                <td class=\"align-middle\" [attr.colspan]=\"visibleSortedColumns.length - 4\"></td>\n                <td class=\"align-middle total\">\n                    {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                        {{ surcharge.price | localeCurrency : order.currencyCode }}\n                    </div>\n                </td>\n                <td><!-- column select --></td>\n            </tr>\n            <ng-container *ngFor=\"let discount of order.discounts\">\n                <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\n                    <td [attr.colspan]=\"visibleSortedColumns.length - 1\" class=\"\">\n                        <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\n                        <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\n                            couponCode\n                        }}</vdr-chip>\n                    </td>\n                    <td class=\"\">\n                        {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\n                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                            {{ discount.amount | localeCurrency : order.currencyCode }}\n                        </div>\n                    </td>\n                    <td><!-- column select --></td>\n                </tr>\n            </ng-container>\n            <tr class=\"sub-total\">\n                <td class=\"\">{{ 'order.sub-total' | translate }}</td>\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\n                <td class=\"clr-align-middle\">\n                    {{ order.subTotalWithTax | localeCurrency : order.currencyCode }}\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                        {{ order.subTotal | localeCurrency : order.currencyCode }}\n                    </div>\n                </td>\n                <td><!-- column select --></td>\n            </tr>\n            <tr class=\"shipping\">\n                <td class=\"\">{{ 'order.shipping' | translate }}</td>\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\">\n                    <vdr-chip *ngFor=\"let shippingLine of order.shippingLines\" class=\"shipping-method-name\">\n                        {{ shippingLine.shippingMethod.name }}\n                    </vdr-chip>\n                </td>\n                <td class=\"clr-align-middle\">\n                    {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                        {{ order.shipping | localeCurrency : order.currencyCode }}\n                    </div>\n                </td>\n                <td><!-- column select --></td>\n            </tr>\n            <tr class=\"total\">\n                <td class=\"\">{{ 'order.total' | translate }}</td>\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\n                <td class=\"clr-align-middle\">\n                    {{ order.totalWithTax | localeCurrency : order.currencyCode }}\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                        {{ order.total | localeCurrency : order.currencyCode }}\n                    </div>\n                </td>\n                <td><!-- column select --></td>\n            </tr>\n        </tbody>\n    </table>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-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}\n"], dependencies: [{ kind: "directive", type: i1.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i4.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i4.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: i4.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { kind: "component", type: i4.DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: i4.DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderDataTableComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-order-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bulk-actions\">\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\n</div>\n<div class=\"table-wrapper\">\n    <table\n        class=\"\"\n        [class.no-select]=\"disableSelect\"\n    >\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\n            <tr class=\"heading-row\">\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\n                    <input\n                        type=\"checkbox\"\n                        clrCheckbox\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\n                        (change)=\"onToggleAllClick()\"\n                    />\n                </th>\n                <th\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\n                    [class.expand]=\"column.expand\"\n                >\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\n                        <vdr-ui-extension-point\n                            [locationId]=\"id\"\n                            [metadata]=\"column.id\"\n                            api=\"dataTable\"\n                            [topPx]=\"-6\"\n                            [leftPx]=\"-24\"\n                            display=\"block\"\n                        >\n                            <span>{{ column.heading }}</span>\n                        </vdr-ui-extension-point>\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\n                            </button>\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\n                        </div>\n                    </div>\n                </th>\n                <th>\n                    <div class=\"column-picker\">\n                        <vdr-data-table-colum-picker\n                            [uiLanguage]=\"uiLanguage$ | async\"\n                            [columns]=\"sortedColumns\"\n                            (reorder)=\"onColumnReorder($event)\"\n                            (resetColumns)=\"onColumnsReset()\"\n                        ></vdr-data-table-colum-picker>\n                    </div>\n                </th>\n            </tr>\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\n                <th\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\n                    class=\"filter-row\"\n                    [class.active]=\"showSearchFilterRow\"\n                >\n                    <button\n                        class=\"button-ghost toggle-search-filter-row\"\n                        [class.active]=\"showSearchFilterRow\"\n                        (click)=\"toggleSearchFilterRow()\"\n                        [title]=\"'common.search-and-filter-list' | translate\"\n                    >\n                        <clr-icon shape=\"search\"></clr-icon>\n                    </button>\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\n                        <ng-container *ngIf=\"filters\">\n                            <div class=\"filters\">\n                                <vdr-data-table-filters\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\n                                    [filterWithValue]=\"activeFilter\"\n                                    [filters]=\"filters\"\n                                    class=\"mt-1\"\n                                ></vdr-data-table-filters>\n                                <vdr-data-table-filters\n                                    *ngIf=\"filters.length\"\n                                    [filters]=\"filters\"\n                                    class=\"mt-1\"\n                                ></vdr-data-table-filters>\n                            </div>\n                        </ng-container>\n                    </div>\n                </th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr\n                *ngFor=\"\n                    let item of items\n                        | paginate\n                            : {\n                                  id: id,\n                                  itemsPerPage: itemsPerPage,\n                                  currentPage: currentPage,\n                                  totalItems: totalItems\n                              };\n                    index as i;\n                    trackBy: trackByFn\n                \"\n            >\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\n                    <input\n                        type=\"checkbox\"\n                        clrCheckbox\n                        [checked]=\"selectionManager?.isSelected(item)\"\n                        (click)=\"onRowClick(item, $event)\"\n                    />\n                </td>\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\n                        <ng-container\n                            *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\n                        >\n                            <ng-container\n                                *ngComponentOutlet=\"\n                                    componentConfig.config.component;\n                                    inputs: { rowItem: item };\n                                    injector: componentConfig.injector\n                                \"\n                            ></ng-container>\n                        </ng-container>\n                        <ng-template #defaultComponent>\n                            <ng-container\n                                *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\n                            ></ng-container>\n                        </ng-template>\n                    </div>\n                </td>\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\n            </tr>\n            <ng-container>\n                <tr *ngIf=\"!items?.length\">\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\n                        <vdr-empty-placeholder [emptyStateLabel]=\"'order.order-is-empty' | translate\"></vdr-empty-placeholder>\n                    </td>\n                </tr>\n            </ng-container>\n            <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\n                <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\n                <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\n                <td class=\"align-middle\" [attr.colspan]=\"visibleSortedColumns.length - 4\"></td>\n                <td class=\"align-middle total\">\n                    {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                        {{ surcharge.price | localeCurrency : order.currencyCode }}\n                    </div>\n                </td>\n                <td><!-- column select --></td>\n            </tr>\n            <ng-container *ngFor=\"let discount of order.discounts\">\n                <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\n                    <td [attr.colspan]=\"visibleSortedColumns.length - 1\" class=\"\">\n                        <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\n                        <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\n                            couponCode\n                        }}</vdr-chip>\n                    </td>\n                    <td class=\"\">\n                        {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\n                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                            {{ discount.amount | localeCurrency : order.currencyCode }}\n                        </div>\n                    </td>\n                    <td><!-- column select --></td>\n                </tr>\n            </ng-container>\n            <tr class=\"sub-total\">\n                <td class=\"\">{{ 'order.sub-total' | translate }}</td>\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\n                <td class=\"clr-align-middle\">\n                    {{ order.subTotalWithTax | localeCurrency : order.currencyCode }}\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                        {{ order.subTotal | localeCurrency : order.currencyCode }}\n                    </div>\n                </td>\n                <td><!-- column select --></td>\n            </tr>\n            <tr class=\"shipping\">\n                <td class=\"\">{{ 'order.shipping' | translate }}</td>\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\">\n                    <vdr-chip *ngFor=\"let shippingLine of order.shippingLines\" class=\"shipping-method-name\">\n                        {{ shippingLine.shippingMethod.name }}\n                    </vdr-chip>\n                </td>\n                <td class=\"clr-align-middle\">\n                    {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                        {{ order.shipping | localeCurrency : order.currencyCode }}\n                    </div>\n                </td>\n                <td><!-- column select --></td>\n            </tr>\n            <tr class=\"total\">\n                <td class=\"\">{{ 'order.total' | translate }}</td>\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\n                <td class=\"clr-align-middle\">\n                    {{ order.totalWithTax | localeCurrency : order.currencyCode }}\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n                        {{ order.total | localeCurrency : order.currencyCode }}\n                    </div>\n                </td>\n                <td><!-- column select --></td>\n            </tr>\n        </tbody>\n    </table>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-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}\n"] }]
        }], propDecorators: { totalColumns: [{
                type: ContentChildren,
                args: [OrderTotalColumnComponent]
            }], order: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 