@vendure/admin-ui 2.0.4 → 2.0.6

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

@@ -656,11 +656,11 @@ class OrderDataTableComponent extends DataTable2Component {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OrderDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: { order: "order" }, queries: [{ propertyName: "totalColumns", predicate: OrderTotalColumnComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    <table\r\n        class=\"\"\r\n        [class.no-select]=\"disableSelect\"\r\n        [style.table-layout]=\"!items?.length ? 'fixed' : 'inherit'\"\r\n    >\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <span>{{ column.heading }}</span>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  id: id,\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n                        ></ng-container>\r\n                    </div>\r\n                </td>\r\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\r\n            </tr>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"'order.order-is-empty' | translate\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n            <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n                <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n                <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                <td class=\"align-middle\" [attr.colspan]=\"visibleSortedColumns.length - 4\"></td>\r\n                <td class=\"align-middle total\">\r\n                    {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ surcharge.price | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <ng-container *ngFor=\"let discount of order.discounts\">\r\n                <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length - 1\" class=\"\">\r\n                        <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\r\n                        <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\r\n                            couponCode\r\n                        }}</vdr-chip>\r\n                    </td>\r\n                    <td class=\"\">\r\n                        {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\r\n                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                            {{ discount.amount | localeCurrency : order.currencyCode }}\r\n                        </div>\r\n                    </td>\r\n                    <td><!-- column select --></td>\r\n                </tr>\r\n            </ng-container>\r\n            <tr class=\"sub-total\">\r\n                <td class=\"\">{{ 'order.sub-total' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.subTotalWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.subTotal | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <tr class=\"shipping\">\r\n                <td class=\"\">{{ 'order.shipping' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\">\r\n                    <vdr-chip *ngFor=\"let shippingLine of order.shippingLines\" class=\"shipping-method-name\">\r\n                        {{ shippingLine.shippingMethod.name }}\r\n                    </vdr-chip>\r\n                </td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.shipping | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <tr class=\"total\">\r\n                <td class=\"\">{{ 'order.total' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.total | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\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-weight-200);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-left:var(--surface-margin-left);text-align:left}}th:last-of-type,td:last-of-type{border-right:1px solid var(--color-weight-200)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-weight-200),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-weight-200),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-left: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-left:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-left:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;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-left: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-left: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-weight-200)}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-left: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-left:var(--surface-margin-left);margin-right: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-right:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-right:2px}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: i1.DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: i1.DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: { order: "order" }, queries: [{ propertyName: "totalColumns", predicate: OrderTotalColumnComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    <table\r\n        class=\"\"\r\n        [class.no-select]=\"disableSelect\"\r\n    >\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <span>{{ column.heading }}</span>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  id: id,\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n                        ></ng-container>\r\n                    </div>\r\n                </td>\r\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\r\n            </tr>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"'order.order-is-empty' | translate\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n            <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n                <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n                <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                <td class=\"align-middle\" [attr.colspan]=\"visibleSortedColumns.length - 4\"></td>\r\n                <td class=\"align-middle total\">\r\n                    {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ surcharge.price | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <ng-container *ngFor=\"let discount of order.discounts\">\r\n                <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length - 1\" class=\"\">\r\n                        <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\r\n                        <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\r\n                            couponCode\r\n                        }}</vdr-chip>\r\n                    </td>\r\n                    <td class=\"\">\r\n                        {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\r\n                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                            {{ discount.amount | localeCurrency : order.currencyCode }}\r\n                        </div>\r\n                    </td>\r\n                    <td><!-- column select --></td>\r\n                </tr>\r\n            </ng-container>\r\n            <tr class=\"sub-total\">\r\n                <td class=\"\">{{ 'order.sub-total' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.subTotalWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.subTotal | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <tr class=\"shipping\">\r\n                <td class=\"\">{{ 'order.shipping' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\">\r\n                    <vdr-chip *ngFor=\"let shippingLine of order.shippingLines\" class=\"shipping-method-name\">\r\n                        {{ shippingLine.shippingMethod.name }}\r\n                    </vdr-chip>\r\n                </td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.shipping | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <tr class=\"total\">\r\n                <td class=\"\">{{ 'order.total' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.total | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\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-weight-200);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-left:var(--surface-margin-left);text-align:left}}th:last-of-type,td:last-of-type{border-right:1px solid var(--color-weight-200)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-weight-200),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-weight-200),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-left: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-left:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-left:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;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-left: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-left: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-weight-200)}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-left: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-left:var(--surface-margin-left);margin-right: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-right:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-right:2px}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: i1.DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: i1.DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OrderDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    <table\r\n        class=\"\"\r\n        [class.no-select]=\"disableSelect\"\r\n        [style.table-layout]=\"!items?.length ? 'fixed' : 'inherit'\"\r\n    >\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <span>{{ column.heading }}</span>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  id: id,\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n                        ></ng-container>\r\n                    </div>\r\n                </td>\r\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\r\n            </tr>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"'order.order-is-empty' | translate\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n            <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n                <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n                <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                <td class=\"align-middle\" [attr.colspan]=\"visibleSortedColumns.length - 4\"></td>\r\n                <td class=\"align-middle total\">\r\n                    {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ surcharge.price | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <ng-container *ngFor=\"let discount of order.discounts\">\r\n                <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length - 1\" class=\"\">\r\n                        <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\r\n                        <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\r\n                            couponCode\r\n                        }}</vdr-chip>\r\n                    </td>\r\n                    <td class=\"\">\r\n                        {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\r\n                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                            {{ discount.amount | localeCurrency : order.currencyCode }}\r\n                        </div>\r\n                    </td>\r\n                    <td><!-- column select --></td>\r\n                </tr>\r\n            </ng-container>\r\n            <tr class=\"sub-total\">\r\n                <td class=\"\">{{ 'order.sub-total' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.subTotalWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.subTotal | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <tr class=\"shipping\">\r\n                <td class=\"\">{{ 'order.shipping' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\">\r\n                    <vdr-chip *ngFor=\"let shippingLine of order.shippingLines\" class=\"shipping-method-name\">\r\n                        {{ shippingLine.shippingMethod.name }}\r\n                    </vdr-chip>\r\n                </td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.shipping | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <tr class=\"total\">\r\n                <td class=\"\">{{ 'order.total' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.total | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\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-weight-200);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-left:var(--surface-margin-left);text-align:left}}th:last-of-type,td:last-of-type{border-right:1px solid var(--color-weight-200)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-weight-200),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-weight-200),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-left: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-left:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-left:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;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-left: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-left: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-weight-200)}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-left: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-left:var(--surface-margin-left);margin-right: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-right:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-right:2px}\n"] }]
+            args: [{ selector: 'vdr-order-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    <table\r\n        class=\"\"\r\n        [class.no-select]=\"disableSelect\"\r\n    >\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <span>{{ column.heading }}</span>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  id: id,\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n                        ></ng-container>\r\n                    </div>\r\n                </td>\r\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\r\n            </tr>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"'order.order-is-empty' | translate\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n            <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n                <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n                <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                <td class=\"align-middle\" [attr.colspan]=\"visibleSortedColumns.length - 4\"></td>\r\n                <td class=\"align-middle total\">\r\n                    {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ surcharge.price | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <ng-container *ngFor=\"let discount of order.discounts\">\r\n                <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length - 1\" class=\"\">\r\n                        <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\r\n                        <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\r\n                            couponCode\r\n                        }}</vdr-chip>\r\n                    </td>\r\n                    <td class=\"\">\r\n                        {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\r\n                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                            {{ discount.amount | localeCurrency : order.currencyCode }}\r\n                        </div>\r\n                    </td>\r\n                    <td><!-- column select --></td>\r\n                </tr>\r\n            </ng-container>\r\n            <tr class=\"sub-total\">\r\n                <td class=\"\">{{ 'order.sub-total' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.subTotalWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.subTotal | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <tr class=\"shipping\">\r\n                <td class=\"\">{{ 'order.shipping' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\">\r\n                    <vdr-chip *ngFor=\"let shippingLine of order.shippingLines\" class=\"shipping-method-name\">\r\n                        {{ shippingLine.shippingMethod.name }}\r\n                    </vdr-chip>\r\n                </td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.shipping | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n            <tr class=\"total\">\r\n                <td class=\"\">{{ 'order.total' | translate }}</td>\r\n                <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ order.totalWithTax | localeCurrency : order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ order.total | localeCurrency : order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td><!-- column select --></td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\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-weight-200);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-left:var(--surface-margin-left);text-align:left}}th:last-of-type,td:last-of-type{border-right:1px solid var(--color-weight-200)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-weight-200),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-weight-200),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-left: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-left:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-left:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;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-left: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-left: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-weight-200)}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-left: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-left:var(--surface-margin-left);margin-right: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-right:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-right:2px}\n"] }]
         }], propDecorators: { totalColumns: [{
                 type: ContentChildren,
                 args: [OrderTotalColumnComponent]
@@ -957,11 +957,11 @@ class DraftOrderDetailComponent extends TypedBaseDetailComponent {
         // empty
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DraftOrderDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: OrderTransitionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: DraftOrderDetailComponent, selector: "vdr-draft-order-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-align-items-center\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"completeOrder()\"\r\n                [disabled]=\"!order.customer || !order.lines.length || !order.shippingLines.length\"\r\n            >\r\n                <clr-icon shape=\"check\"></clr-icon>\r\n                {{ 'order.complete-draft-order' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"deleteOrder()\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'order.delete-draft-order' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon *ngIf=\"!order.customer\" shape=\"unknown-status\" class=\"is-warning\"></clr-icon>\r\n                <clr-icon *ngIf=\"order.customer\" shape=\"check\" class=\"is-success\"></clr-icon>\r\n            </ng-template>\r\n            <vdr-customer-label\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.customer\"\r\n                [customer]=\"order.customer\"\r\n            ></vdr-customer-label>\r\n            <button class=\"button-small\" (click)=\"setCustomer()\">\r\n                {{ 'order.set-customer-for-order' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.billing-address' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.billingAddress.streetLine1\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.billingAddress.streetLine1\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.billingAddress\"\r\n                [address]=\"order.billingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small\" (click)=\"setBillingAddress()\">\r\n                {{ 'order.set-billing-address' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.shipping' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.shippingAddress.streetLine1 || !order.shippingLines.length\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.shippingAddress.streetLine1 && order.shippingLines.length\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.shippingAddress\"\r\n                [address]=\"order.shippingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small mr-2\" (click)=\"setShippingAddress()\">\r\n                {{ 'order.set-shipping-address' | translate }}\r\n            </button>\r\n\r\n            <div *ngFor=\"let shippingLine of order.shippingLines\">\r\n                {{ shippingLine.shippingMethod.name }}\r\n            </div>\r\n            <button class=\"button-small\" (click)=\"setShippingMethod()\">\r\n                {{ 'order.set-shipping-method' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <button\r\n                *ngIf=\"order.couponCodes.length === 0 && !displayCouponCodeInput\"\r\n                class=\"button-small\"\r\n                (click)=\"displayCouponCodeInput = !displayCouponCodeInput\"\r\n            >\r\n                {{ 'order.set-coupon-codes' | translate }}\r\n            </button>\r\n            <div *ngIf=\"order.couponCodes.length || displayCouponCodeInput\">\r\n                <label>{{ 'order.set-coupon-codes' | translate }}</label>\r\n                <vdr-coupon-code-selector\r\n                    [couponCodes]=\"order.couponCodes\"\r\n                    (addCouponCode)=\"applyCouponCode($event)\"\r\n                    (removeCouponCode)=\"removeCouponCode($event)\"\r\n                ></vdr-coupon-code-selector>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <vdr-page-block>\r\n        <vdr-card>\r\n            <vdr-draft-order-variant-selector\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                (addItem)=\"addItemToOrder($event)\"\r\n            ></vdr-draft-order-variant-selector>\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [isDraft]=\"true\"\r\n                (adjust)=\"adjustOrderLine($event)\"\r\n                (remove)=\"removeOrderLine($event)\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\">\r\n            <ng-container *ngIf=\"order.taxSummary.length\">\r\n                <table class=\"table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>{{ 'common.description' | translate }}</th>\r\n                            <th>{{ 'order.tax-rate' | translate }}</th>\r\n                            <th>{{ 'order.tax-base' | translate }}</th>\r\n                            <th>{{ 'order.tax-total' | translate }}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let row of order.taxSummary\">\r\n                            <td>{{ row.description }}</td>\r\n                            <td>{{ row.taxRate / 100 | percent }}</td>\r\n                            <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                            <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </vdr-card>\r\n\r\n        <vdr-order-custom-fields-card\r\n            [customFieldsConfig]=\"customFields\"\r\n            [customFieldValues]=\"order.customFields\"\r\n            (updateClick)=\"updateCustomFields($event)\"\r\n        ></vdr-order-custom-fields-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "component", type: OrderCustomFieldsCardComponent, selector: "vdr-order-custom-fields-card", inputs: ["customFieldsConfig", "customFieldValues"], outputs: ["updateClick"] }, { kind: "component", type: OrderTableComponent, selector: "vdr-order-table", inputs: ["order", "orderLineCustomFields", "isDraft"], outputs: ["adjust", "remove"] }, { kind: "component", type: DraftOrderVariantSelectorComponent, selector: "vdr-draft-order-variant-selector", inputs: ["currencyCode", "orderLineCustomFields"], outputs: ["addItem"] }, { kind: "component", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: ["couponCodes", "control"], outputs: ["addCouponCode", "removeCouponCode"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: DraftOrderDetailComponent, selector: "vdr-draft-order-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-align-items-center\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"draft-order-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"completeOrder()\"\r\n                [disabled]=\"!order.customer || !order.lines.length || !order.shippingLines.length\"\r\n            >\r\n                <clr-icon shape=\"check\"></clr-icon>\r\n                {{ 'order.complete-draft-order' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"deleteOrder()\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'order.delete-draft-order' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon *ngIf=\"!order.customer\" shape=\"unknown-status\" class=\"is-warning\"></clr-icon>\r\n                <clr-icon *ngIf=\"order.customer\" shape=\"check\" class=\"is-success\"></clr-icon>\r\n            </ng-template>\r\n            <vdr-customer-label\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.customer\"\r\n                [customer]=\"order.customer\"\r\n            ></vdr-customer-label>\r\n            <button class=\"button-small\" (click)=\"setCustomer()\">\r\n                {{ 'order.set-customer-for-order' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.billing-address' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.billingAddress.streetLine1\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.billingAddress.streetLine1\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.billingAddress\"\r\n                [address]=\"order.billingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small\" (click)=\"setBillingAddress()\">\r\n                {{ 'order.set-billing-address' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.shipping' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.shippingAddress.streetLine1 || !order.shippingLines.length\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.shippingAddress.streetLine1 && order.shippingLines.length\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.shippingAddress\"\r\n                [address]=\"order.shippingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small mr-2\" (click)=\"setShippingAddress()\">\r\n                {{ 'order.set-shipping-address' | translate }}\r\n            </button>\r\n\r\n            <div *ngFor=\"let shippingLine of order.shippingLines\">\r\n                {{ shippingLine.shippingMethod.name }}\r\n            </div>\r\n            <button class=\"button-small\" (click)=\"setShippingMethod()\">\r\n                {{ 'order.set-shipping-method' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <button\r\n                *ngIf=\"order.couponCodes.length === 0 && !displayCouponCodeInput\"\r\n                class=\"button-small\"\r\n                (click)=\"displayCouponCodeInput = !displayCouponCodeInput\"\r\n            >\r\n                {{ 'order.set-coupon-codes' | translate }}\r\n            </button>\r\n            <div *ngIf=\"order.couponCodes.length || displayCouponCodeInput\">\r\n                <label>{{ 'order.set-coupon-codes' | translate }}</label>\r\n                <vdr-coupon-code-selector\r\n                    [couponCodes]=\"order.couponCodes\"\r\n                    (addCouponCode)=\"applyCouponCode($event)\"\r\n                    (removeCouponCode)=\"removeCouponCode($event)\"\r\n                ></vdr-coupon-code-selector>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <vdr-page-block>\r\n        <vdr-card>\r\n            <vdr-draft-order-variant-selector\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                (addItem)=\"addItemToOrder($event)\"\r\n            ></vdr-draft-order-variant-selector>\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [isDraft]=\"true\"\r\n                (adjust)=\"adjustOrderLine($event)\"\r\n                (remove)=\"removeOrderLine($event)\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\">\r\n            <ng-container *ngIf=\"order.taxSummary.length\">\r\n                <table class=\"table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>{{ 'common.description' | translate }}</th>\r\n                            <th>{{ 'order.tax-rate' | translate }}</th>\r\n                            <th>{{ 'order.tax-base' | translate }}</th>\r\n                            <th>{{ 'order.tax-total' | translate }}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let row of order.taxSummary\">\r\n                            <td>{{ row.description }}</td>\r\n                            <td>{{ row.taxRate / 100 | percent }}</td>\r\n                            <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                            <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </vdr-card>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"draft-order-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n\r\n        <vdr-order-custom-fields-card\r\n            [customFieldsConfig]=\"customFields\"\r\n            [customFieldValues]=\"order.customFields\"\r\n            (updateClick)=\"updateCustomFields($event)\"\r\n        ></vdr-order-custom-fields-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "component", type: OrderCustomFieldsCardComponent, selector: "vdr-order-custom-fields-card", inputs: ["customFieldsConfig", "customFieldValues"], outputs: ["updateClick"] }, { kind: "component", type: OrderTableComponent, selector: "vdr-order-table", inputs: ["order", "orderLineCustomFields", "isDraft"], outputs: ["adjust", "remove"] }, { kind: "component", type: DraftOrderVariantSelectorComponent, selector: "vdr-draft-order-variant-selector", inputs: ["currencyCode", "orderLineCustomFields"], outputs: ["addItem"] }, { kind: "component", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: ["couponCodes", "control"], outputs: ["addCouponCode", "removeCouponCode"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DraftOrderDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-draft-order-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-align-items-center\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"completeOrder()\"\r\n                [disabled]=\"!order.customer || !order.lines.length || !order.shippingLines.length\"\r\n            >\r\n                <clr-icon shape=\"check\"></clr-icon>\r\n                {{ 'order.complete-draft-order' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"deleteOrder()\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'order.delete-draft-order' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon *ngIf=\"!order.customer\" shape=\"unknown-status\" class=\"is-warning\"></clr-icon>\r\n                <clr-icon *ngIf=\"order.customer\" shape=\"check\" class=\"is-success\"></clr-icon>\r\n            </ng-template>\r\n            <vdr-customer-label\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.customer\"\r\n                [customer]=\"order.customer\"\r\n            ></vdr-customer-label>\r\n            <button class=\"button-small\" (click)=\"setCustomer()\">\r\n                {{ 'order.set-customer-for-order' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.billing-address' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.billingAddress.streetLine1\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.billingAddress.streetLine1\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.billingAddress\"\r\n                [address]=\"order.billingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small\" (click)=\"setBillingAddress()\">\r\n                {{ 'order.set-billing-address' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.shipping' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.shippingAddress.streetLine1 || !order.shippingLines.length\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.shippingAddress.streetLine1 && order.shippingLines.length\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.shippingAddress\"\r\n                [address]=\"order.shippingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small mr-2\" (click)=\"setShippingAddress()\">\r\n                {{ 'order.set-shipping-address' | translate }}\r\n            </button>\r\n\r\n            <div *ngFor=\"let shippingLine of order.shippingLines\">\r\n                {{ shippingLine.shippingMethod.name }}\r\n            </div>\r\n            <button class=\"button-small\" (click)=\"setShippingMethod()\">\r\n                {{ 'order.set-shipping-method' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <button\r\n                *ngIf=\"order.couponCodes.length === 0 && !displayCouponCodeInput\"\r\n                class=\"button-small\"\r\n                (click)=\"displayCouponCodeInput = !displayCouponCodeInput\"\r\n            >\r\n                {{ 'order.set-coupon-codes' | translate }}\r\n            </button>\r\n            <div *ngIf=\"order.couponCodes.length || displayCouponCodeInput\">\r\n                <label>{{ 'order.set-coupon-codes' | translate }}</label>\r\n                <vdr-coupon-code-selector\r\n                    [couponCodes]=\"order.couponCodes\"\r\n                    (addCouponCode)=\"applyCouponCode($event)\"\r\n                    (removeCouponCode)=\"removeCouponCode($event)\"\r\n                ></vdr-coupon-code-selector>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <vdr-page-block>\r\n        <vdr-card>\r\n            <vdr-draft-order-variant-selector\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                (addItem)=\"addItemToOrder($event)\"\r\n            ></vdr-draft-order-variant-selector>\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [isDraft]=\"true\"\r\n                (adjust)=\"adjustOrderLine($event)\"\r\n                (remove)=\"removeOrderLine($event)\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\">\r\n            <ng-container *ngIf=\"order.taxSummary.length\">\r\n                <table class=\"table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>{{ 'common.description' | translate }}</th>\r\n                            <th>{{ 'order.tax-rate' | translate }}</th>\r\n                            <th>{{ 'order.tax-base' | translate }}</th>\r\n                            <th>{{ 'order.tax-total' | translate }}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let row of order.taxSummary\">\r\n                            <td>{{ row.description }}</td>\r\n                            <td>{{ row.taxRate / 100 | percent }}</td>\r\n                            <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                            <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </vdr-card>\r\n\r\n        <vdr-order-custom-fields-card\r\n            [customFieldsConfig]=\"customFields\"\r\n            [customFieldValues]=\"order.customFields\"\r\n            (updateClick)=\"updateCustomFields($event)\"\r\n        ></vdr-order-custom-fields-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n" }]
+            args: [{ selector: 'vdr-draft-order-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-align-items-center\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"draft-order-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"completeOrder()\"\r\n                [disabled]=\"!order.customer || !order.lines.length || !order.shippingLines.length\"\r\n            >\r\n                <clr-icon shape=\"check\"></clr-icon>\r\n                {{ 'order.complete-draft-order' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"deleteOrder()\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'order.delete-draft-order' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon *ngIf=\"!order.customer\" shape=\"unknown-status\" class=\"is-warning\"></clr-icon>\r\n                <clr-icon *ngIf=\"order.customer\" shape=\"check\" class=\"is-success\"></clr-icon>\r\n            </ng-template>\r\n            <vdr-customer-label\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.customer\"\r\n                [customer]=\"order.customer\"\r\n            ></vdr-customer-label>\r\n            <button class=\"button-small\" (click)=\"setCustomer()\">\r\n                {{ 'order.set-customer-for-order' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.billing-address' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.billingAddress.streetLine1\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.billingAddress.streetLine1\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.billingAddress\"\r\n                [address]=\"order.billingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small\" (click)=\"setBillingAddress()\">\r\n                {{ 'order.set-billing-address' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.shipping' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.shippingAddress.streetLine1 || !order.shippingLines.length\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.shippingAddress.streetLine1 && order.shippingLines.length\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.shippingAddress\"\r\n                [address]=\"order.shippingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small mr-2\" (click)=\"setShippingAddress()\">\r\n                {{ 'order.set-shipping-address' | translate }}\r\n            </button>\r\n\r\n            <div *ngFor=\"let shippingLine of order.shippingLines\">\r\n                {{ shippingLine.shippingMethod.name }}\r\n            </div>\r\n            <button class=\"button-small\" (click)=\"setShippingMethod()\">\r\n                {{ 'order.set-shipping-method' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <button\r\n                *ngIf=\"order.couponCodes.length === 0 && !displayCouponCodeInput\"\r\n                class=\"button-small\"\r\n                (click)=\"displayCouponCodeInput = !displayCouponCodeInput\"\r\n            >\r\n                {{ 'order.set-coupon-codes' | translate }}\r\n            </button>\r\n            <div *ngIf=\"order.couponCodes.length || displayCouponCodeInput\">\r\n                <label>{{ 'order.set-coupon-codes' | translate }}</label>\r\n                <vdr-coupon-code-selector\r\n                    [couponCodes]=\"order.couponCodes\"\r\n                    (addCouponCode)=\"applyCouponCode($event)\"\r\n                    (removeCouponCode)=\"removeCouponCode($event)\"\r\n                ></vdr-coupon-code-selector>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <vdr-page-block>\r\n        <vdr-card>\r\n            <vdr-draft-order-variant-selector\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                (addItem)=\"addItemToOrder($event)\"\r\n            ></vdr-draft-order-variant-selector>\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [isDraft]=\"true\"\r\n                (adjust)=\"adjustOrderLine($event)\"\r\n                (remove)=\"removeOrderLine($event)\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\">\r\n            <ng-container *ngIf=\"order.taxSummary.length\">\r\n                <table class=\"table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>{{ 'common.description' | translate }}</th>\r\n                            <th>{{ 'order.tax-rate' | translate }}</th>\r\n                            <th>{{ 'order.tax-base' | translate }}</th>\r\n                            <th>{{ 'order.tax-total' | translate }}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let row of order.taxSummary\">\r\n                            <td>{{ row.description }}</td>\r\n                            <td>{{ row.taxRate / 100 | percent }}</td>\r\n                            <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                            <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </vdr-card>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"draft-order-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n\r\n        <vdr-order-custom-fields-card\r\n            [customFieldsConfig]=\"customFields\"\r\n            [customFieldValues]=\"order.customFields\"\r\n            (updateClick)=\"updateCustomFields($event)\"\r\n        ></vdr-order-custom-fields-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i1.NotificationService }, { type: i1.ModalService }, { type: OrderTransitionService }]; } });
 
 class FulfillOrderDialogComponent {
@@ -1001,7 +1001,8 @@ class FulfillOrderDialogComponent {
     }
     getUnfulfilledCount(line) {
         const fulfilled = this.order.fulfillments
-            ?.map(f => f.lines)
+            ?.filter(f => f.state !== 'Cancelled')
+            .map(f => f.lines)
             .flat()
             .filter(row => row.orderLineId === line.id)
             .reduce((sum, row) => sum + row.quantity, 0) ?? 0;
@@ -1009,8 +1010,9 @@ class FulfillOrderDialogComponent {
     }
     canSubmit() {
         const totalCount = Object.values(this.fulfillmentQuantities).reduce((total, { fulfillCount }) => total + fulfillCount, 0);
+        const fulfillmentQuantityIsValid = Object.values(this.fulfillmentQuantities).every(({ fulfillCount, max }) => fulfillCount <= max);
         const formIsValid = configurableOperationValueIsValid(this.fulfillmentHandlerDef, this.fulfillmentHandlerControl.value) && this.fulfillmentHandlerControl.valid;
-        return formIsValid && 0 < totalCount;
+        return formIsValid && 0 < totalCount && fulfillmentQuantityIsValid;
     }
     select() {
         const lines = Object.entries(this.fulfillmentQuantities).map(([orderLineId, { fulfillCount }]) => ({
@@ -1887,13 +1889,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImpor
                 type: Input
             }] } });
 
-const ORDER_DETAIL_QUERY = gql `
-    query OrderDetailQuery($id: ID!) {
-        order(id: $id) {
-            ...OrderDetail
-        }
-    }
-    ${ORDER_DETAIL_FRAGMENT}
+const ORDER_DETAIL_QUERY = gql `
+    query OrderDetailQuery($id: ID!) {
+        order(id: $id) {
+            ...OrderDetail
+        }
+    }
+    ${ORDER_DETAIL_FRAGMENT}
 `;
 class OrderDetailComponent extends TypedBaseDetailComponent {
     constructor(changeDetector, dataService, notificationService, modalService, orderTransitionService, formBuilder) {
@@ -2072,7 +2074,9 @@ class OrderDetailComponent extends TypedBaseDetailComponent {
         }
     }
     canAddFulfillment(order) {
-        const allFulfillmentLines = (order.fulfillments ?? []).reduce((all, fulfillment) => [...all, ...fulfillment.lines], []);
+        const allFulfillmentLines = (order.fulfillments ?? [])
+            .filter(fulfillment => fulfillment.state !== 'Cancelled')
+            .reduce((all, fulfillment) => [...all, ...fulfillment.lines], []);
         let allItemsFulfilled = true;
         for (const line of order.lines) {
             const totalFulfilledCount = allFulfillmentLines
@@ -2406,11 +2410,11 @@ class OrderDetailComponent extends TypedBaseDetailComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OrderDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: OrderTransitionService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: OrderDetailComponent, selector: "vdr-order-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left> </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"order-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    (order.state === 'ArrangingPayment' || order.state === 'ArrangingAdditionalPayment') &&\r\n                    (hasUnsettledModifications(order) || 0 < outstandingPaymentAmount(order))\r\n                \"\r\n                (click)=\"addManualPayment(order)\"\r\n            >\r\n                {{ 'order.add-payment-to-order' | translate }}\r\n                ({{ outstandingPaymentAmount(order) | localeCurrency : order.currencyCode }})\r\n            </button>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    order.active === false &&\r\n                    order.state !== 'ArrangingAdditionalPayment' &&\r\n                    order.state !== 'ArrangingPayment' &&\r\n                    0 < outstandingPaymentAmount(order)\r\n                \"\r\n                (click)=\"transitionToState('ArrangingAdditionalPayment')\"\r\n            >\r\n                {{ 'order.arrange-additional-payment' | translate }}\r\n            </button>\r\n            <button\r\n                *ngIf=\"order.type !== 'Aggregate'\"\r\n                class=\"button primary mr-1\"\r\n                (click)=\"fulfillOrder()\"\r\n                [disabled]=\"!canAddFulfillment(order)\"\r\n            >\r\n                {{ 'order.fulfill-order' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <ng-container\r\n                        *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Modifying')\"\r\n                    >\r\n                        <button type=\"button\" vdrDropdownItem (click)=\"transitionToModifying()\">\r\n                            <clr-icon shape=\"pencil\"></clr-icon>\r\n                            {{ 'order.modify-order' | translate }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                    </ng-container>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Cancelled')\"\r\n                        (click)=\"cancelOrRefund(order)\"\r\n                    >\r\n                        <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                        <ng-container *ngIf=\"orderHasSettledPayments(order); else cancelOnly\">\r\n                            {{ 'order.refund-and-cancel-order' | translate }}\r\n                        </ng-container>\r\n                        <ng-template #cancelOnly>\r\n                            {{ 'order.cancel-order' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n\r\n                    <ng-container *ngIf=\"(nextStates$ | async)?.length\">\r\n                        <div class=\"dropdown-divider\"></div>\r\n                        <button\r\n                            *ngFor=\"let nextState of nextStates$ | async\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"transitionToState(nextState)\"\r\n                        >\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate : { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </button>\r\n                    </ng-container>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"manuallyTransitionToState(order)\">\r\n                        <clr-icon shape=\"step-forward-2\" class=\"is-warning\"></clr-icon>\r\n                        {{ 'order.manually-transition-to-state' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <vdr-order-state-label [state]=\"order.state\">\r\n                <button\r\n                    class=\"icon-button\"\r\n                    (click)=\"openStateDiagram()\"\r\n                    [title]=\"'order.order-state-diagram' | translate\"\r\n                >\r\n                    <clr-icon shape=\"list\"></clr-icon>\r\n                </button>\r\n            </vdr-order-state-label>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n            <vdr-labeled-data\r\n                class=\"mt-2\"\r\n                [label]=\"'order.shipping-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.shippingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.shippingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data\r\n                [label]=\"'order.billing-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.billingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.billingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.payments' | translate\" *ngIf=\"order.payments?.length\">\r\n            <vdr-order-payment-card\r\n                *ngFor=\"let payment of order.payments\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                [payment]=\"payment\"\r\n                (settlePayment)=\"settlePayment($event)\"\r\n                (transitionPaymentState)=\"transitionPaymentState($event)\"\r\n                (settleRefund)=\"settleRefund($event)\"\r\n            ></vdr-order-payment-card>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"order.fulfillments?.length\">\r\n            <vdr-fulfillment-card\r\n                *ngFor=\"let fulfillment of order.fulfillments\"\r\n                [fulfillment]=\"fulfillment\"\r\n                [order]=\"order\"\r\n                (transitionState)=\"transitionFulfillment(fulfillment.id, $event)\"\r\n            ></vdr-fulfillment-card>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n\r\n    <vdr-page-block>\r\n        <vdr-seller-orders-card\r\n            class=\"mb-2\"\r\n            *ngIf=\"order.sellerOrders.length\"\r\n            [orderId]=\"order.id\"\r\n        ></vdr-seller-orders-card>\r\n        <vdr-card [paddingX]=\"false\">\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\" [paddingX]=\"false\">\r\n            <table class=\"table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>{{ 'common.description' | translate }}</th>\r\n                        <th>{{ 'order.tax-rate' | translate }}</th>\r\n                        <th>{{ 'order.tax-base' | translate }}</th>\r\n                        <th>{{ 'order.tax-total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let row of order.taxSummary\">\r\n                        <td>{{ row.description }}</td>\r\n                        <td>{{ row.taxRate / 100 | percent }}</td>\r\n                        <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                        <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Order\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                [readonly]=\"!('UpdateOrder' | hasPermission)\"\r\n            />\r\n            <button\r\n                class=\"button primary\"\r\n                (click)=\"updateCustomFields()\"\r\n                [disabled]=\"\r\n                    detailForm.get('customFields')?.pristine || detailForm.get('customFields')?.invalid\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"order-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n\r\n        <vdr-card [title]=\"'order.order-history' | translate\">\r\n            <vdr-order-history\r\n                [order]=\"order\"\r\n                [history]=\"history$ | async\"\r\n                (addNote)=\"addNote($event)\"\r\n                (updateNote)=\"updateNote($event)\"\r\n                (deleteNote)=\"deleteNote($event)\"\r\n            ></vdr-order-history>\r\n        </vdr-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".shipping-address{list-style-type:none;line-height:1.3em}.order-cards h6{margin-top:6px;color:var(--color-text-200)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: OrderPaymentCardComponent, selector: "vdr-order-payment-card", inputs: ["payment", "currencyCode"], outputs: ["settlePayment", "transitionPaymentState", "settleRefund"] }, { kind: "component", type: OrderHistoryComponent, selector: "vdr-order-history", inputs: ["order", "history"], outputs: ["addNote", "updateNote", "deleteNote"] }, { kind: "component", type: FulfillmentCardComponent, selector: "vdr-fulfillment-card", inputs: ["fulfillment", "order"], outputs: ["transitionState"] }, { kind: "component", type: OrderTableComponent, selector: "vdr-order-table", inputs: ["order", "orderLineCustomFields", "isDraft"], outputs: ["adjust", "remove"] }, { kind: "component", type: SellerOrdersCardComponent, selector: "vdr-seller-orders-card", inputs: ["orderId"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: OrderDetailComponent, selector: "vdr-order-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left> </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"order-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    (order.state === 'ArrangingPayment' || order.state === 'ArrangingAdditionalPayment') &&\r\n                    (hasUnsettledModifications(order) || 0 < outstandingPaymentAmount(order))\r\n                \"\r\n                (click)=\"addManualPayment(order)\"\r\n            >\r\n                {{ 'order.add-payment-to-order' | translate }}\r\n                ({{ outstandingPaymentAmount(order) | localeCurrency : order.currencyCode }})\r\n            </button>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    order.active === false &&\r\n                    order.state !== 'ArrangingAdditionalPayment' &&\r\n                    order.state !== 'ArrangingPayment' &&\r\n                    0 < outstandingPaymentAmount(order)\r\n                \"\r\n                (click)=\"transitionToState('ArrangingAdditionalPayment')\"\r\n            >\r\n                {{ 'order.arrange-additional-payment' | translate }}\r\n            </button>\r\n            <button\r\n                *ngIf=\"order.type !== 'Aggregate'\"\r\n                class=\"button primary mr-1\"\r\n                (click)=\"fulfillOrder()\"\r\n                [disabled]=\"!canAddFulfillment(order)\"\r\n            >\r\n                {{ 'order.fulfill-order' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <ng-container\r\n                        *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Modifying')\"\r\n                    >\r\n                        <button type=\"button\" vdrDropdownItem (click)=\"transitionToModifying()\">\r\n                            <clr-icon shape=\"pencil\"></clr-icon>\r\n                            {{ 'order.modify-order' | translate }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                    </ng-container>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Cancelled')\"\r\n                        (click)=\"cancelOrRefund(order)\"\r\n                    >\r\n                        <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                        <ng-container *ngIf=\"orderHasSettledPayments(order); else cancelOnly\">\r\n                            {{ 'order.refund-and-cancel-order' | translate }}\r\n                        </ng-container>\r\n                        <ng-template #cancelOnly>\r\n                            {{ 'order.cancel-order' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n\r\n                    <ng-container *ngIf=\"(nextStates$ | async)?.length\">\r\n                        <div class=\"dropdown-divider\"></div>\r\n                        <button\r\n                            *ngFor=\"let nextState of nextStates$ | async\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"transitionToState(nextState)\"\r\n                        >\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate : { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </button>\r\n                    </ng-container>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"manuallyTransitionToState(order)\">\r\n                        <clr-icon shape=\"step-forward-2\" class=\"is-warning\"></clr-icon>\r\n                        {{ 'order.manually-transition-to-state' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <vdr-order-state-label [state]=\"order.state\">\r\n                <button\r\n                    class=\"icon-button\"\r\n                    (click)=\"openStateDiagram()\"\r\n                    [title]=\"'order.order-state-diagram' | translate\"\r\n                >\r\n                    <clr-icon shape=\"list\"></clr-icon>\r\n                </button>\r\n            </vdr-order-state-label>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n            <vdr-labeled-data\r\n                class=\"mt-2\"\r\n                [label]=\"'order.shipping-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.shippingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.shippingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data\r\n                [label]=\"'order.billing-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.billingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.billingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.payments' | translate\" *ngIf=\"order.payments?.length\">\r\n            <vdr-order-payment-card\r\n                *ngFor=\"let payment of order.payments\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                [payment]=\"payment\"\r\n                (settlePayment)=\"settlePayment($event)\"\r\n                (transitionPaymentState)=\"transitionPaymentState($event)\"\r\n                (settleRefund)=\"settleRefund($event)\"\r\n            ></vdr-order-payment-card>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"order.fulfillments?.length\">\r\n            <vdr-fulfillment-card\r\n                *ngFor=\"let fulfillment of order.fulfillments\"\r\n                [fulfillment]=\"fulfillment\"\r\n                [order]=\"order\"\r\n                (transitionState)=\"transitionFulfillment(fulfillment.id, $event)\"\r\n            ></vdr-fulfillment-card>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n\r\n    <vdr-page-block>\r\n        <vdr-seller-orders-card\r\n            class=\"mb-2\"\r\n            *ngIf=\"order.sellerOrders.length\"\r\n            [orderId]=\"order.id\"\r\n        ></vdr-seller-orders-card>\r\n        <vdr-card [paddingX]=\"false\">\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\" [paddingX]=\"false\">\r\n            <table class=\"table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>{{ 'common.description' | translate }}</th>\r\n                        <th>{{ 'order.tax-rate' | translate }}</th>\r\n                        <th>{{ 'order.tax-base' | translate }}</th>\r\n                        <th>{{ 'order.tax-total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let row of order.taxSummary\">\r\n                        <td>{{ row.description }}</td>\r\n                        <td>{{ row.taxRate / 100 | percent:'0.0-2' }}</td>\r\n                        <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                        <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Order\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                [readonly]=\"!('UpdateOrder' | hasPermission)\"\r\n            />\r\n            <button\r\n                class=\"button primary\"\r\n                (click)=\"updateCustomFields()\"\r\n                [disabled]=\"\r\n                    detailForm.get('customFields')?.pristine || detailForm.get('customFields')?.invalid\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"order-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n\r\n        <vdr-card [title]=\"'order.order-history' | translate\">\r\n            <vdr-order-history\r\n                [order]=\"order\"\r\n                [history]=\"history$ | async\"\r\n                (addNote)=\"addNote($event)\"\r\n                (updateNote)=\"updateNote($event)\"\r\n                (deleteNote)=\"deleteNote($event)\"\r\n            ></vdr-order-history>\r\n        </vdr-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".shipping-address{list-style-type:none;line-height:1.3em}.order-cards h6{margin-top:6px;color:var(--color-text-200)}\n"], dependencies: [{ kind: "directive", type: i1$1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: OrderPaymentCardComponent, selector: "vdr-order-payment-card", inputs: ["payment", "currencyCode"], outputs: ["settlePayment", "transitionPaymentState", "settleRefund"] }, { kind: "component", type: OrderHistoryComponent, selector: "vdr-order-history", inputs: ["order", "history"], outputs: ["addNote", "updateNote", "deleteNote"] }, { kind: "component", type: FulfillmentCardComponent, selector: "vdr-fulfillment-card", inputs: ["fulfillment", "order"], outputs: ["transitionState"] }, { kind: "component", type: OrderTableComponent, selector: "vdr-order-table", inputs: ["order", "orderLineCustomFields", "isDraft"], outputs: ["adjust", "remove"] }, { kind: "component", type: SellerOrdersCardComponent, selector: "vdr-seller-orders-card", inputs: ["orderId"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.StateI18nTokenPipe, name: "stateI18nToken" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OrderDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left> </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"order-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    (order.state === 'ArrangingPayment' || order.state === 'ArrangingAdditionalPayment') &&\r\n                    (hasUnsettledModifications(order) || 0 < outstandingPaymentAmount(order))\r\n                \"\r\n                (click)=\"addManualPayment(order)\"\r\n            >\r\n                {{ 'order.add-payment-to-order' | translate }}\r\n                ({{ outstandingPaymentAmount(order) | localeCurrency : order.currencyCode }})\r\n            </button>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    order.active === false &&\r\n                    order.state !== 'ArrangingAdditionalPayment' &&\r\n                    order.state !== 'ArrangingPayment' &&\r\n                    0 < outstandingPaymentAmount(order)\r\n                \"\r\n                (click)=\"transitionToState('ArrangingAdditionalPayment')\"\r\n            >\r\n                {{ 'order.arrange-additional-payment' | translate }}\r\n            </button>\r\n            <button\r\n                *ngIf=\"order.type !== 'Aggregate'\"\r\n                class=\"button primary mr-1\"\r\n                (click)=\"fulfillOrder()\"\r\n                [disabled]=\"!canAddFulfillment(order)\"\r\n            >\r\n                {{ 'order.fulfill-order' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <ng-container\r\n                        *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Modifying')\"\r\n                    >\r\n                        <button type=\"button\" vdrDropdownItem (click)=\"transitionToModifying()\">\r\n                            <clr-icon shape=\"pencil\"></clr-icon>\r\n                            {{ 'order.modify-order' | translate }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                    </ng-container>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Cancelled')\"\r\n                        (click)=\"cancelOrRefund(order)\"\r\n                    >\r\n                        <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                        <ng-container *ngIf=\"orderHasSettledPayments(order); else cancelOnly\">\r\n                            {{ 'order.refund-and-cancel-order' | translate }}\r\n                        </ng-container>\r\n                        <ng-template #cancelOnly>\r\n                            {{ 'order.cancel-order' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n\r\n                    <ng-container *ngIf=\"(nextStates$ | async)?.length\">\r\n                        <div class=\"dropdown-divider\"></div>\r\n                        <button\r\n                            *ngFor=\"let nextState of nextStates$ | async\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"transitionToState(nextState)\"\r\n                        >\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate : { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </button>\r\n                    </ng-container>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"manuallyTransitionToState(order)\">\r\n                        <clr-icon shape=\"step-forward-2\" class=\"is-warning\"></clr-icon>\r\n                        {{ 'order.manually-transition-to-state' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <vdr-order-state-label [state]=\"order.state\">\r\n                <button\r\n                    class=\"icon-button\"\r\n                    (click)=\"openStateDiagram()\"\r\n                    [title]=\"'order.order-state-diagram' | translate\"\r\n                >\r\n                    <clr-icon shape=\"list\"></clr-icon>\r\n                </button>\r\n            </vdr-order-state-label>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n            <vdr-labeled-data\r\n                class=\"mt-2\"\r\n                [label]=\"'order.shipping-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.shippingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.shippingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data\r\n                [label]=\"'order.billing-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.billingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.billingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.payments' | translate\" *ngIf=\"order.payments?.length\">\r\n            <vdr-order-payment-card\r\n                *ngFor=\"let payment of order.payments\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                [payment]=\"payment\"\r\n                (settlePayment)=\"settlePayment($event)\"\r\n                (transitionPaymentState)=\"transitionPaymentState($event)\"\r\n                (settleRefund)=\"settleRefund($event)\"\r\n            ></vdr-order-payment-card>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"order.fulfillments?.length\">\r\n            <vdr-fulfillment-card\r\n                *ngFor=\"let fulfillment of order.fulfillments\"\r\n                [fulfillment]=\"fulfillment\"\r\n                [order]=\"order\"\r\n                (transitionState)=\"transitionFulfillment(fulfillment.id, $event)\"\r\n            ></vdr-fulfillment-card>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n\r\n    <vdr-page-block>\r\n        <vdr-seller-orders-card\r\n            class=\"mb-2\"\r\n            *ngIf=\"order.sellerOrders.length\"\r\n            [orderId]=\"order.id\"\r\n        ></vdr-seller-orders-card>\r\n        <vdr-card [paddingX]=\"false\">\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\" [paddingX]=\"false\">\r\n            <table class=\"table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>{{ 'common.description' | translate }}</th>\r\n                        <th>{{ 'order.tax-rate' | translate }}</th>\r\n                        <th>{{ 'order.tax-base' | translate }}</th>\r\n                        <th>{{ 'order.tax-total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let row of order.taxSummary\">\r\n                        <td>{{ row.description }}</td>\r\n                        <td>{{ row.taxRate / 100 | percent }}</td>\r\n                        <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                        <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Order\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                [readonly]=\"!('UpdateOrder' | hasPermission)\"\r\n            />\r\n            <button\r\n                class=\"button primary\"\r\n                (click)=\"updateCustomFields()\"\r\n                [disabled]=\"\r\n                    detailForm.get('customFields')?.pristine || detailForm.get('customFields')?.invalid\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"order-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n\r\n        <vdr-card [title]=\"'order.order-history' | translate\">\r\n            <vdr-order-history\r\n                [order]=\"order\"\r\n                [history]=\"history$ | async\"\r\n                (addNote)=\"addNote($event)\"\r\n                (updateNote)=\"updateNote($event)\"\r\n                (deleteNote)=\"deleteNote($event)\"\r\n            ></vdr-order-history>\r\n        </vdr-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".shipping-address{list-style-type:none;line-height:1.3em}.order-cards h6{margin-top:6px;color:var(--color-text-200)}\n"] }]
+            args: [{ selector: 'vdr-order-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left> </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"order-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    (order.state === 'ArrangingPayment' || order.state === 'ArrangingAdditionalPayment') &&\r\n                    (hasUnsettledModifications(order) || 0 < outstandingPaymentAmount(order))\r\n                \"\r\n                (click)=\"addManualPayment(order)\"\r\n            >\r\n                {{ 'order.add-payment-to-order' | translate }}\r\n                ({{ outstandingPaymentAmount(order) | localeCurrency : order.currencyCode }})\r\n            </button>\r\n            <button\r\n                class=\"button primary mr-1\"\r\n                *ngIf=\"\r\n                    order.type !== 'Aggregate' &&\r\n                    order.active === false &&\r\n                    order.state !== 'ArrangingAdditionalPayment' &&\r\n                    order.state !== 'ArrangingPayment' &&\r\n                    0 < outstandingPaymentAmount(order)\r\n                \"\r\n                (click)=\"transitionToState('ArrangingAdditionalPayment')\"\r\n            >\r\n                {{ 'order.arrange-additional-payment' | translate }}\r\n            </button>\r\n            <button\r\n                *ngIf=\"order.type !== 'Aggregate'\"\r\n                class=\"button primary mr-1\"\r\n                (click)=\"fulfillOrder()\"\r\n                [disabled]=\"!canAddFulfillment(order)\"\r\n            >\r\n                {{ 'order.fulfill-order' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <ng-container\r\n                        *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Modifying')\"\r\n                    >\r\n                        <button type=\"button\" vdrDropdownItem (click)=\"transitionToModifying()\">\r\n                            <clr-icon shape=\"pencil\"></clr-icon>\r\n                            {{ 'order.modify-order' | translate }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                    </ng-container>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        *ngIf=\"order.type !== 'Aggregate' && order.nextStates.includes('Cancelled')\"\r\n                        (click)=\"cancelOrRefund(order)\"\r\n                    >\r\n                        <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                        <ng-container *ngIf=\"orderHasSettledPayments(order); else cancelOnly\">\r\n                            {{ 'order.refund-and-cancel-order' | translate }}\r\n                        </ng-container>\r\n                        <ng-template #cancelOnly>\r\n                            {{ 'order.cancel-order' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n\r\n                    <ng-container *ngIf=\"(nextStates$ | async)?.length\">\r\n                        <div class=\"dropdown-divider\"></div>\r\n                        <button\r\n                            *ngFor=\"let nextState of nextStates$ | async\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"transitionToState(nextState)\"\r\n                        >\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate : { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </button>\r\n                    </ng-container>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"manuallyTransitionToState(order)\">\r\n                        <clr-icon shape=\"step-forward-2\" class=\"is-warning\"></clr-icon>\r\n                        {{ 'order.manually-transition-to-state' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <vdr-order-state-label [state]=\"order.state\">\r\n                <button\r\n                    class=\"icon-button\"\r\n                    (click)=\"openStateDiagram()\"\r\n                    [title]=\"'order.order-state-diagram' | translate\"\r\n                >\r\n                    <clr-icon shape=\"list\"></clr-icon>\r\n                </button>\r\n            </vdr-order-state-label>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n            <vdr-labeled-data\r\n                class=\"mt-2\"\r\n                [label]=\"'order.shipping-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.shippingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.shippingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data\r\n                [label]=\"'order.billing-address' | translate\"\r\n                *ngIf=\"getOrderAddressLines(order.billingAddress).length\"\r\n            >\r\n                <vdr-formatted-address [address]=\"order.billingAddress\" class=\"mt-1\"></vdr-formatted-address>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.payments' | translate\" *ngIf=\"order.payments?.length\">\r\n            <vdr-order-payment-card\r\n                *ngFor=\"let payment of order.payments\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                [payment]=\"payment\"\r\n                (settlePayment)=\"settlePayment($event)\"\r\n                (transitionPaymentState)=\"transitionPaymentState($event)\"\r\n                (settleRefund)=\"settleRefund($event)\"\r\n            ></vdr-order-payment-card>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"order.fulfillments?.length\">\r\n            <vdr-fulfillment-card\r\n                *ngFor=\"let fulfillment of order.fulfillments\"\r\n                [fulfillment]=\"fulfillment\"\r\n                [order]=\"order\"\r\n                (transitionState)=\"transitionFulfillment(fulfillment.id, $event)\"\r\n            ></vdr-fulfillment-card>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n\r\n    <vdr-page-block>\r\n        <vdr-seller-orders-card\r\n            class=\"mb-2\"\r\n            *ngIf=\"order.sellerOrders.length\"\r\n            [orderId]=\"order.id\"\r\n        ></vdr-seller-orders-card>\r\n        <vdr-card [paddingX]=\"false\">\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\" [paddingX]=\"false\">\r\n            <table class=\"table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>{{ 'common.description' | translate }}</th>\r\n                        <th>{{ 'order.tax-rate' | translate }}</th>\r\n                        <th>{{ 'order.tax-base' | translate }}</th>\r\n                        <th>{{ 'order.tax-total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let row of order.taxSummary\">\r\n                        <td>{{ row.description }}</td>\r\n                        <td>{{ row.taxRate / 100 | percent:'0.0-2' }}</td>\r\n                        <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                        <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Order\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                [readonly]=\"!('UpdateOrder' | hasPermission)\"\r\n            />\r\n            <button\r\n                class=\"button primary\"\r\n                (click)=\"updateCustomFields()\"\r\n                [disabled]=\"\r\n                    detailForm.get('customFields')?.pristine || detailForm.get('customFields')?.invalid\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"order-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n\r\n        <vdr-card [title]=\"'order.order-history' | translate\">\r\n            <vdr-order-history\r\n                [order]=\"order\"\r\n                [history]=\"history$ | async\"\r\n                (addNote)=\"addNote($event)\"\r\n                (updateNote)=\"updateNote($event)\"\r\n                (deleteNote)=\"deleteNote($event)\"\r\n            ></vdr-order-history>\r\n        </vdr-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [".shipping-address{list-style-type:none;line-height:1.3em}.order-cards h6{margin-top:6px;color:var(--color-text-200)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i1.NotificationService }, { type: i1.ModalService }, { type: OrderTransitionService }, { type: i2.FormBuilder }]; } });
 
 var OrderEditResultType;