@deenruv/admin-ui 1.0.17-dev.33 → 1.0.17-dev.35
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/version.d.ts +1 -1
- package/esm2022/core/common/version.mjs +2 -2
- package/esm2022/order/components/fulfill-order-dialog/fulfill-order-dialog.component.mjs +2 -2
- package/esm2022/order/components/order-data-table/order-data-table.component.mjs +2 -2
- package/esm2022/order/components/order-editor/order-editor.component.mjs +2 -2
- package/esm2022/order/components/order-table/order-table.component.mjs +2 -2
- package/fesm2022/deenruv-admin-ui-core.mjs +1 -1
- package/fesm2022/deenruv-admin-ui-core.mjs.map +1 -1
- package/fesm2022/deenruv-admin-ui-order.mjs +8 -8
- package/fesm2022/deenruv-admin-ui-order.mjs.map +1 -1
- package/package.json +20 -20
|
@@ -678,11 +678,11 @@ class OrderDataTableComponent extends DataTable2Component {
|
|
|
678
678
|
}
|
|
679
679
|
}
|
|
680
680
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
681
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: { order: "order" }, queries: [{ propertyName: "totalColumns", predicate: OrderTotalColumnComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"bulk-actions\">\n <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\n</div>\n<div class=\"table-wrapper\">\n <table\n class=\"\"\n [class.no-select]=\"disableSelect\"\n >\n <thead [class.items-selected]=\"selectionManager?.selection.length\">\n <tr class=\"heading-row\">\n <th *ngIf=\"selectionManager\" class=\"selection-col\">\n <input\n type=\"checkbox\"\n clrCheckbox\n [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\n (change)=\"onToggleAllClick()\"\n />\n </th>\n <th\n *ngFor=\"let column of visibleSortedColumns; last as isLast\"\n [class.expand]=\"column.expand\"\n >\n <div class=\"cell-content\" [ngClass]=\"column.align\">\n <vdr-ui-extension-point\n [locationId]=\"id\"\n [metadata]=\"column.id\"\n api=\"dataTable\"\n [topPx]=\"-6\"\n [leftPx]=\"-24\"\n display=\"block\"\n >\n <span>{{ column.heading }}</span>\n </vdr-ui-extension-point>\n <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\n <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\n <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\n <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\n <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\n </button>\n <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\n </div>\n </div>\n </th>\n <th>\n <div class=\"column-picker\">\n <vdr-data-table-colum-picker\n [uiLanguage]=\"uiLanguage$ | async\"\n [columns]=\"sortedColumns\"\n (reorder)=\"onColumnReorder($event)\"\n (resetColumns)=\"onColumnsReset()\"\n ></vdr-data-table-colum-picker>\n </div>\n </th>\n </tr>\n <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\n <th\n [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\n class=\"filter-row\"\n [class.active]=\"showSearchFilterRow\"\n >\n <button\n class=\"button-ghost toggle-search-filter-row\"\n [class.active]=\"showSearchFilterRow\"\n (click)=\"toggleSearchFilterRow()\"\n [title]=\"'common.search-and-filter-list' | translate\"\n >\n <clr-icon shape=\"search\"></clr-icon>\n </button>\n <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\n <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\n <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\n <ng-container *ngIf=\"filters\">\n <div class=\"filters\">\n <vdr-data-table-filters\n *ngFor=\"let activeFilter of filters.activeFilters\"\n [filterWithValue]=\"activeFilter\"\n [filters]=\"filters\"\n class=\"mt-1\"\n ></vdr-data-table-filters>\n <vdr-data-table-filters\n *ngIf=\"filters.length\"\n [filters]=\"filters\"\n class=\"mt-1\"\n ></vdr-data-table-filters>\n </div>\n </ng-container>\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr\n *ngFor=\"\n let item of items\n | paginate\n : {\n id: id,\n itemsPerPage: itemsPerPage,\n currentPage: currentPage,\n totalItems: totalItems\n };\n index as i;\n trackBy: trackByFn\n \"\n >\n <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\n <input\n type=\"checkbox\"\n clrCheckbox\n [checked]=\"selectionManager?.isSelected(item)\"\n (click)=\"onRowClick(item, $event)\"\n />\n </td>\n <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\n <div class=\"cell-content\" [ngClass]=\"column.align\">\n <ng-container\n *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\n >\n <ng-container\n *ngComponentOutlet=\"\n componentConfig.config.component;\n inputs: { rowItem: item };\n injector: componentConfig.injector\n \"\n ></ng-container>\n </ng-container>\n <ng-template #defaultComponent>\n <ng-container\n *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\n ></ng-container>\n </ng-template>\n </div>\n </td>\n <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\n </tr>\n <ng-container>\n <tr *ngIf=\"!items?.length\">\n <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\n <vdr-empty-placeholder [emptyStateLabel]=\"'order.order-is-empty' | translate\"></vdr-empty-placeholder>\n </td>\n </tr>\n </ng-container>\n <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\n <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\n <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\n <td class=\"align-middle\" [attr.colspan]=\"visibleSortedColumns.length - 4\"></td>\n <td class=\"align-middle total\">\n {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ surcharge.price | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n <ng-container *ngFor=\"let discount of order.discounts\">\n <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\n <td [attr.colspan]=\"visibleSortedColumns.length - 1\" class=\"\">\n <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\n <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\n couponCode\n }}</vdr-chip>\n </td>\n <td class=\"\">\n {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ discount.amount | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n </ng-container>\n <tr class=\"sub-total\">\n <td class=\"\">{{ 'order.sub-total' | translate }}</td>\n <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\n <td class=\"clr-align-middle\">\n {{ order.subTotalWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ order.subTotal | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n <tr class=\"shipping\">\n <td class=\"\">{{ 'order.shipping' | translate }}</td>\n <td [attr.colspan]=\"visibleSortedColumns.length - 2\">\n <vdr-chip *ngFor=\"let shippingLine of order.shippingLines\" class=\"shipping-method-name\">\n {{ shippingLine.shippingMethod.name }}\n </vdr-chip>\n </td>\n <td class=\"clr-align-middle\">\n {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ order.shipping | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n <tr class=\"total\">\n <td class=\"\">{{ 'order.total' | translate }}</td>\n <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\n <td class=\"clr-align-middle\">\n {{ order.totalWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ order.total | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n </tbody>\n </table>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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, vdr-currency-input" }, { 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$1.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
681
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderDataTableComponent, selector: "vdr-order-data-table", inputs: { order: "order" }, queries: [{ propertyName: "totalColumns", predicate: OrderTotalColumnComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"bulk-actions\">\n <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\n</div>\n<div class=\"table-wrapper\">\n <table\n class=\"\"\n [class.no-select]=\"disableSelect\"\n >\n <thead [class.items-selected]=\"selectionManager?.selection.length\">\n <tr class=\"heading-row\">\n <th *ngIf=\"selectionManager\" class=\"selection-col\">\n <input\n type=\"checkbox\"\n clrCheckbox\n [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\n (change)=\"onToggleAllClick()\"\n />\n </th>\n <th\n *ngFor=\"let column of visibleSortedColumns; last as isLast\"\n [class.expand]=\"column.expand\"\n >\n <div class=\"cell-content\" [ngClass]=\"column.align\">\n <vdr-ui-extension-point\n [locationId]=\"id\"\n [metadata]=\"column.id\"\n api=\"dataTable\"\n [topPx]=\"-6\"\n [leftPx]=\"-24\"\n display=\"block\"\n >\n <span>{{ column.heading }}</span>\n </vdr-ui-extension-point>\n <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\n <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\n <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\n <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\n <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\n </button>\n <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\n </div>\n </div>\n </th>\n <th>\n <div class=\"column-picker\">\n <vdr-data-table-colum-picker\n [uiLanguage]=\"uiLanguage$ | async\"\n [columns]=\"sortedColumns\"\n (reorder)=\"onColumnReorder($event)\"\n (resetColumns)=\"onColumnsReset()\"\n ></vdr-data-table-colum-picker>\n </div>\n </th>\n </tr>\n <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\n <th\n [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\n class=\"filter-row\"\n [class.active]=\"showSearchFilterRow\"\n >\n <button\n class=\"button-ghost toggle-search-filter-row\"\n [class.active]=\"showSearchFilterRow\"\n (click)=\"toggleSearchFilterRow()\"\n [title]=\"'common.search-and-filter-list' | translate\"\n >\n <clr-icon shape=\"search\"></clr-icon>\n </button>\n <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\n <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\n <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\n <ng-container *ngIf=\"filters\">\n <div class=\"filters\">\n <vdr-data-table-filters\n *ngFor=\"let activeFilter of filters.activeFilters\"\n [filterWithValue]=\"activeFilter\"\n [filters]=\"filters\"\n class=\"mt-1\"\n ></vdr-data-table-filters>\n <vdr-data-table-filters\n *ngIf=\"filters.length\"\n [filters]=\"filters\"\n class=\"mt-1\"\n ></vdr-data-table-filters>\n </div>\n </ng-container>\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr\n *ngFor=\"\n let item of items\n | paginate\n : {\n id: id,\n itemsPerPage: itemsPerPage,\n currentPage: currentPage,\n totalItems: totalItems\n };\n index as i;\n trackBy: trackByFn\n \"\n >\n <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\n <input\n type=\"checkbox\"\n clrCheckbox\n [checked]=\"selectionManager?.isSelected(item)\"\n (click)=\"onRowClick(item, $event)\"\n />\n </td>\n <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\n <div class=\"cell-content\" [ngClass]=\"column.align\">\n <ng-container\n *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\n >\n <ng-container\n *ngComponentOutlet=\"\n componentConfig.config.component;\n inputs: { rowItem: item };\n injector: componentConfig.injector\n \"\n ></ng-container>\n </ng-container>\n <ng-template #defaultComponent>\n <ng-container\n *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\n ></ng-container>\n </ng-template>\n </div>\n </td>\n <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\n </tr>\n <ng-container>\n <tr *ngIf=\"!items?.length\">\n <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\n <vdr-empty-placeholder [emptyStateLabel]=\"'order.order-is-empty' | translate\"></vdr-empty-placeholder>\n </td>\n </tr>\n </ng-container>\n <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\n <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\n <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\n <td class=\"align-middle\" [attr.colspan]=\"visibleSortedColumns.length - 4\"></td>\n <td class=\"align-middle total\">\n {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ surcharge.price | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n <ng-container *ngFor=\"let discount of order.discounts\">\n <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\n <td [attr.colspan]=\"visibleSortedColumns.length - 1\" class=\"\">\n <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\n <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\n couponCode\n }}</vdr-chip>\n </td>\n <td class=\"\">\n {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ discount.amount | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n </ng-container>\n <tr class=\"sub-total\">\n <td class=\"\">{{ 'order.sub-total' | translate }}</td>\n <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\n <td class=\"clr-align-middle\">\n {{ order.subTotalWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ order.subTotal | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n <tr class=\"shipping\">\n <td class=\"\">{{ 'order.shipping' | translate }}</td>\n <td [attr.colspan]=\"visibleSortedColumns.length - 2\">\n <vdr-chip *ngFor=\"let shippingLine of order.shippingLines\" class=\"shipping-method-name\">\n {{ shippingLine.shippingMethod.name }}\n </vdr-chip>\n </td>\n <td class=\"clr-align-middle\">\n {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ order.shipping | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n <tr class=\"total\">\n <td class=\"\">{{ 'order.total' | translate }}</td>\n <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\n <td class=\"clr-align-middle\">\n {{ order.totalWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ order.total | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n </tbody>\n </table>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}:host .image-placeholder img{width:50px;height:50px;object-fit:cover}:host .image-placeholder .placeholder{display:flex;width:50px;height:50px;align-items:center;justify-content:center;color:var(--color-grey-300)}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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, vdr-currency-input" }, { 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$1.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
682
682
|
}
|
|
683
683
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderDataTableComponent, decorators: [{
|
|
684
684
|
type: Component,
|
|
685
|
-
args: [{ selector: 'vdr-order-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bulk-actions\">\n <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\n</div>\n<div class=\"table-wrapper\">\n <table\n class=\"\"\n [class.no-select]=\"disableSelect\"\n >\n <thead [class.items-selected]=\"selectionManager?.selection.length\">\n <tr class=\"heading-row\">\n <th *ngIf=\"selectionManager\" class=\"selection-col\">\n <input\n type=\"checkbox\"\n clrCheckbox\n [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\n (change)=\"onToggleAllClick()\"\n />\n </th>\n <th\n *ngFor=\"let column of visibleSortedColumns; last as isLast\"\n [class.expand]=\"column.expand\"\n >\n <div class=\"cell-content\" [ngClass]=\"column.align\">\n <vdr-ui-extension-point\n [locationId]=\"id\"\n [metadata]=\"column.id\"\n api=\"dataTable\"\n [topPx]=\"-6\"\n [leftPx]=\"-24\"\n display=\"block\"\n >\n <span>{{ column.heading }}</span>\n </vdr-ui-extension-point>\n <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\n <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\n <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\n <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\n <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\n </button>\n <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\n </div>\n </div>\n </th>\n <th>\n <div class=\"column-picker\">\n <vdr-data-table-colum-picker\n [uiLanguage]=\"uiLanguage$ | async\"\n [columns]=\"sortedColumns\"\n (reorder)=\"onColumnReorder($event)\"\n (resetColumns)=\"onColumnsReset()\"\n ></vdr-data-table-colum-picker>\n </div>\n </th>\n </tr>\n <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\n <th\n [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\n class=\"filter-row\"\n [class.active]=\"showSearchFilterRow\"\n >\n <button\n class=\"button-ghost toggle-search-filter-row\"\n [class.active]=\"showSearchFilterRow\"\n (click)=\"toggleSearchFilterRow()\"\n [title]=\"'common.search-and-filter-list' | translate\"\n >\n <clr-icon shape=\"search\"></clr-icon>\n </button>\n <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\n <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\n <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\n <ng-container *ngIf=\"filters\">\n <div class=\"filters\">\n <vdr-data-table-filters\n *ngFor=\"let activeFilter of filters.activeFilters\"\n [filterWithValue]=\"activeFilter\"\n [filters]=\"filters\"\n class=\"mt-1\"\n ></vdr-data-table-filters>\n <vdr-data-table-filters\n *ngIf=\"filters.length\"\n [filters]=\"filters\"\n class=\"mt-1\"\n ></vdr-data-table-filters>\n </div>\n </ng-container>\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr\n *ngFor=\"\n let item of items\n | paginate\n : {\n id: id,\n itemsPerPage: itemsPerPage,\n currentPage: currentPage,\n totalItems: totalItems\n };\n index as i;\n trackBy: trackByFn\n \"\n >\n <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\n <input\n type=\"checkbox\"\n clrCheckbox\n [checked]=\"selectionManager?.isSelected(item)\"\n (click)=\"onRowClick(item, $event)\"\n />\n </td>\n <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\n <div class=\"cell-content\" [ngClass]=\"column.align\">\n <ng-container\n *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\n >\n <ng-container\n *ngComponentOutlet=\"\n componentConfig.config.component;\n inputs: { rowItem: item };\n injector: componentConfig.injector\n \"\n ></ng-container>\n </ng-container>\n <ng-template #defaultComponent>\n <ng-container\n *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\n ></ng-container>\n </ng-template>\n </div>\n </td>\n <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\n </tr>\n <ng-container>\n <tr *ngIf=\"!items?.length\">\n <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\n <vdr-empty-placeholder [emptyStateLabel]=\"'order.order-is-empty' | translate\"></vdr-empty-placeholder>\n </td>\n </tr>\n </ng-container>\n <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\n <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\n <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\n <td class=\"align-middle\" [attr.colspan]=\"visibleSortedColumns.length - 4\"></td>\n <td class=\"align-middle total\">\n {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ surcharge.price | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n <ng-container *ngFor=\"let discount of order.discounts\">\n <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\n <td [attr.colspan]=\"visibleSortedColumns.length - 1\" class=\"\">\n <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\n <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\n couponCode\n }}</vdr-chip>\n </td>\n <td class=\"\">\n {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ discount.amount | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n </ng-container>\n <tr class=\"sub-total\">\n <td class=\"\">{{ 'order.sub-total' | translate }}</td>\n <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\n <td class=\"clr-align-middle\">\n {{ order.subTotalWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ order.subTotal | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n <tr class=\"shipping\">\n <td class=\"\">{{ 'order.shipping' | translate }}</td>\n <td [attr.colspan]=\"visibleSortedColumns.length - 2\">\n <vdr-chip *ngFor=\"let shippingLine of order.shippingLines\" class=\"shipping-method-name\">\n {{ shippingLine.shippingMethod.name }}\n </vdr-chip>\n </td>\n <td class=\"clr-align-middle\">\n {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ order.shipping | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n <tr class=\"total\">\n <td class=\"\">{{ 'order.total' | translate }}</td>\n <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\n <td class=\"clr-align-middle\">\n {{ order.totalWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ order.total | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n </tbody>\n </table>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}\n"] }]
|
|
685
|
+
args: [{ selector: 'vdr-order-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bulk-actions\">\n <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\n</div>\n<div class=\"table-wrapper\">\n <table\n class=\"\"\n [class.no-select]=\"disableSelect\"\n >\n <thead [class.items-selected]=\"selectionManager?.selection.length\">\n <tr class=\"heading-row\">\n <th *ngIf=\"selectionManager\" class=\"selection-col\">\n <input\n type=\"checkbox\"\n clrCheckbox\n [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\n (change)=\"onToggleAllClick()\"\n />\n </th>\n <th\n *ngFor=\"let column of visibleSortedColumns; last as isLast\"\n [class.expand]=\"column.expand\"\n >\n <div class=\"cell-content\" [ngClass]=\"column.align\">\n <vdr-ui-extension-point\n [locationId]=\"id\"\n [metadata]=\"column.id\"\n api=\"dataTable\"\n [topPx]=\"-6\"\n [leftPx]=\"-24\"\n display=\"block\"\n >\n <span>{{ column.heading }}</span>\n </vdr-ui-extension-point>\n <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\n <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\n <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\n <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\n <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\n </button>\n <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\n </div>\n </div>\n </th>\n <th>\n <div class=\"column-picker\">\n <vdr-data-table-colum-picker\n [uiLanguage]=\"uiLanguage$ | async\"\n [columns]=\"sortedColumns\"\n (reorder)=\"onColumnReorder($event)\"\n (resetColumns)=\"onColumnsReset()\"\n ></vdr-data-table-colum-picker>\n </div>\n </th>\n </tr>\n <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\n <th\n [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\n class=\"filter-row\"\n [class.active]=\"showSearchFilterRow\"\n >\n <button\n class=\"button-ghost toggle-search-filter-row\"\n [class.active]=\"showSearchFilterRow\"\n (click)=\"toggleSearchFilterRow()\"\n [title]=\"'common.search-and-filter-list' | translate\"\n >\n <clr-icon shape=\"search\"></clr-icon>\n </button>\n <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\n <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\n <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\n <ng-container *ngIf=\"filters\">\n <div class=\"filters\">\n <vdr-data-table-filters\n *ngFor=\"let activeFilter of filters.activeFilters\"\n [filterWithValue]=\"activeFilter\"\n [filters]=\"filters\"\n class=\"mt-1\"\n ></vdr-data-table-filters>\n <vdr-data-table-filters\n *ngIf=\"filters.length\"\n [filters]=\"filters\"\n class=\"mt-1\"\n ></vdr-data-table-filters>\n </div>\n </ng-container>\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr\n *ngFor=\"\n let item of items\n | paginate\n : {\n id: id,\n itemsPerPage: itemsPerPage,\n currentPage: currentPage,\n totalItems: totalItems\n };\n index as i;\n trackBy: trackByFn\n \"\n >\n <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\n <input\n type=\"checkbox\"\n clrCheckbox\n [checked]=\"selectionManager?.isSelected(item)\"\n (click)=\"onRowClick(item, $event)\"\n />\n </td>\n <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\n <div class=\"cell-content\" [ngClass]=\"column.align\">\n <ng-container\n *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\n >\n <ng-container\n *ngComponentOutlet=\"\n componentConfig.config.component;\n inputs: { rowItem: item };\n injector: componentConfig.injector\n \"\n ></ng-container>\n </ng-container>\n <ng-template #defaultComponent>\n <ng-container\n *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\n ></ng-container>\n </ng-template>\n </div>\n </td>\n <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\n </tr>\n <ng-container>\n <tr *ngIf=\"!items?.length\">\n <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\n <vdr-empty-placeholder [emptyStateLabel]=\"'order.order-is-empty' | translate\"></vdr-empty-placeholder>\n </td>\n </tr>\n </ng-container>\n <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\n <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\n <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\n <td class=\"align-middle\" [attr.colspan]=\"visibleSortedColumns.length - 4\"></td>\n <td class=\"align-middle total\">\n {{ surcharge.priceWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ surcharge.price | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n <ng-container *ngFor=\"let discount of order.discounts\">\n <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\n <td [attr.colspan]=\"visibleSortedColumns.length - 1\" class=\"\">\n <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\n <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\n couponCode\n }}</vdr-chip>\n </td>\n <td class=\"\">\n {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ discount.amount | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n </ng-container>\n <tr class=\"sub-total\">\n <td class=\"\">{{ 'order.sub-total' | translate }}</td>\n <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\n <td class=\"clr-align-middle\">\n {{ order.subTotalWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ order.subTotal | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n <tr class=\"shipping\">\n <td class=\"\">{{ 'order.shipping' | translate }}</td>\n <td [attr.colspan]=\"visibleSortedColumns.length - 2\">\n <vdr-chip *ngFor=\"let shippingLine of order.shippingLines\" class=\"shipping-method-name\">\n {{ shippingLine.shippingMethod.name }}\n </vdr-chip>\n </td>\n <td class=\"clr-align-middle\">\n {{ order.shippingWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ order.shipping | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n <tr class=\"total\">\n <td class=\"\">{{ 'order.total' | translate }}</td>\n <td [attr.colspan]=\"visibleSortedColumns.length - 2\"></td>\n <td class=\"clr-align-middle\">\n {{ order.totalWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ order.total | localeCurrency : order.currencyCode }}\n </div>\n </td>\n <td><!-- column select --></td>\n </tr>\n </tbody>\n </table>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);color:var(--color-weight-700);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap;background-color:transparent}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);color:var(--color-text-100)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}:host .image-placeholder img{width:50px;height:50px;object-fit:cover}:host .image-placeholder .placeholder{display:flex;width:50px;height:50px;align-items:center;justify-content:center;color:var(--color-grey-300)}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}\n"] }]
|
|
686
686
|
}], propDecorators: { totalColumns: [{
|
|
687
687
|
type: ContentChildren,
|
|
688
688
|
args: [OrderTotalColumnComponent]
|
|
@@ -760,11 +760,11 @@ class OrderTableComponent {
|
|
|
760
760
|
}
|
|
761
761
|
}
|
|
762
762
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
763
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderTableComponent, selector: "vdr-order-table", inputs: { order: "order", orderLineCustomFields: "orderLineCustomFields", isDraft: "isDraft" }, outputs: { adjust: "adjust", remove: "remove" }, ngImport: i0, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\n <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\n <ng-template let-line=\"item\">\n {{ line.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"created-at\"\n [heading]=\"'common.created-at' | translate\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\">\n {{ line.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"updated-at\"\n [heading]=\"'common.updated-at' | translate\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\">\n {{ line.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n <ng-template let-line=\"item\">\n <div class=\"image-placeholder\">\n <img\n *ngIf=\"getOrderLineAsset(line) as asset; else imagePlaceholder\"\n [src]=\"asset | assetPreview : 'tiny'\"\n />\n <ng-template #imagePlaceholder>\n <div class=\"placeholder\">\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n </div>\n </ng-template>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'order.product-name' | translate\" id=\"product-name\">\n <ng-template let-line=\"item\">\n {{ line.productVariant.name }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'order.product-sku' | translate\" id=\"product-sku\" [optional]=\"false\">\n <ng-template let-line=\"item\">\n {{ line.productVariant.sku }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'order.unit-price' | translate\" id=\"unit-price\">\n <ng-template let-line=\"item\">\n <div class=\"unit-price\">\n {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ line.unitPrice | localeCurrency : order.currencyCode }}\n </div>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'order.quantity' | translate\" id=\"quantity\" [optional]=\"false\">\n <ng-template let-line=\"item\">\n <ng-container *ngIf=\"!isDraft; else draft\">\n <div class=\"flex\">\n <div\n *ngIf=\"line.orderPlacedQuantity && line.quantity !== line.orderPlacedQuantity\"\n class=\"order-placed-quantity\"\n [title]=\"'order.original-quantity-at-checkout' | translate\"\n >\n {{ line.orderPlacedQuantity }}\n </div>\n <div>{{ line.quantity }}</div>\n </div>\n </ng-container>\n <ng-template #draft>\n <div class=\"flex\">\n <input\n class=\"draft-qty\"\n type=\"number\"\n min=\"0\"\n #qtyInput\n [value]=\"line.quantity\"\n (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\n />\n <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\n <clr-icon shape=\"trash\"></clr-icon>\n </button>\n </div>\n </ng-template>\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\n <vdr-line-fulfillment\n [line]=\"line\"\n [orderState]=\"order.state\"\n [allOrderFulfillments]=\"order.fulfillments\"\n ></vdr-line-fulfillment>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-custom-field-column\n *ngFor=\"let customField of orderLineCustomFields\"\n [customField]=\"customField\"\n />\n <vdr-order-total-column [heading]=\"'order.total' | translate\" id=\"total\" [optional]=\"false\">\n <ng-template let-line=\"item\">\n <div class=\"unit-price\">\n {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ line.linePrice | localeCurrency : order.currencyCode }}\n </div>\n </div>\n\n <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\n <vdr-dropdown *ngIf=\"discounts.length\">\n <div class=\"promotions-label\" vdrDropdownTrigger>\n {{ 'order.promotions-applied' | translate }}\n </div>\n <vdr-dropdown-menu>\n <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\n <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\n discount.description\n }}</a>\n <div class=\"promotion-amount\">\n {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ discount.amount | localeCurrency : order.currencyCode }}\n </div>\n </div>\n </div>\n </vdr-dropdown-menu>\n </vdr-dropdown>\n </ng-container>\n </ng-template>\n </vdr-order-total-column>\n</vdr-order-data-table>\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{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: i3.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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { 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.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
763
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderTableComponent, selector: "vdr-order-table", inputs: { order: "order", orderLineCustomFields: "orderLineCustomFields", isDraft: "isDraft" }, outputs: { adjust: "adjust", remove: "remove" }, ngImport: i0, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\n <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\n <ng-template let-line=\"item\">\n {{ line.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"created-at\"\n [heading]=\"'common.created-at' | translate\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\">\n {{ line.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"updated-at\"\n [heading]=\"'common.updated-at' | translate\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\">\n {{ line.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n <ng-template let-line=\"item\">\n <div class=\"image-placeholder\">\n <img\n *ngIf=\"getOrderLineAsset(line) as asset; else imagePlaceholder\"\n [src]=\"asset | assetPreview : 'tiny'\"\n />\n <ng-template #imagePlaceholder>\n <div class=\"placeholder\">\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n </div>\n </ng-template>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'order.product-name' | translate\" id=\"product-name\">\n <ng-template let-line=\"item\">\n {{ line.productVariant.name }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'order.product-sku' | translate\" id=\"product-sku\" [optional]=\"false\">\n <ng-template let-line=\"item\">\n {{ line.productVariant.sku }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'order.unit-price' | translate\" id=\"unit-price\">\n <ng-template let-line=\"item\">\n <div class=\"unit-price\">\n {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ line.unitPrice | localeCurrency : order.currencyCode }}\n </div>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'order.quantity' | translate\" id=\"quantity\" [optional]=\"false\">\n <ng-template let-line=\"item\">\n <ng-container *ngIf=\"!isDraft; else draft\">\n <div class=\"flex\">\n <div\n *ngIf=\"line.orderPlacedQuantity && line.quantity !== line.orderPlacedQuantity\"\n class=\"order-placed-quantity\"\n [title]=\"'order.original-quantity-at-checkout' | translate\"\n >\n {{ line.orderPlacedQuantity }}\n </div>\n <div>{{ line.quantity }}</div>\n </div>\n </ng-container>\n <ng-template #draft>\n <div class=\"flex\">\n <input\n class=\"draft-qty\"\n type=\"number\"\n min=\"0\"\n #qtyInput\n [value]=\"line.quantity\"\n (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\n />\n <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\n <clr-icon shape=\"trash\"></clr-icon>\n </button>\n </div>\n </ng-template>\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\n <vdr-line-fulfillment\n [line]=\"line\"\n [orderState]=\"order.state\"\n [allOrderFulfillments]=\"order.fulfillments\"\n ></vdr-line-fulfillment>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-custom-field-column\n *ngFor=\"let customField of orderLineCustomFields\"\n [customField]=\"customField\"\n />\n <vdr-order-total-column [heading]=\"'order.total' | translate\" id=\"total\" [optional]=\"false\">\n <ng-template let-line=\"item\">\n <div class=\"unit-price\">\n {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ line.linePrice | localeCurrency : order.currencyCode }}\n </div>\n </div>\n\n <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\n <vdr-dropdown *ngIf=\"discounts.length\">\n <div class=\"promotions-label\" vdrDropdownTrigger>\n {{ 'order.promotions-applied' | translate }}\n </div>\n <vdr-dropdown-menu>\n <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\n <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\n discount.description\n }}</a>\n <div class=\"promotion-amount\">\n {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ discount.amount | localeCurrency : order.currencyCode }}\n </div>\n </div>\n </div>\n </vdr-dropdown-menu>\n </vdr-dropdown>\n </ng-container>\n </ng-template>\n </vdr-order-total-column>\n</vdr-order-data-table>\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}:host .image-placeholder img{width:50px;height:50px;object-fit:cover}:host .image-placeholder .placeholder{display:flex;width:50px;height:50px;align-items:center;justify-content:center;color:var(--color-grey-300)}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}::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: i3.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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { 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.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
764
764
|
}
|
|
765
765
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderTableComponent, decorators: [{
|
|
766
766
|
type: Component,
|
|
767
|
-
args: [{ selector: 'vdr-order-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\n <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\n <ng-template let-line=\"item\">\n {{ line.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"created-at\"\n [heading]=\"'common.created-at' | translate\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\">\n {{ line.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"updated-at\"\n [heading]=\"'common.updated-at' | translate\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\">\n {{ line.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n <ng-template let-line=\"item\">\n <div class=\"image-placeholder\">\n <img\n *ngIf=\"getOrderLineAsset(line) as asset; else imagePlaceholder\"\n [src]=\"asset | assetPreview : 'tiny'\"\n />\n <ng-template #imagePlaceholder>\n <div class=\"placeholder\">\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n </div>\n </ng-template>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'order.product-name' | translate\" id=\"product-name\">\n <ng-template let-line=\"item\">\n {{ line.productVariant.name }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'order.product-sku' | translate\" id=\"product-sku\" [optional]=\"false\">\n <ng-template let-line=\"item\">\n {{ line.productVariant.sku }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'order.unit-price' | translate\" id=\"unit-price\">\n <ng-template let-line=\"item\">\n <div class=\"unit-price\">\n {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ line.unitPrice | localeCurrency : order.currencyCode }}\n </div>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'order.quantity' | translate\" id=\"quantity\" [optional]=\"false\">\n <ng-template let-line=\"item\">\n <ng-container *ngIf=\"!isDraft; else draft\">\n <div class=\"flex\">\n <div\n *ngIf=\"line.orderPlacedQuantity && line.quantity !== line.orderPlacedQuantity\"\n class=\"order-placed-quantity\"\n [title]=\"'order.original-quantity-at-checkout' | translate\"\n >\n {{ line.orderPlacedQuantity }}\n </div>\n <div>{{ line.quantity }}</div>\n </div>\n </ng-container>\n <ng-template #draft>\n <div class=\"flex\">\n <input\n class=\"draft-qty\"\n type=\"number\"\n min=\"0\"\n #qtyInput\n [value]=\"line.quantity\"\n (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\n />\n <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\n <clr-icon shape=\"trash\"></clr-icon>\n </button>\n </div>\n </ng-template>\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\n <vdr-line-fulfillment\n [line]=\"line\"\n [orderState]=\"order.state\"\n [allOrderFulfillments]=\"order.fulfillments\"\n ></vdr-line-fulfillment>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-custom-field-column\n *ngFor=\"let customField of orderLineCustomFields\"\n [customField]=\"customField\"\n />\n <vdr-order-total-column [heading]=\"'order.total' | translate\" id=\"total\" [optional]=\"false\">\n <ng-template let-line=\"item\">\n <div class=\"unit-price\">\n {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ line.linePrice | localeCurrency : order.currencyCode }}\n </div>\n </div>\n\n <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\n <vdr-dropdown *ngIf=\"discounts.length\">\n <div class=\"promotions-label\" vdrDropdownTrigger>\n {{ 'order.promotions-applied' | translate }}\n </div>\n <vdr-dropdown-menu>\n <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\n <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\n discount.description\n }}</a>\n <div class=\"promotion-amount\">\n {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ discount.amount | localeCurrency : order.currencyCode }}\n </div>\n </div>\n </div>\n </vdr-dropdown-menu>\n </vdr-dropdown>\n </ng-container>\n </ng-template>\n </vdr-order-total-column>\n</vdr-order-data-table>\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{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"] }]
|
|
767
|
+
args: [{ selector: 'vdr-order-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-order-data-table id=\"order-detail-list\" [items]=\"order.lines\" [order]=\"order\">\n <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\n <ng-template let-line=\"item\">\n {{ line.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"created-at\"\n [heading]=\"'common.created-at' | translate\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\">\n {{ line.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"updated-at\"\n [heading]=\"'common.updated-at' | translate\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\">\n {{ line.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n <ng-template let-line=\"item\">\n <div class=\"image-placeholder\">\n <img\n *ngIf=\"getOrderLineAsset(line) as asset; else imagePlaceholder\"\n [src]=\"asset | assetPreview : 'tiny'\"\n />\n <ng-template #imagePlaceholder>\n <div class=\"placeholder\">\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n </div>\n </ng-template>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'order.product-name' | translate\" id=\"product-name\">\n <ng-template let-line=\"item\">\n {{ line.productVariant.name }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'order.product-sku' | translate\" id=\"product-sku\" [optional]=\"false\">\n <ng-template let-line=\"item\">\n {{ line.productVariant.sku }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'order.unit-price' | translate\" id=\"unit-price\">\n <ng-template let-line=\"item\">\n <div class=\"unit-price\">\n {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ line.unitPrice | localeCurrency : order.currencyCode }}\n </div>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'order.quantity' | translate\" id=\"quantity\" [optional]=\"false\">\n <ng-template let-line=\"item\">\n <ng-container *ngIf=\"!isDraft; else draft\">\n <div class=\"flex\">\n <div\n *ngIf=\"line.orderPlacedQuantity && line.quantity !== line.orderPlacedQuantity\"\n class=\"order-placed-quantity\"\n [title]=\"'order.original-quantity-at-checkout' | translate\"\n >\n {{ line.orderPlacedQuantity }}\n </div>\n <div>{{ line.quantity }}</div>\n </div>\n </ng-container>\n <ng-template #draft>\n <div class=\"flex\">\n <input\n class=\"draft-qty\"\n type=\"number\"\n min=\"0\"\n #qtyInput\n [value]=\"line.quantity\"\n (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\n />\n <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\n <clr-icon shape=\"trash\"></clr-icon>\n </button>\n </div>\n </ng-template>\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\n <vdr-line-fulfillment\n [line]=\"line\"\n [orderState]=\"order.state\"\n [allOrderFulfillments]=\"order.fulfillments\"\n ></vdr-line-fulfillment>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-custom-field-column\n *ngFor=\"let customField of orderLineCustomFields\"\n [customField]=\"customField\"\n />\n <vdr-order-total-column [heading]=\"'order.total' | translate\" id=\"total\" [optional]=\"false\">\n <ng-template let-line=\"item\">\n <div class=\"unit-price\">\n {{ line.linePriceWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ line.linePrice | localeCurrency : order.currencyCode }}\n </div>\n </div>\n\n <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\n <vdr-dropdown *ngIf=\"discounts.length\">\n <div class=\"promotions-label\" vdrDropdownTrigger>\n {{ 'order.promotions-applied' | translate }}\n </div>\n <vdr-dropdown-menu>\n <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\n <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\n discount.description\n }}</a>\n <div class=\"promotion-amount\">\n {{ discount.amountWithTax | localeCurrency : order.currencyCode }}\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ discount.amount | localeCurrency : order.currencyCode }}\n </div>\n </div>\n </div>\n </vdr-dropdown-menu>\n </vdr-dropdown>\n </ng-container>\n </ng-template>\n </vdr-order-total-column>\n</vdr-order-data-table>\n", styles: [":host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}:host .image-placeholder img{width:50px;height:50px;object-fit:cover}:host .image-placeholder .placeholder{display:flex;width:50px;height:50px;align-items:center;justify-content:center;color:var(--color-grey-300)}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}::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"] }]
|
|
768
768
|
}], propDecorators: { order: [{
|
|
769
769
|
type: Input
|
|
770
770
|
}], orderLineCustomFields: [{
|
|
@@ -1055,11 +1055,11 @@ class FulfillOrderDialogComponent {
|
|
|
1055
1055
|
this.resolveWith();
|
|
1056
1056
|
}
|
|
1057
1057
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FulfillOrderDialogComponent, deps: [{ token: i1.DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1058
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FulfillOrderDialogComponent, selector: "vdr-fulfill-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\n\n<div class=\"fulfillment-wrapper\">\n <div class=\"order-table\">\n <table class=\"table\">\n <thead>\n <tr>\n <th></th>\n <th>{{ 'order.product-name' | translate }}</th>\n <th>{{ 'order.product-sku' | translate }}</th>\n <th>{{ 'order.unfulfilled' | translate }}</th>\n <th>{{ 'catalog.stock-on-hand' | translate }}</th>\n <th>{{ 'order.fulfill' | translate }}</th>\n </tr>\n </thead>\n <tr\n *ngFor=\"let line of order.lines\"\n class=\"order-line\"\n [class.ignore]=\"getUnfulfilledCount(line) === 0\"\n >\n <td class=\"align-middle thumb\">\n <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\n </td>\n <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\n <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\n <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\n <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\n <td class=\"align-middle fulfil\">\n <input\n *ngIf=\"fulfillmentQuantities[line.id]\"\n [disabled]=\"getUnfulfilledCount(line) === 0\"\n [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\n type=\"number\"\n [max]=\"fulfillmentQuantities[line.id].max\"\n min=\"0\"\n />\n </td>\n </tr>\n </table>\n </div>\n <div class=\"shipping-details\">\n <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\n <h6>{{ 'order.shipping-method' | translate }}</h6>\n {{ order.shippingLines[0]?.shippingMethod?.name }}\n <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\n <vdr-configurable-input\n [operationDefinition]=\"fulfillmentHandlerDef\"\n [operation]=\"fulfillmentHandler\"\n [formControl]=\"fulfillmentHandlerControl\"\n [removable]=\"false\"\n ></vdr-configurable-input>\n </div>\n</div>\n\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\n {{ 'order.create-fulfillment' | translate }}\n </button>\n</ng-template>\n", styles: [":host{height:100%;display:flex;min-height:64vh}:host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}.fulfillment-wrapper .shipping-details{margin-top:24px}@media screen and (min-width: 768px){.fulfillment-wrapper .shipping-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"], dependencies: [{ kind: "directive", type: i2$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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position", "hideDescription"], outputs: ["remove"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1058
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FulfillOrderDialogComponent, selector: "vdr-fulfill-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\n\n<div class=\"fulfillment-wrapper\">\n <div class=\"order-table\">\n <table class=\"table\">\n <thead>\n <tr>\n <th></th>\n <th>{{ 'order.product-name' | translate }}</th>\n <th>{{ 'order.product-sku' | translate }}</th>\n <th>{{ 'order.unfulfilled' | translate }}</th>\n <th>{{ 'catalog.stock-on-hand' | translate }}</th>\n <th>{{ 'order.fulfill' | translate }}</th>\n </tr>\n </thead>\n <tr\n *ngFor=\"let line of order.lines\"\n class=\"order-line\"\n [class.ignore]=\"getUnfulfilledCount(line) === 0\"\n >\n <td class=\"align-middle thumb\">\n <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\n </td>\n <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\n <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\n <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\n <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\n <td class=\"align-middle fulfil\">\n <input\n *ngIf=\"fulfillmentQuantities[line.id]\"\n [disabled]=\"getUnfulfilledCount(line) === 0\"\n [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\n type=\"number\"\n [max]=\"fulfillmentQuantities[line.id].max\"\n min=\"0\"\n />\n </td>\n </tr>\n </table>\n </div>\n <div class=\"shipping-details\">\n <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\n <h6>{{ 'order.shipping-method' | translate }}</h6>\n {{ order.shippingLines[0]?.shippingMethod?.name }}\n <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\n <vdr-configurable-input\n [operationDefinition]=\"fulfillmentHandlerDef\"\n [operation]=\"fulfillmentHandler\"\n [formControl]=\"fulfillmentHandlerControl\"\n [removable]=\"false\"\n ></vdr-configurable-input>\n </div>\n</div>\n\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\n {{ 'order.create-fulfillment' | translate }}\n </button>\n</ng-template>\n", styles: [":host{height:100%;display:flex;min-height:64vh}:host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}:host .image-placeholder img{width:50px;height:50px;object-fit:cover}:host .image-placeholder .placeholder{display:flex;width:50px;height:50px;align-items:center;justify-content:center;color:var(--color-grey-300)}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}.fulfillment-wrapper .shipping-details{margin-top:24px}@media screen and (min-width: 768px){.fulfillment-wrapper .shipping-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"], dependencies: [{ kind: "directive", type: i2$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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position", "hideDescription"], outputs: ["remove"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1059
1059
|
}
|
|
1060
1060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FulfillOrderDialogComponent, decorators: [{
|
|
1061
1061
|
type: Component,
|
|
1062
|
-
args: [{ selector: 'vdr-fulfill-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\n\n<div class=\"fulfillment-wrapper\">\n <div class=\"order-table\">\n <table class=\"table\">\n <thead>\n <tr>\n <th></th>\n <th>{{ 'order.product-name' | translate }}</th>\n <th>{{ 'order.product-sku' | translate }}</th>\n <th>{{ 'order.unfulfilled' | translate }}</th>\n <th>{{ 'catalog.stock-on-hand' | translate }}</th>\n <th>{{ 'order.fulfill' | translate }}</th>\n </tr>\n </thead>\n <tr\n *ngFor=\"let line of order.lines\"\n class=\"order-line\"\n [class.ignore]=\"getUnfulfilledCount(line) === 0\"\n >\n <td class=\"align-middle thumb\">\n <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\n </td>\n <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\n <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\n <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\n <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\n <td class=\"align-middle fulfil\">\n <input\n *ngIf=\"fulfillmentQuantities[line.id]\"\n [disabled]=\"getUnfulfilledCount(line) === 0\"\n [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\n type=\"number\"\n [max]=\"fulfillmentQuantities[line.id].max\"\n min=\"0\"\n />\n </td>\n </tr>\n </table>\n </div>\n <div class=\"shipping-details\">\n <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\n <h6>{{ 'order.shipping-method' | translate }}</h6>\n {{ order.shippingLines[0]?.shippingMethod?.name }}\n <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\n <vdr-configurable-input\n [operationDefinition]=\"fulfillmentHandlerDef\"\n [operation]=\"fulfillmentHandler\"\n [formControl]=\"fulfillmentHandlerControl\"\n [removable]=\"false\"\n ></vdr-configurable-input>\n </div>\n</div>\n\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\n {{ 'order.create-fulfillment' | translate }}\n </button>\n</ng-template>\n", styles: [":host{height:100%;display:flex;min-height:64vh}:host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}.fulfillment-wrapper .shipping-details{margin-top:24px}@media screen and (min-width: 768px){.fulfillment-wrapper .shipping-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"] }]
|
|
1062
|
+
args: [{ selector: 'vdr-fulfill-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\n\n<div class=\"fulfillment-wrapper\">\n <div class=\"order-table\">\n <table class=\"table\">\n <thead>\n <tr>\n <th></th>\n <th>{{ 'order.product-name' | translate }}</th>\n <th>{{ 'order.product-sku' | translate }}</th>\n <th>{{ 'order.unfulfilled' | translate }}</th>\n <th>{{ 'catalog.stock-on-hand' | translate }}</th>\n <th>{{ 'order.fulfill' | translate }}</th>\n </tr>\n </thead>\n <tr\n *ngFor=\"let line of order.lines\"\n class=\"order-line\"\n [class.ignore]=\"getUnfulfilledCount(line) === 0\"\n >\n <td class=\"align-middle thumb\">\n <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\n </td>\n <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\n <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\n <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\n <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\n <td class=\"align-middle fulfil\">\n <input\n *ngIf=\"fulfillmentQuantities[line.id]\"\n [disabled]=\"getUnfulfilledCount(line) === 0\"\n [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\n type=\"number\"\n [max]=\"fulfillmentQuantities[line.id].max\"\n min=\"0\"\n />\n </td>\n </tr>\n </table>\n </div>\n <div class=\"shipping-details\">\n <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\n <h6>{{ 'order.shipping-method' | translate }}</h6>\n {{ order.shippingLines[0]?.shippingMethod?.name }}\n <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\n <vdr-configurable-input\n [operationDefinition]=\"fulfillmentHandlerDef\"\n [operation]=\"fulfillmentHandler\"\n [formControl]=\"fulfillmentHandlerControl\"\n [removable]=\"false\"\n ></vdr-configurable-input>\n </div>\n</div>\n\n<ng-template vdrDialogButtons>\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\n <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\n {{ 'order.create-fulfillment' | translate }}\n </button>\n</ng-template>\n", styles: [":host{height:100%;display:flex;min-height:64vh}:host .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}:host .sub-total td{border-top:1px dashed var(--color-component-border-200)}:host .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}:host td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}:host img{border-radius:var(--border-radius-img)}:host .order-line-custom-fields{display:flex;flex-wrap:wrap}:host .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}:host .image-placeholder img{width:50px;height:50px;object-fit:cover}:host .image-placeholder .placeholder{display:flex;width:50px;height:50px;align-items:center;justify-content:center;color:var(--color-grey-300)}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}:host .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}.fulfillment-wrapper .shipping-details{margin-top:24px}@media screen and (min-width: 768px){.fulfillment-wrapper .shipping-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"] }]
|
|
1063
1063
|
}], ctorParameters: () => [{ type: i1.DataService }, { type: i0.ChangeDetectorRef }] });
|
|
1064
1064
|
|
|
1065
1065
|
class SimpleItemListComponent {
|
|
@@ -3183,11 +3183,11 @@ class OrderEditorComponent extends TypedBaseDetailComponent {
|
|
|
3183
3183
|
/* not used */
|
|
3184
3184
|
}
|
|
3185
3185
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderEditorComponent, deps: [{ token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: OrderTransitionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3186
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderEditorComponent, selector: "vdr-order-editor", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n <vdr-action-bar *ngIf=\"entity$ | async as order\">\n <vdr-ab-left>\n <div class=\"flex clr-align-items-center\"></div>\n </vdr-ab-left>\n\n <vdr-ab-right>\n <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\n {{ 'order.cancel-modification' | translate }}\n </button>\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n\n<vdr-page-detail-layout *ngIf=\"entity as order\">\n <vdr-page-detail-sidebar>\n <vdr-card [title]=\"'order.modification-summary' | translate\">\n <vdr-order-modification-summary\n [orderSnapshot]=\"orderSnapshot\"\n [modifyOrderInput]=\"modifyOrderInput\"\n [addedLines]=\"addedLines\"\n [shippingAddressForm]=\"shippingAddressForm\"\n [billingAddressForm]=\"billingAddressForm\"\n [couponCodesControl]=\"couponCodesControl\"\n [updatedShippingMethods]=\"updatedShippingMethods\"\n ></vdr-order-modification-summary>\n\n <div *ngIf=\"!hasModifications()\" class=\"no-modifications\">\n {{ 'order.no-modifications-made' | translate }}\n </div>\n\n <div class=\"summary-controls\">\n <vdr-form-field [label]=\"'order.note' | translate\">\n <textarea\n [(ngModel)]=\"note\"\n name=\"note\"\n required\n [disabled]=\"!hasModifications()\"\n ></textarea>\n </vdr-form-field>\n <label class=\"flex items-center\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"recalculateShipping\"\n [disabled]=\"!hasModifications()\"\n />\n <div class=\"ml-1\">{{ 'order.modification-recalculate-shipping' | translate }}</div>\n </label>\n <button\n class=\"btn btn-primary mt-2\"\n [disabled]=\"!hasModifications()\"\n (click)=\"previewAndModify(order)\"\n >\n {{ 'order.preview-changes' | translate }}\n </button>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'order.set-coupon-codes' | translate\">\n <vdr-coupon-code-selector [control]=\"couponCodesControl\"></vdr-coupon-code-selector>\n </vdr-card>\n <vdr-card [title]=\"'order.shipping-address' | translate\">\n <ng-template vdrCardControls>\n <button\n class=\"button-small\"\n [title]=\"'order.edit-shipping-address' | translate\"\n (click)=\"editingShippingAddress = !editingShippingAddress\"\n >\n <clr-icon shape=\"edit\"></clr-icon>\n </button>\n </ng-template>\n <vdr-formatted-address\n *ngIf=\"!editingShippingAddress\"\n [address]=\"shippingAddressForm.value\"\n ></vdr-formatted-address>\n <vdr-address-form\n *ngIf=\"editingShippingAddress\"\n [formGroup]=\"shippingAddressForm\"\n [availableCountries]=\"availableCountries$ | async\"\n [customFields]=\"addressCustomFields\"\n ></vdr-address-form>\n </vdr-card>\n <vdr-card [title]=\"'order.billing-address' | translate\">\n <ng-template vdrCardControls>\n <button\n class=\"button-small\"\n [title]=\"'order.edit-billing-address' | translate\"\n (click)=\"editingBillingAddress = !editingBillingAddress\"\n >\n <clr-icon shape=\"edit\"></clr-icon>\n </button>\n </ng-template>\n <vdr-formatted-address\n *ngIf=\"!editingBillingAddress\"\n [address]=\"billingAddressForm.value\"\n ></vdr-formatted-address>\n <vdr-address-form\n *ngIf=\"editingBillingAddress\"\n [formGroup]=\"billingAddressForm\"\n [availableCountries]=\"availableCountries$ | async\"\n [customFields]=\"addressCustomFields\"\n ></vdr-address-form>\n </vdr-card>\n </vdr-page-detail-sidebar>\n\n <vdr-page-block>\n <vdr-card [paddingX]=\"false\">\n <vdr-data-table-2 id=\"modify-order\" class=\"order-table\" [items]=\"order.lines.concat(addedLines)\">\n <!-- Here we define all the available columns -->\n <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\n <ng-template let-line=\"item\">\n {{ line.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"created-at\"\n [heading]=\"'common.created-at' | translate\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\">\n {{ line.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"updated-at\"\n [heading]=\"'common.updated-at' | translate\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\">\n {{ line.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n <ng-template let-line=\"item\">\n <div class=\"image-placeholder\">\n <img\n *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\n [src]=\"asset | assetPreview : 'tiny'\"\n />\n <ng-template #imagePlaceholder>\n <div class=\"placeholder\">\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n </div>\n </ng-template>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"product-name\"\n [heading]=\"'order.product-name' | translate\"\n [optional]=\"false\"\n >\n <ng-template let-line=\"item\">\n {{ line.productVariant.name }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column id=\"product-sku\" [heading]=\"'order.product-sku' | translate\">\n <ng-template let-line=\"item\">\n {{ line.productVariant.sku }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column id=\"unit-price\" [heading]=\"'order.unit-price' | translate\">\n <ng-template let-line=\"item\">\n <div class=\"text-center\">\n <div>{{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}</div>\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ line.unitPrice | localeCurrency : order.currencyCode }}\n </div>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\" [optional]=\"false\">\n <ng-template let-line=\"item\">\n <input\n type=\"number\"\n class=\"draft-qty mr-1\"\n min=\"0\"\n [value]=\"getInitialLineQuantity(line.id)\"\n (input)=\"updateLineQuantity(line, $event.target.value)\"\n />\n <button\n class=\"button-small\"\n *ngIf=\"isAddedLine(line)\"\n (click)=\"removeAddedItem(line.id)\"\n >\n <clr-icon shape=\"trash\"></clr-icon>\n </button>\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\n <vdr-line-fulfillment\n [line]=\"line\"\n [allOrderFulfillments]=\"order.fulfillments\"\n [orderState]=\"order.state\"\n ></vdr-line-fulfillment>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n *ngFor=\"let customField of orderLineCustomFields\"\n [id]=\"customField.name\"\n [heading]=\"customField | customFieldLabel : (uiLanguage$ | async)\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\" let-index=\"index\">\n <vdr-custom-field-control\n [compact]=\"true\"\n [entityName]=\"'OrderLine'\"\n [customField]=\"customField\"\n [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.at(index)\"\n />\n </ng-template>\n </vdr-dt2-column>\n </vdr-data-table-2>\n </vdr-card>\n <vdr-card [title]=\"'order.add-item-to-order' | translate\">\n <vdr-product-variant-selector class=\"mb-4\" (productSelected)=\"addItemSelectedVariant = $event\">\n </vdr-product-variant-selector>\n <div class=\"flex\">\n <div>\n <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb-4\">\n <img\n *ngIf=\"addItemSelectedVariant.productAsset as asset\"\n [src]=\"asset | assetPreview : 'tiny'\"\n class=\"mr-4 add-item-thumb\"\n />\n <div>\n <strong class=\"mr-4\">{{ addItemSelectedVariant.productVariantName }}</strong>\n <small>{{ addItemSelectedVariant.sku }}</small>\n <div>\n {{\n getSelectedItemPrice(addItemSelectedVariant)\n | localeCurrency : order.currencyCode\n }}\n </div>\n </div>\n </div>\n <div class=\"form-grid\" *ngIf=\"addItemSelectedVariant\">\n <ng-container *ngFor=\"let customField of orderLineCustomFields\">\n <vdr-custom-field-control\n [readonly]=\"!addItemSelectedVariant\"\n [customField]=\"customField\"\n [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\n entityName=\"OrderLine\"\n [compact]=\"true\"\n ></vdr-custom-field-control>\n </ng-container>\n </div>\n </div>\n <div class=\"flex-spacer\"></div>\n <div>\n <button\n *ngIf=\"addItemSelectedVariant\"\n class=\"btn btn-secondary\"\n [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\n (click)=\"addItemToOrder(addItemSelectedVariant)\"\n >\n {{ 'order.add-item-to-order' | translate }}\n </button>\n </div>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'order.shipping' | translate\">\n <div *ngFor=\"let shippingLine of order.shippingLines\" class=\"flex items-center\">\n <ng-container *ngIf=\"getShippingLineDetails(shippingLine) as details\">\n <div>{{ details.name }}:</div>\n <div class=\"mx-1\">\n {{ details.price | localeCurrency : order.currencyCode }}\n </div>\n <button class=\"button-small\" (click)=\"setShippingMethod(shippingLine.id)\">\n {{ 'order.set-shipping-method' | translate }}\n </button>\n </ng-container>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'order.add-surcharge' | translate\">\n <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\n <div class=\"form-grid\">\n <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\n ><input id=\"description\" type=\"text\" formControlName=\"description\"\n /></vdr-form-field>\n <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\n ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\n /></vdr-form-field>\n <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\n <vdr-currency-input\n [currencyCode]=\"order.currencyCode\"\n id=\"price\"\n formControlName=\"price\"\n ></vdr-currency-input>\n </vdr-form-field>\n <vdr-form-field\n [label]=\"\n 'catalog.price-includes-tax-at'\n | translate : { rate: surchargeForm.get('taxRate')?.value ?? 0 }\n \"\n for=\"priceIncludesTax\"\n ><input\n id=\"priceIncludesTax\"\n type=\"checkbox\"\n clrCheckbox\n formControlName=\"priceIncludesTax\"\n /></vdr-form-field>\n <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\n <vdr-affixed-input suffix=\"%\"\n ><input id=\"taxRate\" type=\"number\" min=\"0\" max=\"100\" formControlName=\"taxRate\"\n /></vdr-affixed-input>\n </vdr-form-field>\n <vdr-form-field [label]=\"'order.tax-description' | translate\" for=\"taxDescription\"\n ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\n /></vdr-form-field>\n </div>\n <button\n class=\"btn btn-secondary mt-2\"\n [disabled]=\"\n surchargeForm.invalid ||\n surchargeForm.pristine ||\n surchargeForm.get('price')?.value === 0 ||\n !surchargeForm.get('description')?.value\n \"\n >\n {{ 'order.add-surcharge' | translate }}\n </button>\n </form>\n </vdr-card>\n </vdr-page-block>\n</vdr-page-detail-layout>\n", styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table img{border-radius:var(--border-radius-img)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}.order-table .draft-qty{max-width:48px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}.order-table .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .thumb img{width:50px;height:50px}.order-table .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.order-table .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}.add-item-thumb{max-width:50px}.no-modifications{color:var(--color-grey-400)}.summary-controls{border-top:1px solid var(--color-weight-200);margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 1)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { 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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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.AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "component", type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { 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: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: ["couponCodes", "control"], outputs: ["addCouponCode", "removeCouponCode"] }, { kind: "component", type: OrderModificationSummaryComponent, selector: "vdr-order-modification-summary", inputs: ["orderSnapshot", "modifyOrderInput", "addedLines", "shippingAddressForm", "billingAddressForm", "updatedShippingMethods", "couponCodesControl"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.CustomFieldLabelPipe, name: "customFieldLabel" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3186
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrderEditorComponent, selector: "vdr-order-editor", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n <vdr-action-bar *ngIf=\"entity$ | async as order\">\n <vdr-ab-left>\n <div class=\"flex clr-align-items-center\"></div>\n </vdr-ab-left>\n\n <vdr-ab-right>\n <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\n {{ 'order.cancel-modification' | translate }}\n </button>\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n\n<vdr-page-detail-layout *ngIf=\"entity as order\">\n <vdr-page-detail-sidebar>\n <vdr-card [title]=\"'order.modification-summary' | translate\">\n <vdr-order-modification-summary\n [orderSnapshot]=\"orderSnapshot\"\n [modifyOrderInput]=\"modifyOrderInput\"\n [addedLines]=\"addedLines\"\n [shippingAddressForm]=\"shippingAddressForm\"\n [billingAddressForm]=\"billingAddressForm\"\n [couponCodesControl]=\"couponCodesControl\"\n [updatedShippingMethods]=\"updatedShippingMethods\"\n ></vdr-order-modification-summary>\n\n <div *ngIf=\"!hasModifications()\" class=\"no-modifications\">\n {{ 'order.no-modifications-made' | translate }}\n </div>\n\n <div class=\"summary-controls\">\n <vdr-form-field [label]=\"'order.note' | translate\">\n <textarea\n [(ngModel)]=\"note\"\n name=\"note\"\n required\n [disabled]=\"!hasModifications()\"\n ></textarea>\n </vdr-form-field>\n <label class=\"flex items-center\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"recalculateShipping\"\n [disabled]=\"!hasModifications()\"\n />\n <div class=\"ml-1\">{{ 'order.modification-recalculate-shipping' | translate }}</div>\n </label>\n <button\n class=\"btn btn-primary mt-2\"\n [disabled]=\"!hasModifications()\"\n (click)=\"previewAndModify(order)\"\n >\n {{ 'order.preview-changes' | translate }}\n </button>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'order.set-coupon-codes' | translate\">\n <vdr-coupon-code-selector [control]=\"couponCodesControl\"></vdr-coupon-code-selector>\n </vdr-card>\n <vdr-card [title]=\"'order.shipping-address' | translate\">\n <ng-template vdrCardControls>\n <button\n class=\"button-small\"\n [title]=\"'order.edit-shipping-address' | translate\"\n (click)=\"editingShippingAddress = !editingShippingAddress\"\n >\n <clr-icon shape=\"edit\"></clr-icon>\n </button>\n </ng-template>\n <vdr-formatted-address\n *ngIf=\"!editingShippingAddress\"\n [address]=\"shippingAddressForm.value\"\n ></vdr-formatted-address>\n <vdr-address-form\n *ngIf=\"editingShippingAddress\"\n [formGroup]=\"shippingAddressForm\"\n [availableCountries]=\"availableCountries$ | async\"\n [customFields]=\"addressCustomFields\"\n ></vdr-address-form>\n </vdr-card>\n <vdr-card [title]=\"'order.billing-address' | translate\">\n <ng-template vdrCardControls>\n <button\n class=\"button-small\"\n [title]=\"'order.edit-billing-address' | translate\"\n (click)=\"editingBillingAddress = !editingBillingAddress\"\n >\n <clr-icon shape=\"edit\"></clr-icon>\n </button>\n </ng-template>\n <vdr-formatted-address\n *ngIf=\"!editingBillingAddress\"\n [address]=\"billingAddressForm.value\"\n ></vdr-formatted-address>\n <vdr-address-form\n *ngIf=\"editingBillingAddress\"\n [formGroup]=\"billingAddressForm\"\n [availableCountries]=\"availableCountries$ | async\"\n [customFields]=\"addressCustomFields\"\n ></vdr-address-form>\n </vdr-card>\n </vdr-page-detail-sidebar>\n\n <vdr-page-block>\n <vdr-card [paddingX]=\"false\">\n <vdr-data-table-2 id=\"modify-order\" class=\"order-table\" [items]=\"order.lines.concat(addedLines)\">\n <!-- Here we define all the available columns -->\n <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\n <ng-template let-line=\"item\">\n {{ line.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"created-at\"\n [heading]=\"'common.created-at' | translate\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\">\n {{ line.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"updated-at\"\n [heading]=\"'common.updated-at' | translate\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\">\n {{ line.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n <ng-template let-line=\"item\">\n <div class=\"image-placeholder\">\n <img\n *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\n [src]=\"asset | assetPreview : 'tiny'\"\n />\n <ng-template #imagePlaceholder>\n <div class=\"placeholder\">\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n </div>\n </ng-template>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"product-name\"\n [heading]=\"'order.product-name' | translate\"\n [optional]=\"false\"\n >\n <ng-template let-line=\"item\">\n {{ line.productVariant.name }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column id=\"product-sku\" [heading]=\"'order.product-sku' | translate\">\n <ng-template let-line=\"item\">\n {{ line.productVariant.sku }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column id=\"unit-price\" [heading]=\"'order.unit-price' | translate\">\n <ng-template let-line=\"item\">\n <div class=\"text-center\">\n <div>{{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}</div>\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ line.unitPrice | localeCurrency : order.currencyCode }}\n </div>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\" [optional]=\"false\">\n <ng-template let-line=\"item\">\n <input\n type=\"number\"\n class=\"draft-qty mr-1\"\n min=\"0\"\n [value]=\"getInitialLineQuantity(line.id)\"\n (input)=\"updateLineQuantity(line, $event.target.value)\"\n />\n <button\n class=\"button-small\"\n *ngIf=\"isAddedLine(line)\"\n (click)=\"removeAddedItem(line.id)\"\n >\n <clr-icon shape=\"trash\"></clr-icon>\n </button>\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\n <vdr-line-fulfillment\n [line]=\"line\"\n [allOrderFulfillments]=\"order.fulfillments\"\n [orderState]=\"order.state\"\n ></vdr-line-fulfillment>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n *ngFor=\"let customField of orderLineCustomFields\"\n [id]=\"customField.name\"\n [heading]=\"customField | customFieldLabel : (uiLanguage$ | async)\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\" let-index=\"index\">\n <vdr-custom-field-control\n [compact]=\"true\"\n [entityName]=\"'OrderLine'\"\n [customField]=\"customField\"\n [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.at(index)\"\n />\n </ng-template>\n </vdr-dt2-column>\n </vdr-data-table-2>\n </vdr-card>\n <vdr-card [title]=\"'order.add-item-to-order' | translate\">\n <vdr-product-variant-selector class=\"mb-4\" (productSelected)=\"addItemSelectedVariant = $event\">\n </vdr-product-variant-selector>\n <div class=\"flex\">\n <div>\n <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb-4\">\n <img\n *ngIf=\"addItemSelectedVariant.productAsset as asset\"\n [src]=\"asset | assetPreview : 'tiny'\"\n class=\"mr-4 add-item-thumb\"\n />\n <div>\n <strong class=\"mr-4\">{{ addItemSelectedVariant.productVariantName }}</strong>\n <small>{{ addItemSelectedVariant.sku }}</small>\n <div>\n {{\n getSelectedItemPrice(addItemSelectedVariant)\n | localeCurrency : order.currencyCode\n }}\n </div>\n </div>\n </div>\n <div class=\"form-grid\" *ngIf=\"addItemSelectedVariant\">\n <ng-container *ngFor=\"let customField of orderLineCustomFields\">\n <vdr-custom-field-control\n [readonly]=\"!addItemSelectedVariant\"\n [customField]=\"customField\"\n [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\n entityName=\"OrderLine\"\n [compact]=\"true\"\n ></vdr-custom-field-control>\n </ng-container>\n </div>\n </div>\n <div class=\"flex-spacer\"></div>\n <div>\n <button\n *ngIf=\"addItemSelectedVariant\"\n class=\"btn btn-secondary\"\n [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\n (click)=\"addItemToOrder(addItemSelectedVariant)\"\n >\n {{ 'order.add-item-to-order' | translate }}\n </button>\n </div>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'order.shipping' | translate\">\n <div *ngFor=\"let shippingLine of order.shippingLines\" class=\"flex items-center\">\n <ng-container *ngIf=\"getShippingLineDetails(shippingLine) as details\">\n <div>{{ details.name }}:</div>\n <div class=\"mx-1\">\n {{ details.price | localeCurrency : order.currencyCode }}\n </div>\n <button class=\"button-small\" (click)=\"setShippingMethod(shippingLine.id)\">\n {{ 'order.set-shipping-method' | translate }}\n </button>\n </ng-container>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'order.add-surcharge' | translate\">\n <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\n <div class=\"form-grid\">\n <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\n ><input id=\"description\" type=\"text\" formControlName=\"description\"\n /></vdr-form-field>\n <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\n ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\n /></vdr-form-field>\n <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\n <vdr-currency-input\n [currencyCode]=\"order.currencyCode\"\n id=\"price\"\n formControlName=\"price\"\n ></vdr-currency-input>\n </vdr-form-field>\n <vdr-form-field\n [label]=\"\n 'catalog.price-includes-tax-at'\n | translate : { rate: surchargeForm.get('taxRate')?.value ?? 0 }\n \"\n for=\"priceIncludesTax\"\n ><input\n id=\"priceIncludesTax\"\n type=\"checkbox\"\n clrCheckbox\n formControlName=\"priceIncludesTax\"\n /></vdr-form-field>\n <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\n <vdr-affixed-input suffix=\"%\"\n ><input id=\"taxRate\" type=\"number\" min=\"0\" max=\"100\" formControlName=\"taxRate\"\n /></vdr-affixed-input>\n </vdr-form-field>\n <vdr-form-field [label]=\"'order.tax-description' | translate\" for=\"taxDescription\"\n ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\n /></vdr-form-field>\n </div>\n <button\n class=\"btn btn-secondary mt-2\"\n [disabled]=\"\n surchargeForm.invalid ||\n surchargeForm.pristine ||\n surchargeForm.get('price')?.value === 0 ||\n !surchargeForm.get('description')?.value\n \"\n >\n {{ 'order.add-surcharge' | translate }}\n </button>\n </form>\n </vdr-card>\n </vdr-page-block>\n</vdr-page-detail-layout>\n", styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table img{border-radius:var(--border-radius-img)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}.order-table .draft-qty{max-width:48px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}.order-table .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}.order-table .image-placeholder img{width:50px;height:50px;object-fit:cover}.order-table .image-placeholder .placeholder{display:flex;width:50px;height:50px;align-items:center;justify-content:center;color:var(--color-grey-300)}.order-table .thumb img{width:50px;height:50px}.order-table .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.order-table .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}.add-item-thumb{max-width:50px}.no-modifications{color:var(--color-grey-400)}.summary-controls{border-top:1px solid var(--color-weight-200);margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 1)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { 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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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.AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "component", type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { 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: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: ["couponCodes", "control"], outputs: ["addCouponCode", "removeCouponCode"] }, { kind: "component", type: OrderModificationSummaryComponent, selector: "vdr-order-modification-summary", inputs: ["orderSnapshot", "modifyOrderInput", "addedLines", "shippingAddressForm", "billingAddressForm", "updatedShippingMethods", "couponCodesControl"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.CustomFieldLabelPipe, name: "customFieldLabel" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3187
3187
|
}
|
|
3188
3188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrderEditorComponent, decorators: [{
|
|
3189
3189
|
type: Component,
|
|
3190
|
-
args: [{ selector: 'vdr-order-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\n <vdr-action-bar *ngIf=\"entity$ | async as order\">\n <vdr-ab-left>\n <div class=\"flex clr-align-items-center\"></div>\n </vdr-ab-left>\n\n <vdr-ab-right>\n <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\n {{ 'order.cancel-modification' | translate }}\n </button>\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n\n<vdr-page-detail-layout *ngIf=\"entity as order\">\n <vdr-page-detail-sidebar>\n <vdr-card [title]=\"'order.modification-summary' | translate\">\n <vdr-order-modification-summary\n [orderSnapshot]=\"orderSnapshot\"\n [modifyOrderInput]=\"modifyOrderInput\"\n [addedLines]=\"addedLines\"\n [shippingAddressForm]=\"shippingAddressForm\"\n [billingAddressForm]=\"billingAddressForm\"\n [couponCodesControl]=\"couponCodesControl\"\n [updatedShippingMethods]=\"updatedShippingMethods\"\n ></vdr-order-modification-summary>\n\n <div *ngIf=\"!hasModifications()\" class=\"no-modifications\">\n {{ 'order.no-modifications-made' | translate }}\n </div>\n\n <div class=\"summary-controls\">\n <vdr-form-field [label]=\"'order.note' | translate\">\n <textarea\n [(ngModel)]=\"note\"\n name=\"note\"\n required\n [disabled]=\"!hasModifications()\"\n ></textarea>\n </vdr-form-field>\n <label class=\"flex items-center\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"recalculateShipping\"\n [disabled]=\"!hasModifications()\"\n />\n <div class=\"ml-1\">{{ 'order.modification-recalculate-shipping' | translate }}</div>\n </label>\n <button\n class=\"btn btn-primary mt-2\"\n [disabled]=\"!hasModifications()\"\n (click)=\"previewAndModify(order)\"\n >\n {{ 'order.preview-changes' | translate }}\n </button>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'order.set-coupon-codes' | translate\">\n <vdr-coupon-code-selector [control]=\"couponCodesControl\"></vdr-coupon-code-selector>\n </vdr-card>\n <vdr-card [title]=\"'order.shipping-address' | translate\">\n <ng-template vdrCardControls>\n <button\n class=\"button-small\"\n [title]=\"'order.edit-shipping-address' | translate\"\n (click)=\"editingShippingAddress = !editingShippingAddress\"\n >\n <clr-icon shape=\"edit\"></clr-icon>\n </button>\n </ng-template>\n <vdr-formatted-address\n *ngIf=\"!editingShippingAddress\"\n [address]=\"shippingAddressForm.value\"\n ></vdr-formatted-address>\n <vdr-address-form\n *ngIf=\"editingShippingAddress\"\n [formGroup]=\"shippingAddressForm\"\n [availableCountries]=\"availableCountries$ | async\"\n [customFields]=\"addressCustomFields\"\n ></vdr-address-form>\n </vdr-card>\n <vdr-card [title]=\"'order.billing-address' | translate\">\n <ng-template vdrCardControls>\n <button\n class=\"button-small\"\n [title]=\"'order.edit-billing-address' | translate\"\n (click)=\"editingBillingAddress = !editingBillingAddress\"\n >\n <clr-icon shape=\"edit\"></clr-icon>\n </button>\n </ng-template>\n <vdr-formatted-address\n *ngIf=\"!editingBillingAddress\"\n [address]=\"billingAddressForm.value\"\n ></vdr-formatted-address>\n <vdr-address-form\n *ngIf=\"editingBillingAddress\"\n [formGroup]=\"billingAddressForm\"\n [availableCountries]=\"availableCountries$ | async\"\n [customFields]=\"addressCustomFields\"\n ></vdr-address-form>\n </vdr-card>\n </vdr-page-detail-sidebar>\n\n <vdr-page-block>\n <vdr-card [paddingX]=\"false\">\n <vdr-data-table-2 id=\"modify-order\" class=\"order-table\" [items]=\"order.lines.concat(addedLines)\">\n <!-- Here we define all the available columns -->\n <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\n <ng-template let-line=\"item\">\n {{ line.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"created-at\"\n [heading]=\"'common.created-at' | translate\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\">\n {{ line.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"updated-at\"\n [heading]=\"'common.updated-at' | translate\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\">\n {{ line.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n <ng-template let-line=\"item\">\n <div class=\"image-placeholder\">\n <img\n *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\n [src]=\"asset | assetPreview : 'tiny'\"\n />\n <ng-template #imagePlaceholder>\n <div class=\"placeholder\">\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n </div>\n </ng-template>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"product-name\"\n [heading]=\"'order.product-name' | translate\"\n [optional]=\"false\"\n >\n <ng-template let-line=\"item\">\n {{ line.productVariant.name }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column id=\"product-sku\" [heading]=\"'order.product-sku' | translate\">\n <ng-template let-line=\"item\">\n {{ line.productVariant.sku }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column id=\"unit-price\" [heading]=\"'order.unit-price' | translate\">\n <ng-template let-line=\"item\">\n <div class=\"text-center\">\n <div>{{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}</div>\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ line.unitPrice | localeCurrency : order.currencyCode }}\n </div>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\" [optional]=\"false\">\n <ng-template let-line=\"item\">\n <input\n type=\"number\"\n class=\"draft-qty mr-1\"\n min=\"0\"\n [value]=\"getInitialLineQuantity(line.id)\"\n (input)=\"updateLineQuantity(line, $event.target.value)\"\n />\n <button\n class=\"button-small\"\n *ngIf=\"isAddedLine(line)\"\n (click)=\"removeAddedItem(line.id)\"\n >\n <clr-icon shape=\"trash\"></clr-icon>\n </button>\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\n <vdr-line-fulfillment\n [line]=\"line\"\n [allOrderFulfillments]=\"order.fulfillments\"\n [orderState]=\"order.state\"\n ></vdr-line-fulfillment>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n *ngFor=\"let customField of orderLineCustomFields\"\n [id]=\"customField.name\"\n [heading]=\"customField | customFieldLabel : (uiLanguage$ | async)\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\" let-index=\"index\">\n <vdr-custom-field-control\n [compact]=\"true\"\n [entityName]=\"'OrderLine'\"\n [customField]=\"customField\"\n [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.at(index)\"\n />\n </ng-template>\n </vdr-dt2-column>\n </vdr-data-table-2>\n </vdr-card>\n <vdr-card [title]=\"'order.add-item-to-order' | translate\">\n <vdr-product-variant-selector class=\"mb-4\" (productSelected)=\"addItemSelectedVariant = $event\">\n </vdr-product-variant-selector>\n <div class=\"flex\">\n <div>\n <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb-4\">\n <img\n *ngIf=\"addItemSelectedVariant.productAsset as asset\"\n [src]=\"asset | assetPreview : 'tiny'\"\n class=\"mr-4 add-item-thumb\"\n />\n <div>\n <strong class=\"mr-4\">{{ addItemSelectedVariant.productVariantName }}</strong>\n <small>{{ addItemSelectedVariant.sku }}</small>\n <div>\n {{\n getSelectedItemPrice(addItemSelectedVariant)\n | localeCurrency : order.currencyCode\n }}\n </div>\n </div>\n </div>\n <div class=\"form-grid\" *ngIf=\"addItemSelectedVariant\">\n <ng-container *ngFor=\"let customField of orderLineCustomFields\">\n <vdr-custom-field-control\n [readonly]=\"!addItemSelectedVariant\"\n [customField]=\"customField\"\n [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\n entityName=\"OrderLine\"\n [compact]=\"true\"\n ></vdr-custom-field-control>\n </ng-container>\n </div>\n </div>\n <div class=\"flex-spacer\"></div>\n <div>\n <button\n *ngIf=\"addItemSelectedVariant\"\n class=\"btn btn-secondary\"\n [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\n (click)=\"addItemToOrder(addItemSelectedVariant)\"\n >\n {{ 'order.add-item-to-order' | translate }}\n </button>\n </div>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'order.shipping' | translate\">\n <div *ngFor=\"let shippingLine of order.shippingLines\" class=\"flex items-center\">\n <ng-container *ngIf=\"getShippingLineDetails(shippingLine) as details\">\n <div>{{ details.name }}:</div>\n <div class=\"mx-1\">\n {{ details.price | localeCurrency : order.currencyCode }}\n </div>\n <button class=\"button-small\" (click)=\"setShippingMethod(shippingLine.id)\">\n {{ 'order.set-shipping-method' | translate }}\n </button>\n </ng-container>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'order.add-surcharge' | translate\">\n <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\n <div class=\"form-grid\">\n <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\n ><input id=\"description\" type=\"text\" formControlName=\"description\"\n /></vdr-form-field>\n <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\n ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\n /></vdr-form-field>\n <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\n <vdr-currency-input\n [currencyCode]=\"order.currencyCode\"\n id=\"price\"\n formControlName=\"price\"\n ></vdr-currency-input>\n </vdr-form-field>\n <vdr-form-field\n [label]=\"\n 'catalog.price-includes-tax-at'\n | translate : { rate: surchargeForm.get('taxRate')?.value ?? 0 }\n \"\n for=\"priceIncludesTax\"\n ><input\n id=\"priceIncludesTax\"\n type=\"checkbox\"\n clrCheckbox\n formControlName=\"priceIncludesTax\"\n /></vdr-form-field>\n <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\n <vdr-affixed-input suffix=\"%\"\n ><input id=\"taxRate\" type=\"number\" min=\"0\" max=\"100\" formControlName=\"taxRate\"\n /></vdr-affixed-input>\n </vdr-form-field>\n <vdr-form-field [label]=\"'order.tax-description' | translate\" for=\"taxDescription\"\n ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\n /></vdr-form-field>\n </div>\n <button\n class=\"btn btn-secondary mt-2\"\n [disabled]=\"\n surchargeForm.invalid ||\n surchargeForm.pristine ||\n surchargeForm.get('price')?.value === 0 ||\n !surchargeForm.get('description')?.value\n \"\n >\n {{ 'order.add-surcharge' | translate }}\n </button>\n </form>\n </vdr-card>\n </vdr-page-block>\n</vdr-page-detail-layout>\n", styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table img{border-radius:var(--border-radius-img)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}.order-table .draft-qty{max-width:48px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}.order-table .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .thumb img{width:50px;height:50px}.order-table .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.order-table .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}.add-item-thumb{max-width:50px}.no-modifications{color:var(--color-grey-400)}.summary-controls{border-top:1px solid var(--color-weight-200);margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 1)}\n"] }]
|
|
3190
|
+
args: [{ selector: 'vdr-order-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\n <vdr-action-bar *ngIf=\"entity$ | async as order\">\n <vdr-ab-left>\n <div class=\"flex clr-align-items-center\"></div>\n </vdr-ab-left>\n\n <vdr-ab-right>\n <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\n {{ 'order.cancel-modification' | translate }}\n </button>\n </vdr-ab-right>\n </vdr-action-bar>\n</vdr-page-block>\n\n<vdr-page-detail-layout *ngIf=\"entity as order\">\n <vdr-page-detail-sidebar>\n <vdr-card [title]=\"'order.modification-summary' | translate\">\n <vdr-order-modification-summary\n [orderSnapshot]=\"orderSnapshot\"\n [modifyOrderInput]=\"modifyOrderInput\"\n [addedLines]=\"addedLines\"\n [shippingAddressForm]=\"shippingAddressForm\"\n [billingAddressForm]=\"billingAddressForm\"\n [couponCodesControl]=\"couponCodesControl\"\n [updatedShippingMethods]=\"updatedShippingMethods\"\n ></vdr-order-modification-summary>\n\n <div *ngIf=\"!hasModifications()\" class=\"no-modifications\">\n {{ 'order.no-modifications-made' | translate }}\n </div>\n\n <div class=\"summary-controls\">\n <vdr-form-field [label]=\"'order.note' | translate\">\n <textarea\n [(ngModel)]=\"note\"\n name=\"note\"\n required\n [disabled]=\"!hasModifications()\"\n ></textarea>\n </vdr-form-field>\n <label class=\"flex items-center\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"recalculateShipping\"\n [disabled]=\"!hasModifications()\"\n />\n <div class=\"ml-1\">{{ 'order.modification-recalculate-shipping' | translate }}</div>\n </label>\n <button\n class=\"btn btn-primary mt-2\"\n [disabled]=\"!hasModifications()\"\n (click)=\"previewAndModify(order)\"\n >\n {{ 'order.preview-changes' | translate }}\n </button>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'order.set-coupon-codes' | translate\">\n <vdr-coupon-code-selector [control]=\"couponCodesControl\"></vdr-coupon-code-selector>\n </vdr-card>\n <vdr-card [title]=\"'order.shipping-address' | translate\">\n <ng-template vdrCardControls>\n <button\n class=\"button-small\"\n [title]=\"'order.edit-shipping-address' | translate\"\n (click)=\"editingShippingAddress = !editingShippingAddress\"\n >\n <clr-icon shape=\"edit\"></clr-icon>\n </button>\n </ng-template>\n <vdr-formatted-address\n *ngIf=\"!editingShippingAddress\"\n [address]=\"shippingAddressForm.value\"\n ></vdr-formatted-address>\n <vdr-address-form\n *ngIf=\"editingShippingAddress\"\n [formGroup]=\"shippingAddressForm\"\n [availableCountries]=\"availableCountries$ | async\"\n [customFields]=\"addressCustomFields\"\n ></vdr-address-form>\n </vdr-card>\n <vdr-card [title]=\"'order.billing-address' | translate\">\n <ng-template vdrCardControls>\n <button\n class=\"button-small\"\n [title]=\"'order.edit-billing-address' | translate\"\n (click)=\"editingBillingAddress = !editingBillingAddress\"\n >\n <clr-icon shape=\"edit\"></clr-icon>\n </button>\n </ng-template>\n <vdr-formatted-address\n *ngIf=\"!editingBillingAddress\"\n [address]=\"billingAddressForm.value\"\n ></vdr-formatted-address>\n <vdr-address-form\n *ngIf=\"editingBillingAddress\"\n [formGroup]=\"billingAddressForm\"\n [availableCountries]=\"availableCountries$ | async\"\n [customFields]=\"addressCustomFields\"\n ></vdr-address-form>\n </vdr-card>\n </vdr-page-detail-sidebar>\n\n <vdr-page-block>\n <vdr-card [paddingX]=\"false\">\n <vdr-data-table-2 id=\"modify-order\" class=\"order-table\" [items]=\"order.lines.concat(addedLines)\">\n <!-- Here we define all the available columns -->\n <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\n <ng-template let-line=\"item\">\n {{ line.id }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"created-at\"\n [heading]=\"'common.created-at' | translate\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\">\n {{ line.createdAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"updated-at\"\n [heading]=\"'common.updated-at' | translate\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\">\n {{ line.updatedAt | localeDate : 'short' }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\n <ng-template let-line=\"item\">\n <div class=\"image-placeholder\">\n <img\n *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\n [src]=\"asset | assetPreview : 'tiny'\"\n />\n <ng-template #imagePlaceholder>\n <div class=\"placeholder\">\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n </div>\n </ng-template>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n id=\"product-name\"\n [heading]=\"'order.product-name' | translate\"\n [optional]=\"false\"\n >\n <ng-template let-line=\"item\">\n {{ line.productVariant.name }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column id=\"product-sku\" [heading]=\"'order.product-sku' | translate\">\n <ng-template let-line=\"item\">\n {{ line.productVariant.sku }}\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column id=\"unit-price\" [heading]=\"'order.unit-price' | translate\">\n <ng-template let-line=\"item\">\n <div class=\"text-center\">\n <div>{{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}</div>\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\n {{ line.unitPrice | localeCurrency : order.currencyCode }}\n </div>\n </div>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\" [optional]=\"false\">\n <ng-template let-line=\"item\">\n <input\n type=\"number\"\n class=\"draft-qty mr-1\"\n min=\"0\"\n [value]=\"getInitialLineQuantity(line.id)\"\n (input)=\"updateLineQuantity(line, $event.target.value)\"\n />\n <button\n class=\"button-small\"\n *ngIf=\"isAddedLine(line)\"\n (click)=\"removeAddedItem(line.id)\"\n >\n <clr-icon shape=\"trash\"></clr-icon>\n </button>\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\n <vdr-line-fulfillment\n [line]=\"line\"\n [allOrderFulfillments]=\"order.fulfillments\"\n [orderState]=\"order.state\"\n ></vdr-line-fulfillment>\n </ng-template>\n </vdr-dt2-column>\n <vdr-dt2-column\n *ngFor=\"let customField of orderLineCustomFields\"\n [id]=\"customField.name\"\n [heading]=\"customField | customFieldLabel : (uiLanguage$ | async)\"\n [hiddenByDefault]=\"true\"\n >\n <ng-template let-line=\"item\" let-index=\"index\">\n <vdr-custom-field-control\n [compact]=\"true\"\n [entityName]=\"'OrderLine'\"\n [customField]=\"customField\"\n [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.at(index)\"\n />\n </ng-template>\n </vdr-dt2-column>\n </vdr-data-table-2>\n </vdr-card>\n <vdr-card [title]=\"'order.add-item-to-order' | translate\">\n <vdr-product-variant-selector class=\"mb-4\" (productSelected)=\"addItemSelectedVariant = $event\">\n </vdr-product-variant-selector>\n <div class=\"flex\">\n <div>\n <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb-4\">\n <img\n *ngIf=\"addItemSelectedVariant.productAsset as asset\"\n [src]=\"asset | assetPreview : 'tiny'\"\n class=\"mr-4 add-item-thumb\"\n />\n <div>\n <strong class=\"mr-4\">{{ addItemSelectedVariant.productVariantName }}</strong>\n <small>{{ addItemSelectedVariant.sku }}</small>\n <div>\n {{\n getSelectedItemPrice(addItemSelectedVariant)\n | localeCurrency : order.currencyCode\n }}\n </div>\n </div>\n </div>\n <div class=\"form-grid\" *ngIf=\"addItemSelectedVariant\">\n <ng-container *ngFor=\"let customField of orderLineCustomFields\">\n <vdr-custom-field-control\n [readonly]=\"!addItemSelectedVariant\"\n [customField]=\"customField\"\n [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\n entityName=\"OrderLine\"\n [compact]=\"true\"\n ></vdr-custom-field-control>\n </ng-container>\n </div>\n </div>\n <div class=\"flex-spacer\"></div>\n <div>\n <button\n *ngIf=\"addItemSelectedVariant\"\n class=\"btn btn-secondary\"\n [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\n (click)=\"addItemToOrder(addItemSelectedVariant)\"\n >\n {{ 'order.add-item-to-order' | translate }}\n </button>\n </div>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'order.shipping' | translate\">\n <div *ngFor=\"let shippingLine of order.shippingLines\" class=\"flex items-center\">\n <ng-container *ngIf=\"getShippingLineDetails(shippingLine) as details\">\n <div>{{ details.name }}:</div>\n <div class=\"mx-1\">\n {{ details.price | localeCurrency : order.currencyCode }}\n </div>\n <button class=\"button-small\" (click)=\"setShippingMethod(shippingLine.id)\">\n {{ 'order.set-shipping-method' | translate }}\n </button>\n </ng-container>\n </div>\n </vdr-card>\n <vdr-card [title]=\"'order.add-surcharge' | translate\">\n <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\n <div class=\"form-grid\">\n <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\n ><input id=\"description\" type=\"text\" formControlName=\"description\"\n /></vdr-form-field>\n <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\n ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\n /></vdr-form-field>\n <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\n <vdr-currency-input\n [currencyCode]=\"order.currencyCode\"\n id=\"price\"\n formControlName=\"price\"\n ></vdr-currency-input>\n </vdr-form-field>\n <vdr-form-field\n [label]=\"\n 'catalog.price-includes-tax-at'\n | translate : { rate: surchargeForm.get('taxRate')?.value ?? 0 }\n \"\n for=\"priceIncludesTax\"\n ><input\n id=\"priceIncludesTax\"\n type=\"checkbox\"\n clrCheckbox\n formControlName=\"priceIncludesTax\"\n /></vdr-form-field>\n <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\n <vdr-affixed-input suffix=\"%\"\n ><input id=\"taxRate\" type=\"number\" min=\"0\" max=\"100\" formControlName=\"taxRate\"\n /></vdr-affixed-input>\n </vdr-form-field>\n <vdr-form-field [label]=\"'order.tax-description' | translate\" for=\"taxDescription\"\n ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\n /></vdr-form-field>\n </div>\n <button\n class=\"btn btn-secondary mt-2\"\n [disabled]=\"\n surchargeForm.invalid ||\n surchargeForm.pristine ||\n surchargeForm.get('price')?.value === 0 ||\n !surchargeForm.get('description')?.value\n \"\n >\n {{ 'order.add-surcharge' | translate }}\n </button>\n </form>\n </vdr-card>\n </vdr-page-block>\n</vdr-page-detail-layout>\n", styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table img{border-radius:var(--border-radius-img)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-inline-end:18px}.order-table .draft-qty{max-width:48px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}.order-table .promotions-label{text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}.order-table .image-placeholder img{width:50px;height:50px;object-fit:cover}.order-table .image-placeholder .placeholder{display:flex;width:50px;height:50px;align-items:center;justify-content:center;color:var(--color-grey-300)}.order-table .thumb img{width:50px;height:50px}.order-table .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.order-table .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}.add-item-thumb{max-width:50px}.no-modifications{color:var(--color-grey-400)}.summary-controls{border-top:1px solid var(--color-weight-200);margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 1)}\n"] }]
|
|
3191
3191
|
}], ctorParameters: () => [{ type: i1.DataService }, { type: i1.NotificationService }, { type: i1.ModalService }, { type: OrderTransitionService }, { type: i0.ChangeDetectorRef }] });
|
|
3192
3192
|
|
|
3193
3193
|
class OrderListComponent extends TypedBaseListComponent {
|