@deenruv/admin-ui 1.0.17-dev.34 → 1.0.17-dev.36

package/core/common/version.d.ts

@@ -1 +1 @@
-export declare const ADMIN_UI_VERSION = "1.0.17-dev.34";
+export declare const ADMIN_UI_VERSION = "1.0.17-dev.36";

package/esm2022/core/common/version.mjs

@@ -1,3 +1,3 @@
 // Auto-generated by the set-version.js script.
-export const ADMIN_UI_VERSION = '1.0.17-dev.34';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29yZS9zcmMvY29tbW9uL3ZlcnNpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsK0NBQStDO0FBQy9DLE1BQU0sQ0FBQyxNQUFNLGdCQUFnQixHQUFHLGVBQWUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8vIEF1dG8tZ2VuZXJhdGVkIGJ5IHRoZSBzZXQtdmVyc2lvbi5qcyBzY3JpcHQuXG5leHBvcnQgY29uc3QgQURNSU5fVUlfVkVSU0lPTiA9ICcxLjAuMTctZGV2LjM0JztcbiJdfQ==
+export const ADMIN_UI_VERSION = '1.0.17-dev.36';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29yZS9zcmMvY29tbW9uL3ZlcnNpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsK0NBQStDO0FBQy9DLE1BQU0sQ0FBQyxNQUFNLGdCQUFnQixHQUFHLGVBQWUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8vIEF1dG8tZ2VuZXJhdGVkIGJ5IHRoZSBzZXQtdmVyc2lvbi5qcyBzY3JpcHQuXG5leHBvcnQgY29uc3QgQURNSU5fVUlfVkVSU0lPTiA9ICcxLjAuMTctZGV2LjM2JztcbiJdfQ==

package/esm2022/order/components/fulfill-order-dialog/fulfill-order-dialog.component.mjs

