@vendure/admin-ui 2.1.0-next.6 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/common/base-list.component.d.ts +1 -0
- package/core/common/version.d.ts +1 -1
- package/core/extension/register-route-component.d.ts +3 -3
- package/core/providers/data-table/data-table-filter-collection.d.ts +2 -0
- package/core/providers/data-table/data-table-sort-collection.d.ts +2 -0
- package/core/shared/components/data-table-filter-presets/data-table-filter-presets.component.d.ts +3 -2
- package/core/shared/components/data-table-filters/data-table-filters.component.d.ts +1 -1
- package/core/shared/components/order-state-label/order-state-label.component.d.ts +1 -1
- package/core/shared/dynamic-form-inputs/default-form-inputs.d.ts +1 -1
- package/esm2022/core/common/base-list.component.mjs +13 -4
- package/esm2022/core/common/version.mjs +2 -2
- package/esm2022/core/extension/register-route-component.mjs +1 -1
- package/esm2022/core/providers/data-table/data-table-filter-collection.mjs +19 -3
- package/esm2022/core/providers/data-table/data-table-sort-collection.mjs +8 -2
- package/esm2022/core/shared/components/affixed-input/affixed-input.component.mjs +2 -2
- package/esm2022/core/shared/components/asset-gallery/asset-gallery.component.mjs +1 -1
- package/esm2022/core/shared/components/data-table-filter-presets/data-table-filter-presets.component.mjs +7 -5
- package/esm2022/core/shared/components/data-table-filters/data-table-filters.component.mjs +5 -4
- package/esm2022/order/components/order-data-table/order-data-table.component.mjs +3 -3
- package/esm2022/order/components/order-table/order-table.component.mjs +3 -3
- package/fesm2022/vendure-admin-ui-core.mjs +47 -14
- package/fesm2022/vendure-admin-ui-core.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-order.mjs +4 -4
- package/fesm2022/vendure-admin-ui-order.mjs.map +1 -1
- package/package.json +13 -13
- package/static/i18n-messages/ar.json +1 -1
- package/static/i18n-messages/cs.json +1 -1
- package/static/i18n-messages/de.json +1 -1
- package/static/i18n-messages/en.json +1 -1
- package/static/i18n-messages/es.json +1 -1
- package/static/i18n-messages/fa.json +795 -0
- package/static/i18n-messages/fr.json +1 -1
- package/static/i18n-messages/he.json +1 -1
- package/static/i18n-messages/it.json +1 -1
- package/static/i18n-messages/ne.json +795 -0
- package/static/i18n-messages/pl.json +1 -1
- package/static/i18n-messages/pt_BR.json +1 -1
- package/static/i18n-messages/pt_PT.json +1 -1
- package/static/i18n-messages/ru.json +1 -1
- package/static/i18n-messages/uk.json +1 -1
- package/static/i18n-messages/zh_Hans.json +1 -1
- package/static/i18n-messages/zh_Hant.json +1 -1
- package/static/vendure-ui-config.json +3 -1
|
@@ -656,11 +656,11 @@ class OrderDataTableComponent extends DataTable2Component {
|
|
|
656
656
|
}
|
|
657
657
|
}
|
|
658
658
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
659
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: { order: "order" }, queries: [{ propertyName: "totalColumns", predicate: OrderTotalColumnComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"bulk-actions\">\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-table-header-border);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}\n"], dependencies: [{ kind: "directive", type: i1$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 }); }
|
|
659
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: { order: "order" }, queries: [{ propertyName: "totalColumns", predicate: OrderTotalColumnComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"bulk-actions\">\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 <vdr-ui-extension-point\r\n [locationId]=\"id\"\r\n [metadata]=\"column.id\"\r\n api=\"dataTable\"\r\n [topPx]=\"-6\"\r\n [leftPx]=\"-24\"\r\n display=\"block\"\r\n >\r\n <span>{{ column.heading }}</span>\r\n </vdr-ui-extension-point>\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 *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n >\r\n <ng-container\r\n *ngComponentOutlet=\"\r\n componentConfig.config.component;\r\n inputs: { rowItem: item };\r\n injector: componentConfig.injector\r\n \"\r\n ></ng-container>\r\n </ng-container>\r\n <ng-template #defaultComponent>\r\n <ng-container\r\n *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n ></ng-container>\r\n </ng-template>\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-table-header-border);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}\n"], dependencies: [{ kind: "directive", type: i1$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.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { 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 }); }
|
|
660
660
|
}
|
|
661
661
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderDataTableComponent, decorators: [{
|
|
662
662
|
type: Component,
|
|
663
|
-
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-table-header-border);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}\n"] }]
|
|
663
|
+
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 <vdr-ui-extension-point\r\n [locationId]=\"id\"\r\n [metadata]=\"column.id\"\r\n api=\"dataTable\"\r\n [topPx]=\"-6\"\r\n [leftPx]=\"-24\"\r\n display=\"block\"\r\n >\r\n <span>{{ column.heading }}</span>\r\n </vdr-ui-extension-point>\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 *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n >\r\n <ng-container\r\n *ngComponentOutlet=\"\r\n componentConfig.config.component;\r\n inputs: { rowItem: item };\r\n injector: componentConfig.injector\r\n \"\r\n ></ng-container>\r\n </ng-container>\r\n <ng-template #defaultComponent>\r\n <ng-container\r\n *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n ></ng-container>\r\n </ng-template>\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-table-header-border);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}\n"] }]
|
|
664
664
|
}], propDecorators: { totalColumns: [{
|
|
665
665
|
type: ContentChildren,
|
|
666
666
|
args: [OrderTotalColumnComponent]
|
|
@@ -734,11 +734,11 @@ class OrderTableComponent {
|
|
|
734
734
|
}
|
|
735
735
|
}
|
|
736
736
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
737
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderTableComponent, selector: "vdr-order-table", inputs: { order: "order", orderLineCustomFields: "orderLineCustomFields", isDraft: "isDraft" }, outputs: { adjust: "adjust", remove: "remove" }, ngImport: i0, template: "<vdr-order-data-table id=\"order-detail
|
|
737
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderTableComponent, selector: "vdr-order-table", inputs: { order: "order", orderLineCustomFields: "orderLineCustomFields", isDraft: "isDraft" }, outputs: { adjust: "adjust", remove: "remove" }, ngImport: i0, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\r\n <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n <ng-template let-line=\"item\">\r\n <div class=\"image-placeholder\">\r\n <img\r\n *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\r\n [src]=\"asset | assetPreview : 'tiny'\"\r\n />\r\n <ng-template #imagePlaceholder>\r\n <div class=\"placeholder\">\r\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.product-name' | translate\" id=\"product-name\">\r\n <ng-template let-line=\"item\">\r\n {{ line.productVariant.name }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.product-sku' | translate\" id=\"product-sku\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n {{ line.productVariant.sku }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.unit-price' | translate\" id=\"unit-price\">\r\n <ng-template let-line=\"item\">\r\n <div class=\"unit-price\">\r\n {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{ line.unitPrice | localeCurrency : order.currencyCode }}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.quantity' | translate\" id=\"quantity\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n <ng-container *ngIf=\"!isDraft; else draft\">\r\n <div class=\"flex\">\r\n <div\r\n *ngIf=\"line.orderPlacedQuantity && line.quantity !== line.orderPlacedQuantity\"\r\n class=\"order-placed-quantity\"\r\n [title]=\"'order.original-quantity-at-checkout' | translate\"\r\n >\r\n {{ line.orderPlacedQuantity }}\r\n </div>\r\n <div>{{ line.quantity }}</div>\r\n </div>\r\n </ng-container>\r\n <ng-template #draft>\r\n <div class=\"flex\">\r\n <input\r\n class=\"draft-qty\"\r\n type=\"number\"\r\n min=\"0\"\r\n #qtyInput\r\n [value]=\"line.quantity\"\r\n (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\r\n />\r\n <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\r\n <clr-icon shape=\"trash\"></clr-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n <vdr-line-fulfillment\r\n [line]=\"line\"\r\n [orderState]=\"order.state\"\r\n [allOrderFulfillments]=\"order.fulfillments\"\r\n ></vdr-line-fulfillment>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-custom-field-column\r\n *ngFor=\"let customField of orderLineCustomFields\"\r\n [customField]=\"customField\"\r\n />\r\n <vdr-order-total-column [heading]=\"'order.total' | translate\" id=\"total\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n <div class=\"unit-price\">\r\n {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{ line.linePrice | localeCurrency : order.currencyCode }}\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\r\n <vdr-dropdown *ngIf=\"discounts.length\">\r\n <div class=\"promotions-label\" vdrDropdownTrigger>\r\n {{ 'order.promotions-applied' | translate }}\r\n </div>\r\n <vdr-dropdown-menu>\r\n <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\r\n discount.description\r\n }}</a>\r\n <div class=\"promotion-amount\">\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 </div>\r\n </div>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </ng-container>\r\n </ng-template>\r\n </vdr-order-total-column>\r\n</vdr-order-data-table>\r\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-inline-start:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i1$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: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: ["order"] }, { kind: "component", type: OrderTotalColumnComponent, selector: "vdr-order-total-column", exportAs: ["row"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
738
738
|
}
|
|
739
739
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderTableComponent, decorators: [{
|
|
740
740
|
type: Component,
|
|
741
|
-
args: [{ selector: 'vdr-order-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-order-data-table id=\"order-detail
|
|
741
|
+
args: [{ selector: 'vdr-order-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\r\n <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n <ng-template let-line=\"item\">\r\n <div class=\"image-placeholder\">\r\n <img\r\n *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\r\n [src]=\"asset | assetPreview : 'tiny'\"\r\n />\r\n <ng-template #imagePlaceholder>\r\n <div class=\"placeholder\">\r\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.product-name' | translate\" id=\"product-name\">\r\n <ng-template let-line=\"item\">\r\n {{ line.productVariant.name }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.product-sku' | translate\" id=\"product-sku\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n {{ line.productVariant.sku }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.unit-price' | translate\" id=\"unit-price\">\r\n <ng-template let-line=\"item\">\r\n <div class=\"unit-price\">\r\n {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{ line.unitPrice | localeCurrency : order.currencyCode }}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'order.quantity' | translate\" id=\"quantity\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n <ng-container *ngIf=\"!isDraft; else draft\">\r\n <div class=\"flex\">\r\n <div\r\n *ngIf=\"line.orderPlacedQuantity && line.quantity !== line.orderPlacedQuantity\"\r\n class=\"order-placed-quantity\"\r\n [title]=\"'order.original-quantity-at-checkout' | translate\"\r\n >\r\n {{ line.orderPlacedQuantity }}\r\n </div>\r\n <div>{{ line.quantity }}</div>\r\n </div>\r\n </ng-container>\r\n <ng-template #draft>\r\n <div class=\"flex\">\r\n <input\r\n class=\"draft-qty\"\r\n type=\"number\"\r\n min=\"0\"\r\n #qtyInput\r\n [value]=\"line.quantity\"\r\n (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\r\n />\r\n <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\r\n <clr-icon shape=\"trash\"></clr-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n <vdr-line-fulfillment\r\n [line]=\"line\"\r\n [orderState]=\"order.state\"\r\n [allOrderFulfillments]=\"order.fulfillments\"\r\n ></vdr-line-fulfillment>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-custom-field-column\r\n *ngFor=\"let customField of orderLineCustomFields\"\r\n [customField]=\"customField\"\r\n />\r\n <vdr-order-total-column [heading]=\"'order.total' | translate\" id=\"total\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n <div class=\"unit-price\">\r\n {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{ line.linePrice | localeCurrency : order.currencyCode }}\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\r\n <vdr-dropdown *ngIf=\"discounts.length\">\r\n <div class=\"promotions-label\" vdrDropdownTrigger>\r\n {{ 'order.promotions-applied' | translate }}\r\n </div>\r\n <vdr-dropdown-menu>\r\n <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\r\n discount.description\r\n }}</a>\r\n <div class=\"promotion-amount\">\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 </div>\r\n </div>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </ng-container>\r\n </ng-template>\r\n </vdr-order-total-column>\r\n</vdr-order-data-table>\r\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-inline-start:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"] }]
|
|
742
742
|
}], propDecorators: { order: [{
|
|
743
743
|
type: Input
|
|
744
744
|
}], orderLineCustomFields: [{
|