@@ -70,10 +70,10 @@ export class FulfillOrderDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FulfillOrderDialogComponent, deps: [{ token: i1.DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FulfillOrderDialogComponent, selector: "vdr-fulfill-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\n\n<div class=\"fulfillment-wrapper\">\n    <div class=\"order-table\">\n        <table class=\"table\">\n            <thead>\n                <tr>\n                    <th></th>\n                    <th>{{ 'order.product-name' | translate }}</th>\n                    <th>{{ 'order.product-sku' | translate }}</th>\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\n                    <th>{{ 'order.fulfill' | translate }}</th>\n                </tr>\n            </thead>\n            <tr\n                *ngFor=\"let line of order.lines\"\n                class=\"order-line\"\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\n            >\n                <td class=\"align-middle thumb\">\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\n                </td>\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\n                <td class=\"align-middle fulfil\">\n                    <input\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\n                        type=\"number\"\n                        [max]=\"fulfillmentQuantities[line.id].max\"\n                        min=\"0\"\n                    />\n                </td>\n            </tr>\n        </table>\n    </div>\n    <div class=\"shipping-details\">\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\n        <vdr-configurable-input\n            [operationDefinition]=\"fulfillmentHandlerDef\"\n            [operation]=\"fulfillmentHandler\"\n            [formControl]=\"fulfillmentHandlerControl\"\n            [removable]=\"false\"\n        ></vdr-configurable-input>\n    </div>\n</div>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\n        {{ 'order.create-fulfillment' | translate }}\n    </button>\n</ng-template>\n", styles: [":host{height:100%;display:flex;min-height:64vh}:host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{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}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}.fulfillment-wrapper .shipping-details{margin-top:24px}@media screen and (min-width: 768px){.fulfillment-wrapper .shipping-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position", "hideDescription"], outputs: ["remove"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FulfillOrderDialogComponent, selector: "vdr-fulfill-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\n\n<div class=\"fulfillment-wrapper\">\n    <div class=\"order-table\">\n        <table class=\"table\">\n            <thead>\n                <tr>\n                    <th></th>\n                    <th>{{ 'order.product-name' | translate }}</th>\n                    <th>{{ 'order.product-sku' | translate }}</th>\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\n                    <th>{{ 'order.fulfill' | translate }}</th>\n                </tr>\n            </thead>\n            <tr\n                *ngFor=\"let line of order.lines\"\n                class=\"order-line\"\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\n            >\n                <td class=\"align-middle thumb\">\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\n                </td>\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\n                <td class=\"align-middle fulfil\">\n                    <input\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\n                        type=\"number\"\n                        [max]=\"fulfillmentQuantities[line.id].max\"\n                        min=\"0\"\n                    />\n                </td>\n            </tr>\n        </table>\n    </div>\n    <div class=\"shipping-details\">\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\n        <vdr-configurable-input\n            [operationDefinition]=\"fulfillmentHandlerDef\"\n            [operation]=\"fulfillmentHandler\"\n            [formControl]=\"fulfillmentHandlerControl\"\n            [removable]=\"false\"\n        ></vdr-configurable-input>\n    </div>\n</div>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\n        {{ 'order.create-fulfillment' | translate }}\n    </button>\n</ng-template>\n", styles: [":host{height:100%;display:flex;min-height:64vh}:host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}:host .image-placeholder img{width:50px;height:50px;object-fit:cover}:host .image-placeholder .placeholder{display:flex;width:50px;height:50px;align-items:center;justify-content:center;color:var(--color-grey-300)}: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}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}.fulfillment-wrapper .shipping-details{margin-top:24px}@media screen and (min-width: 768px){.fulfillment-wrapper .shipping-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position", "hideDescription"], outputs: ["remove"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FulfillOrderDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-fulfill-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\n\n<div class=\"fulfillment-wrapper\">\n    <div class=\"order-table\">\n        <table class=\"table\">\n            <thead>\n                <tr>\n                    <th></th>\n                    <th>{{ 'order.product-name' | translate }}</th>\n                    <th>{{ 'order.product-sku' | translate }}</th>\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\n                    <th>{{ 'order.fulfill' | translate }}</th>\n                </tr>\n            </thead>\n            <tr\n                *ngFor=\"let line of order.lines\"\n                class=\"order-line\"\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\n            >\n                <td class=\"align-middle thumb\">\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\n                </td>\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\n                <td class=\"align-middle fulfil\">\n                    <input\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\n                        type=\"number\"\n                        [max]=\"fulfillmentQuantities[line.id].max\"\n                        min=\"0\"\n                    />\n                </td>\n            </tr>\n        </table>\n    </div>\n    <div class=\"shipping-details\">\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\n        <vdr-configurable-input\n            [operationDefinition]=\"fulfillmentHandlerDef\"\n            [operation]=\"fulfillmentHandler\"\n            [formControl]=\"fulfillmentHandlerControl\"\n            [removable]=\"false\"\n        ></vdr-configurable-input>\n    </div>\n</div>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\n        {{ 'order.create-fulfillment' | translate }}\n    </button>\n</ng-template>\n", styles: [":host{height:100%;display:flex;min-height:64vh}:host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{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}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}.fulfillment-wrapper .shipping-details{margin-top:24px}@media screen and (min-width: 768px){.fulfillment-wrapper .shipping-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"] }]
+            args: [{ selector: 'vdr-fulfill-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\n\n<div class=\"fulfillment-wrapper\">\n    <div class=\"order-table\">\n        <table class=\"table\">\n            <thead>\n                <tr>\n                    <th></th>\n                    <th>{{ 'order.product-name' | translate }}</th>\n                    <th>{{ 'order.product-sku' | translate }}</th>\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\n                    <th>{{ 'order.fulfill' | translate }}</th>\n                </tr>\n            </thead>\n            <tr\n                *ngFor=\"let line of order.lines\"\n                class=\"order-line\"\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\n            >\n                <td class=\"align-middle thumb\">\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\n                </td>\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\n                <td class=\"align-middle fulfil\">\n                    <input\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\n                        type=\"number\"\n                        [max]=\"fulfillmentQuantities[line.id].max\"\n                        min=\"0\"\n                    />\n                </td>\n            </tr>\n        </table>\n    </div>\n    <div class=\"shipping-details\">\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\n        <vdr-configurable-input\n            [operationDefinition]=\"fulfillmentHandlerDef\"\n            [operation]=\"fulfillmentHandler\"\n            [formControl]=\"fulfillmentHandlerControl\"\n            [removable]=\"false\"\n        ></vdr-configurable-input>\n    </div>\n</div>\n\n<ng-template vdrDialogButtons>\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\n        {{ 'order.create-fulfillment' | translate }}\n    </button>\n</ng-template>\n", styles: [":host{height:100%;display:flex;min-height:64vh}:host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}:host .image-placeholder img{width:50px;height:50px;object-fit:cover}:host .image-placeholder .placeholder{display:flex;width:50px;height:50px;align-items:center;justify-content:center;color:var(--color-grey-300)}: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}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}.fulfillment-wrapper .shipping-details{margin-top:24px}@media screen and (min-width: 768px){.fulfillment-wrapper .shipping-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"] }]
         }], ctorParameters: () => [{ type: i1.DataService }, { type: i0.ChangeDetectorRef }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnVsZmlsbC1vcmRlci1kaWFsb2cuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9vcmRlci9zcmMvY29tcG9uZW50cy9mdWxmaWxsLW9yZGVyLWRpYWxvZy9mdWxmaWxsLW9yZGVyLWRpYWxvZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL29yZGVyL3NyYy9jb21wb25lbnRzL2Z1bGZpbGwtb3JkZXItZGlhbG9nL2Z1bGZpbGwtb3JkZXItZGlhbG9nLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBcUIsU0FBUyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQzlGLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3BELE9BQU8sRUFDSCxnQ0FBZ0MsRUFHaEMsaUNBQWlDLEVBSWpDLFVBQVUsRUFFViw0QkFBNEIsR0FDL0IsTUFBTSx3QkFBd0IsQ0FBQzs7Ozs7O0FBUWhDLE1BQU0sT0FBTywyQkFBMkI7SUFVcEMsWUFDWSxXQUF3QixFQUN4QixjQUFpQztRQURqQyxnQkFBVyxHQUFYLFdBQVcsQ0FBYTtRQUN4QixtQkFBYyxHQUFkLGNBQWMsQ0FBbUI7UUFSN0MsOEJBQXlCLEdBQUcsSUFBSSxrQkFBa0IsRUFBRSxDQUFDO1FBQ3JELDBCQUFxQixHQUFnRSxFQUFFLENBQUM7SUFRckYsQ0FBQztJQUVKLFFBQVE7UUFDSixJQUFJLENBQUMsV0FBVyxDQUFDLFFBQVEsQ0FBQyxpQkFBaUIsRUFBRSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsQ0FBQyxFQUFFLGNBQWMsRUFBRSxFQUFFLEVBQUU7WUFDbkYsSUFBSSxDQUFDLHFCQUFxQixHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUUsRUFBRTtnQkFDbEUsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixDQUFDLElBQUksRUFBRSxjQUFjLENBQUMsY0FBYyxDQUFDLENBQUM7Z0JBQ25GLE9BQU87b0JBQ0gsR0FBRyxNQUFNO29CQUNULENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsWUFBWSxFQUFFLEdBQUcsRUFBRSxZQUFZLEVBQUU7aUJBQ2pELENBQUM7WUFDTixDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7WUFDUCxJQUFJLENBQUMsY0FBYyxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3ZDLENBQUMsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLFdBQVcsQ0FBQyxjQUFjO2FBQzFCLDJCQUEyQixFQUFFO2FBQzdCLFNBQVMsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQzthQUMzQyxTQUFTLENBQUMsUUFBUSxDQUFDLEVBQUU7WUFDbEIsSUFBSSxDQUFDLHFCQUFxQjtnQkFDdEIsUUFBUSxDQUFDLElBQUksQ0FDVCxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLEtBQUssSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLEVBQUUsY0FBYyxFQUFFLHNCQUFzQixDQUN0RixJQUFJLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUNyQixJQUFJLENBQUMsa0JBQWtCLEdBQUcsZ0NBQWdDLENBQUMsSUFBSSxDQUFDLHFCQUFxQixDQUFDLENBQUM7WUFDdkYsSUFBSSxDQUFDLHlCQUF5QixDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsa0JBQWtCLENBQUMsQ0FBQztZQUNuRSxJQUFJLENBQUMsY0FBYyxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3ZDLENBQUMsQ0FBQyxDQUFDO0lBQ1gsQ0FBQztJQUVELG1CQUFtQixDQUFDLElBQTBDLEVBQUUsb0JBQTZCO1FBQ3pGLE1BQU0sRUFBRSxjQUFjLEVBQUUsV0FBVyxFQUFFLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQztRQUM1RCxNQUFNLHNCQUFzQixHQUN4QixjQUFjLEtBQUssVUFBVSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsb0JBQW9CLENBQUMsQ0FBQyxDQUFDLGNBQWMsS0FBSyxVQUFVLENBQUMsSUFBSSxDQUFDO1FBRXRHLE1BQU0sZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3hELE9BQU8sc0JBQXNCLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsZ0JBQWdCLEVBQUUsV0FBVyxDQUFDLENBQUMsQ0FBQyxDQUFDLGdCQUFnQixDQUFDO0lBQy9GLENBQUM7SUFFRCxtQkFBbUIsQ0FBQyxJQUEwQztRQUMxRCxNQUFNLFNBQVMsR0FDWCxJQUFJLENBQUMsS0FBSyxDQUFDLFlBQVk7WUFDbkIsRUFBRSxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsS0FBSyxLQUFLLFdBQVcsQ0FBQzthQUNyQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDO2FBQ2pCLElBQUksRUFBRTthQUNOLE1BQU0sQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsQ0FBQyxXQUFXLEtBQUssSUFBSSxDQUFDLEVBQUUsQ0FBQzthQUMxQyxNQUFNLENBQUMsQ0FBQyxHQUFHLEVBQUUsR0FBRyxFQUFFLEVBQUUsQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDMUQsT0FBTyxJQUFJLENBQUMsUUFBUSxHQUFHLFNBQVMsQ0FBQztJQUNyQyxDQUFDO0lBRUQsU0FBUztRQUNMLE1BQU0sVUFBVSxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLHFCQUFxQixDQUFDLENBQUMsTUFBTSxDQUMvRCxDQUFDLEtBQUssRUFBRSxFQUFFLFlBQVksRUFBRSxFQUFFLEVBQUUsQ0FBQyxLQUFLLEdBQUcsWUFBWSxFQUNqRCxDQUFDLENBQ0osQ0FBQztRQUNGLE1BQU0sMEJBQTBCLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMscUJBQXFCLENBQUMsQ0FBQyxLQUFLLENBQzlFLENBQUMsRUFBRSxZQUFZLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxDQUFDLFlBQVksSUFBSSxHQUFHLENBQ2pELENBQUM7UUFDRixNQUFNLFdBQVcsR0FDYixpQ0FBaUMsQ0FDN0IsSUFBSSxDQUFDLHFCQUFxQixFQUMxQixJQUFJLENBQUMseUJBQXlCLENBQUMsS0FBSyxDQUN2QyxJQUFJLElBQUksQ0FBQyx5QkFBeUIsQ0FBQyxLQUFLLENBQUM7UUFDOUMsT0FBTyxXQUFXLElBQUksQ0FBQyxHQUFHLFVBQVUsSUFBSSwwQkFBMEIsQ0FBQztJQUN2RSxDQUFDO0lBRUQsTUFBTTtRQUNGLE1BQU0sS0FBSyxHQUFHLE1BQU0sQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLHFCQUFxQixDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxXQUFXLEVBQUUsRUFBRSxZQUFZLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1lBQy9GLFdBQVc7WUFDWCxRQUFRLEVBQUUsWUFBWTtTQUN6QixDQUFDLENBQUMsQ0FBQztRQUNKLElBQUksQ0FBQyxXQUFXLENBQUM7WUFDYixLQUFLO1lBQ0wsT0FBTyxFQUFFLDRCQUE0QixDQUNqQyxJQUFJLENBQUMsa0JBQWtCLEVBQ3ZCLElBQUksQ0FBQyx5QkFBeUIsQ0FBQyxLQUFLLENBQ3ZDO1NBQ0osQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVELE1BQU07UUFDRixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDdkIsQ0FBQzsrR0E3RlEsMkJBQTJCO21HQUEzQiwyQkFBMkIsZ0VDckJ4QywrekZBNERBOzs0RkR2Q2EsMkJBQTJCO2tCQU52QyxTQUFTOytCQUNJLDBCQUEwQixtQkFHbkIsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDaGFuZ2VEZXRlY3RvclJlZiwgQ29tcG9uZW50LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFVudHlwZWRGb3JtQ29udHJvbCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7XG4gICAgY29uZmlndXJhYmxlRGVmaW5pdGlvblRvSW5zdGFuY2UsXG4gICAgQ29uZmlndXJhYmxlT3BlcmF0aW9uLFxuICAgIENvbmZpZ3VyYWJsZU9wZXJhdGlvbkRlZmluaXRpb24sXG4gICAgY29uZmlndXJhYmxlT3BlcmF0aW9uVmFsdWVJc1ZhbGlkLFxuICAgIERhdGFTZXJ2aWNlLFxuICAgIERpYWxvZyxcbiAgICBGdWxmaWxsT3JkZXJJbnB1dCxcbiAgICBHbG9iYWxGbGFnLFxuICAgIE9yZGVyRGV0YWlsRnJhZ21lbnQsXG4gICAgdG9Db25maWd1cmFibGVPcGVyYXRpb25JbnB1dCxcbn0gZnJvbSAnQGRlZW5ydXYvYWRtaW4tdWkvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAndmRyLWZ1bGZpbGwtb3JkZXItZGlhbG9nJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vZnVsZmlsbC1vcmRlci1kaWFsb2cuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2Z1bGZpbGwtb3JkZXItZGlhbG9nLmNvbXBvbmVudC5zY3NzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEZ1bGZpbGxPcmRlckRpYWxvZ0NvbXBvbmVudCBpbXBsZW1lbnRzIERpYWxvZzxGdWxmaWxsT3JkZXJJbnB1dD4sIE9uSW5pdCB7XG4gICAgcmVzb2x2ZVdpdGg6IChyZXN1bHQ/OiBGdWxmaWxsT3JkZXJJbnB1dCkgPT4gdm9pZDtcbiAgICBmdWxmaWxsbWVudEhhbmRsZXJEZWY6IENvbmZpZ3VyYWJsZU9wZXJhdGlvbkRlZmluaXRpb247XG4gICAgZnVsZmlsbG1lbnRIYW5kbGVyOiBDb25maWd1cmFibGVPcGVyYXRpb247XG4gICAgZnVsZmlsbG1lbnRIYW5kbGVyQ29udHJvbCA9IG5ldyBVbnR5cGVkRm9ybUNvbnRyb2woKTtcbiAgICBmdWxmaWxsbWVudFF1YW50aXRpZXM6IHsgW2xpbmVJZDogc3RyaW5nXTogeyBmdWxmaWxsQ291bnQ6IG51bWJlcjsgbWF4OiBudW1iZXIgfSB9ID0ge307XG5cbiAgICAvLyBQcm92aWRlZCBieSBtb2RhbFNlcnZpY2UuZnJvbUNvbXBvbmVudCgpIGNhbGxcbiAgICBvcmRlcjogT3JkZXJEZXRhaWxGcmFnbWVudDtcblxuICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICBwcml2YXRlIGRhdGFTZXJ2aWNlOiBEYXRhU2VydmljZSxcbiAgICAgICAgcHJpdmF0ZSBjaGFuZ2VEZXRlY3RvcjogQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgKSB7fVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuZGF0YVNlcnZpY2Uuc2V0dGluZ3MuZ2V0R2xvYmFsU2V0dGluZ3MoKS5zaW5nbGUkLnN1YnNjcmliZSgoeyBnbG9iYWxTZXR0aW5ncyB9KSA9PiB7XG4gICAgICAgICAgICB0aGlzLmZ1bGZpbGxtZW50UXVhbnRpdGllcyA9IHRoaXMub3JkZXIubGluZXMucmVkdWNlKChyZXN1bHQsIGxpbmUpID0+IHtcbiAgICAgICAgICAgICAgICBjb25zdCBmdWxmaWxsQ291bnQgPSB0aGlzLmdldEZ1bGZpbGxhYmxlQ291bnQobGluZSwgZ2xvYmFsU2V0dGluZ3MudHJhY2tJbnZlbnRvcnkpO1xuICAgICAgICAgICAgICAgIHJldHVybiB7XG4gICAgICAgICAgICAgICAgICAgIC4uLnJlc3VsdCxcbiAgICAgICAgICAgICAgICAgICAgW2xpbmUuaWRdOiB7IGZ1bGZpbGxDb3VudCwgbWF4OiBmdWxmaWxsQ291bnQgfSxcbiAgICAgICAgICAgICAgICB9O1xuICAgICAgICAgICAgfSwge30pO1xuICAgICAgICAgICAgdGhpcy5jaGFuZ2VEZXRlY3Rvci5tYXJrRm9yQ2hlY2soKTtcbiAgICAgICAgfSk7XG5cbiAgICAgICAgdGhpcy5kYXRhU2VydmljZS5zaGlwcGluZ01ldGhvZFxuICAgICAgICAgICAgLmdldFNoaXBwaW5nTWV0aG9kT3BlcmF0aW9ucygpXG4gICAgICAgICAgICAubWFwU2luZ2xlKGRhdGEgPT4gZGF0YS5mdWxmaWxsbWVudEhhbmRsZXJzKVxuICAgICAgICAgICAgLnN1YnNjcmliZShoYW5kbGVycyA9PiB7XG4gICAgICAgICAgICAgICAgdGhpcy5mdWxmaWxsbWVudEhhbmRsZXJEZWYgPVxuICAgICAgICAgICAgICAgICAgICBoYW5kbGVycy5maW5kKFxuICAgICAgICAgICAgICAgICAgICAgICAgaCA9PiBoLmNvZGUgPT09IHRoaXMub3JkZXIuc2hpcHBpbmdMaW5lc1swXT8uc2hpcHBpbmdNZXRob2Q/LmZ1bGZpbGxtZW50SGFuZGxlckNvZGUsXG4gICAgICAgICAgICAgICAgICAgICkgfHwgaGFuZGxlcnNbMF07XG4gICAgICAgICAgICAgICAgdGhpcy5mdWxmaWxsbWVudEhhbmRsZXIgPSBjb25maWd1cmFibGVEZWZpbml0aW9uVG9JbnN0YW5jZSh0aGlzLmZ1bGZpbGxtZW50SGFuZGxlckRlZik7XG4gICAgICAgICAgICAgICAgdGhpcy5mdWxmaWxsbWVudEhhbmRsZXJDb250cm9sLnBhdGNoVmFsdWUodGhpcy5mdWxmaWxsbWVudEhhbmRsZXIpO1xuICAgICAgICAgICAgICAgIHRoaXMuY2hhbmdlRGV0ZWN0b3IubWFya0ZvckNoZWNrKCk7XG4gICAgICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBnZXRGdWxmaWxsYWJsZUNvdW50KGxpbmU6IE9yZGVyRGV0YWlsRnJhZ21lbnRbJ2xpbmVzJ11bbnVtYmVyXSwgZ2xvYmFsVHJhY2tJbnZlbnRvcnk6IGJvb2xlYW4pOiBudW1iZXIge1xuICAgICAgICBjb25zdCB7IHRyYWNrSW52ZW50b3J5LCBzdG9ja09uSGFuZCB9ID0gbGluZS5wcm9kdWN0VmFyaWFudDtcbiAgICAgICAgY29uc3QgZWZmZWN0aXZlVHJhY0ludmVudG9yeSA9XG4gICAgICAgICAgICB0cmFja0ludmVudG9yeSA9PT0gR2xvYmFsRmxhZy5JTkhFUklUID8gZ2xvYmFsVHJhY2tJbnZlbnRvcnkgOiB0cmFja0ludmVudG9yeSA9PT0gR2xvYmFsRmxhZy5UUlVFO1xuXG4gICAgICAgIGNvbnN0IHVuZnVsZmlsbGVkQ291bnQgPSB0aGlzLmdldFVuZnVsZmlsbGVkQ291bnQobGluZSk7XG4gICAgICAgIHJldHVybiBlZmZlY3RpdmVUcmFjSW52ZW50b3J5ID8gTWF0aC5taW4odW5mdWxmaWxsZWRDb3VudCwgc3RvY2tPbkhhbmQpIDogdW5mdWxmaWxsZWRDb3VudDtcbiAgICB9XG5cbiAgICBnZXRVbmZ1bGZpbGxlZENvdW50KGxpbmU6IE9yZGVyRGV0YWlsRnJhZ21lbnRbJ2xpbmVzJ11bbnVtYmVyXSk6IG51bWJlciB7XG4gICAgICAgIGNvbnN0IGZ1bGZpbGxlZCA9XG4gICAgICAgICAgICB0aGlzLm9yZGVyLmZ1bGZpbGxtZW50c1xuICAgICAgICAgICAgICAgID8uZmlsdGVyKGYgPT4gZi5zdGF0ZSAhPT0gJ0NhbmNlbGxlZCcpXG4gICAgICAgICAgICAgICAgLm1hcChmID0+IGYubGluZXMpXG4gICAgICAgICAgICAgICAgLmZsYXQoKVxuICAgICAgICAgICAgICAgIC5maWx0ZXIocm93ID0+IHJvdy5vcmRlckxpbmVJZCA9PT0gbGluZS5pZClcbiAgICAgICAgICAgICAgICAucmVkdWNlKChzdW0sIHJvdykgPT4gc3VtICsgcm93LnF1YW50aXR5LCAwKSA/PyAwO1xuICAgICAgICByZXR1cm4gbGluZS5xdWFudGl0eSAtIGZ1bGZpbGxlZDtcbiAgICB9XG5cbiAgICBjYW5TdWJtaXQoKTogYm9vbGVhbiB7XG4gICAgICAgIGNvbnN0IHRvdGFsQ291bnQgPSBPYmplY3QudmFsdWVzKHRoaXMuZnVsZmlsbG1lbnRRdWFudGl0aWVzKS5yZWR1Y2UoXG4gICAgICAgICAgICAodG90YWwsIHsgZnVsZmlsbENvdW50IH0pID0+IHRvdGFsICsgZnVsZmlsbENvdW50LFxuICAgICAgICAgICAgMCxcbiAgICAgICAgKTtcbiAgICAgICAgY29uc3QgZnVsZmlsbG1lbnRRdWFudGl0eUlzVmFsaWQgPSBPYmplY3QudmFsdWVzKHRoaXMuZnVsZmlsbG1lbnRRdWFudGl0aWVzKS5ldmVyeShcbiAgICAgICAgICAgICh7IGZ1bGZpbGxDb3VudCwgbWF4IH0pID0+IGZ1bGZpbGxDb3VudCA8PSBtYXgsXG4gICAgICAgICk7XG4gICAgICAgIGNvbnN0IGZvcm1Jc1ZhbGlkID1cbiAgICAgICAgICAgIGNvbmZpZ3VyYWJsZU9wZXJhdGlvblZhbHVlSXNWYWxpZChcbiAgICAgICAgICAgICAgICB0aGlzLmZ1bGZpbGxtZW50SGFuZGxlckRlZixcbiAgICAgICAgICAgICAgICB0aGlzLmZ1bGZpbGxtZW50SGFuZGxlckNvbnRyb2wudmFsdWUsXG4gICAgICAgICAgICApICYmIHRoaXMuZnVsZmlsbG1lbnRIYW5kbGVyQ29udHJvbC52YWxpZDtcbiAgICAgICAgcmV0dXJuIGZvcm1Jc1ZhbGlkICYmIDAgPCB0b3RhbENvdW50ICYmIGZ1bGZpbGxtZW50UXVhbnRpdHlJc1ZhbGlkO1xuICAgIH1cblxuICAgIHNlbGVjdCgpIHtcbiAgICAgICAgY29uc3QgbGluZXMgPSBPYmplY3QuZW50cmllcyh0aGlzLmZ1bGZpbGxtZW50UXVhbnRpdGllcykubWFwKChbb3JkZXJMaW5lSWQsIHsgZnVsZmlsbENvdW50IH1dKSA9PiAoe1xuICAgICAgICAgICAgb3JkZXJMaW5lSWQsXG4gICAgICAgICAgICBxdWFudGl0eTogZnVsZmlsbENvdW50LFxuICAgICAgICB9KSk7XG4gICAgICAgIHRoaXMucmVzb2x2ZVdpdGgoe1xuICAgICAgICAgICAgbGluZXMsXG4gICAgICAgICAgICBoYW5kbGVyOiB0b0NvbmZpZ3VyYWJsZU9wZXJhdGlvbklucHV0KFxuICAgICAgICAgICAgICAgIHRoaXMuZnVsZmlsbG1lbnRIYW5kbGVyLFxuICAgICAgICAgICAgICAgIHRoaXMuZnVsZmlsbG1lbnRIYW5kbGVyQ29udHJvbC52YWx1ZSxcbiAgICAgICAgICAgICksXG4gICAgICAgIH0pO1xuICAgIH1cblxuICAgIGNhbmNlbCgpIHtcbiAgICAgICAgdGhpcy5yZXNvbHZlV2l0aCgpO1xuICAgIH1cbn1cbiIsIjxuZy10ZW1wbGF0ZSB2ZHJEaWFsb2dUaXRsZT57eyAnb3JkZXIuZnVsZmlsbC1vcmRlcicgfCB0cmFuc2xhdGUgfX08L25nLXRlbXBsYXRlPlxuXG48ZGl2IGNsYXNzPVwiZnVsZmlsbG1lbnQtd3JhcHBlclwiPlxuICAgIDxkaXYgY2xhc3M9XCJvcmRlci10YWJsZVwiPlxuICAgICAgICA8dGFibGUgY2xhc3M9XCJ0YWJsZVwiPlxuICAgICAgICAgICAgPHRoZWFkPlxuICAgICAgICAgICAgICAgIDx0cj5cbiAgICAgICAgICAgICAgICAgICAgPHRoPjwvdGg+XG4gICAgICAgICAgICAgICAgICAgIDx0aD57eyAnb3JkZXIucHJvZHVjdC1uYW1lJyB8IHRyYW5zbGF0ZSB9fTwvdGg+XG4gICAgICAgICAgICAgICAgICAgIDx0aD57eyAnb3JkZXIucHJvZHVjdC1za3UnIHwgdHJhbnNsYXRlIH19PC90aD5cbiAgICAgICAgICAgICAgICAgICAgPHRoPnt7ICdvcmRlci51bmZ1bGZpbGxlZCcgfCB0cmFuc2xhdGUgfX08L3RoPlxuICAgICAgICAgICAgICAgICAgICA8dGg+e3sgJ2NhdGFsb2cuc3RvY2stb24taGFuZCcgfCB0cmFuc2xhdGUgfX08L3RoPlxuICAgICAgICAgICAgICAgICAgICA8dGg+e3sgJ29yZGVyLmZ1bGZpbGwnIHwgdHJhbnNsYXRlIH19PC90aD5cbiAgICAgICAgICAgICAgICA8L3RyPlxuICAgICAgICAgICAgPC90aGVhZD5cbiAgICAgICAgICAgIDx0clxuICAgICAgICAgICAgICAgICpuZ0Zvcj1cImxldCBsaW5lIG9mIG9yZGVyLmxpbmVzXCJcbiAgICAgICAgICAgICAgICBjbGFzcz1cIm9yZGVyLWxpbmVcIlxuICAgICAgICAgICAgICAgIFtjbGFzcy5pZ25vcmVdPVwiZ2V0VW5mdWxmaWxsZWRDb3VudChsaW5lKSA9PT0gMFwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPHRkIGNsYXNzPVwiYWxpZ24tbWlkZGxlIHRodW1iXCI+XG4gICAgICAgICAgICAgICAgICAgIDxpbWcgKm5nSWY9XCJsaW5lLmZlYXR1cmVkQXNzZXRcIiBbc3JjXT1cImxpbmUuZmVhdHVyZWRBc3NldCB8IGFzc2V0UHJldmlldzogJ3RpbnknXCIgLz5cbiAgICAgICAgICAgICAgICA8L3RkPlxuICAgICAgICAgICAgICAgIDx0ZCBjbGFzcz1cImFsaWduLW1pZGRsZSBuYW1lXCI+e3sgbGluZS5wcm9kdWN0VmFyaWFudC5uYW1lIH19PC90ZD5cbiAgICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJhbGlnbi1taWRkbGUgc2t1XCI+e3sgbGluZS5wcm9kdWN0VmFyaWFudC5za3UgfX08L3RkPlxuICAgICAgICAgICAgICAgIDx0ZCBjbGFzcz1cImFsaWduLW1pZGRsZSBxdWFudGl0eVwiPnt7IGdldFVuZnVsZmlsbGVkQ291bnQobGluZSkgfX08L3RkPlxuICAgICAgICAgICAgICAgIDx0ZCBjbGFzcz1cImFsaWduLW1pZGRsZSBxdWFudGl0eVwiPnt7IGxpbmUucHJvZHVjdFZhcmlhbnQuc3RvY2tPbkhhbmQgfX08L3RkPlxuICAgICAgICAgICAgICAgIDx0ZCBjbGFzcz1cImFsaWduLW1pZGRsZSBmdWxmaWxcIj5cbiAgICAgICAgICAgICAgICAgICAgPGlucHV0XG4gICAgICAgICAgICAgICAgICAgICAgICAqbmdJZj1cImZ1bGZpbGxtZW50UXVhbnRpdGllc1tsaW5lLmlkXVwiXG4gICAgICAgICAgICAgICAgICAgICAgICBbZGlzYWJsZWRdPVwiZ2V0VW5mdWxmaWxsZWRDb3VudChsaW5lKSA9PT0gMFwiXG4gICAgICAgICAgICAgICAgICAgICAgICBbKG5nTW9kZWwpXT1cImZ1bGZpbGxtZW50UXVhbnRpdGllc1tsaW5lLmlkXS5mdWxmaWxsQ291bnRcIlxuICAgICAgICAgICAgICAgICAgICAgICAgdHlwZT1cIm51bWJlclwiXG4gICAgICAgICAgICAgICAgICAgICAgICBbbWF4XT1cImZ1bGZpbGxtZW50UXVhbnRpdGllc1tsaW5lLmlkXS5tYXhcIlxuICAgICAgICAgICAgICAgICAgICAgICAgbWluPVwiMFwiXG4gICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgPC90ZD5cbiAgICAgICAgICAgIDwvdHI+XG4gICAgICAgIDwvdGFibGU+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInNoaXBwaW5nLWRldGFpbHNcIj5cbiAgICAgICAgPHZkci1mb3JtYXR0ZWQtYWRkcmVzcyBbYWRkcmVzc109XCJvcmRlci5zaGlwcGluZ0FkZHJlc3NcIj48L3Zkci1mb3JtYXR0ZWQtYWRkcmVzcz5cbiAgICAgICAgPGg2Pnt7ICdvcmRlci5zaGlwcGluZy1tZXRob2QnIHwgdHJhbnNsYXRlIH19PC9oNj5cbiAgICAgICAge3sgb3JkZXIuc2hpcHBpbmdMaW5lc1swXT8uc2hpcHBpbmdNZXRob2Q/Lm5hbWUgfX1cbiAgICAgICAgPHN0cm9uZz57eyBvcmRlci5zaGlwcGluZyB8IGxvY2FsZUN1cnJlbmN5OiBvcmRlci5jdXJyZW5jeUNvZGUgfX08L3N0cm9uZz5cbiAgICAgICAgPHZkci1jb25maWd1cmFibGUtaW5wdXRcbiAgICAgICAgICAgIFtvcGVyYXRpb25EZWZpbml0aW9uXT1cImZ1bGZpbGxtZW50SGFuZGxlckRlZlwiXG4gICAgICAgICAgICBbb3BlcmF0aW9uXT1cImZ1bGZpbGxtZW50SGFuZGxlclwiXG4gICAgICAgICAgICBbZm9ybUNvbnRyb2xdPVwiZnVsZmlsbG1lbnRIYW5kbGVyQ29udHJvbFwiXG4gICAgICAgICAgICBbcmVtb3ZhYmxlXT1cImZhbHNlXCJcbiAgICAgICAgPjwvdmRyLWNvbmZpZ3VyYWJsZS1pbnB1dD5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuXG48bmctdGVtcGxhdGUgdmRyRGlhbG9nQnV0dG9ucz5cbiAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiBjbGFzcz1cImJ0blwiIChjbGljayk9XCJjYW5jZWwoKVwiPnt7ICdjb21tb24uY2FuY2VsJyB8IHRyYW5zbGF0ZSB9fTwvYnV0dG9uPlxuICAgIDxidXR0b24gdHlwZT1cInN1Ym1pdFwiIChjbGljayk9XCJzZWxlY3QoKVwiIFtkaXNhYmxlZF09XCIhY2FuU3VibWl0KClcIiBjbGFzcz1cImJ0biBidG4tcHJpbWFyeVwiPlxuICAgICAgICB7eyAnb3JkZXIuY3JlYXRlLWZ1bGZpbGxtZW50JyB8IHRyYW5zbGF0ZSB9fVxuICAgIDwvYnV0dG9uPlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==

package/esm2022/order/components/order-data-table/order-data-table.component.mjs

@@ -45,11 +45,11 @@ export class OrderDataTableComponent extends DataTable2Component {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}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{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.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", "info", "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, vdr-currency-input" }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}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{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}:host .image-placeholder img{width:50px;height:50px;object-fit:cover}:host .image-placeholder .placeholder{display:flex;width:50px;height:50px;align-items:center;justify-content:center;color:var(--color-grey-300)}: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.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", "info", "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, vdr-currency-input" }, { 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: "17.3.12", 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);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}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{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"] }]
+            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);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}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{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}:host .image-placeholder img{width:50px;height:50px;object-fit:cover}:host .image-placeholder .placeholder{display:flex;width:50px;height:50px;align-items:center;justify-content:center;color:var(--color-grey-300)}: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]