@vendure/admin-ui 2.0.6 → 2.1.0-next.1

package/esm2022/marketing/marketing.module.mjs

@@ -41,9 +41,9 @@ export class MarketingModule {
             }),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: MarketingModule, deps: [{ token: i1.BulkActionRegistryService }, { token: i1.PageService }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.3", ngImport: i0, type: MarketingModule, declarations: [PromotionListComponent, PromotionDetailComponent], imports: [SharedModule, i2.RouterModule, SharedModule, AsyncPipe, SharedModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: MarketingModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: MarketingModule, deps: [{ token: i1.BulkActionRegistryService }, { token: i1.PageService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.2", ngImport: i0, type: MarketingModule, declarations: [PromotionListComponent, PromotionDetailComponent], imports: [SharedModule, i2.RouterModule, SharedModule, AsyncPipe, SharedModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: MarketingModule, providers: [
             {
                 provide: ROUTES,
                 useFactory: (pageService) => createRoutes(pageService),
@@ -52,7 +52,7 @@ export class MarketingModule {
             },
         ], imports: [SharedModule, RouterModule.forChild([]), SharedModule, SharedModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: MarketingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: MarketingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SharedModule, RouterModule.forChild([]), SharedModule, AsyncPipe, SharedModule],

package/esm2022/order/components/add-manual-payment-dialog/add-manual-payment-dialog.component.mjs

@@ -51,10 +51,10 @@ export class AddManualPaymentDialogComponent {
     cancel() {
         this.resolveWith();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AddManualPaymentDialogComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AddManualPaymentDialogComponent, selector: "vdr-add-manual-payment-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.add-payment-to-order' | translate }}</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'order.payment-method' | translate\" for=\"method\">\r\n        <ng-select\r\n            [items]=\"paymentMethods$ | async\"\r\n            bindLabel=\"code\"\r\n            appendTo=\"body\"\r\n            autofocus\r\n            bindValue=\"code\"\r\n            [addTag]=\"true\"\r\n            formControlName=\"method\"\r\n        ></ng-select>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'order.transaction-id' | translate\" for=\"transactionId\">\r\n        <input id=\"transactionId\" type=\"text\" formControlName=\"transactionId\" />\r\n    </vdr-form-field>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"submit()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || form.pristine\">\r\n        {{ 'order.add-payment' | translate }}  ({{ outstandingAmount | localeCurrency: currencyCode }})\r\n    </button>\r\n</ng-template>\r\n", styles: [".ng-select{min-width:100%}\n"], dependencies: [{ 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AddManualPaymentDialogComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AddManualPaymentDialogComponent, selector: "vdr-add-manual-payment-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.add-payment-to-order' | translate }}</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'order.payment-method' | translate\" for=\"method\">\r\n        <ng-select\r\n            [items]=\"paymentMethods$ | async\"\r\n            bindLabel=\"code\"\r\n            appendTo=\"body\"\r\n            autofocus\r\n            bindValue=\"code\"\r\n            [addTag]=\"true\"\r\n            formControlName=\"method\"\r\n        ></ng-select>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'order.transaction-id' | translate\" for=\"transactionId\">\r\n        <input id=\"transactionId\" type=\"text\" formControlName=\"transactionId\" />\r\n    </vdr-form-field>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"submit()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || form.pristine\">\r\n        {{ 'order.add-payment' | translate }}  ({{ outstandingAmount | localeCurrency: currencyCode }})\r\n    </button>\r\n</ng-template>\r\n", styles: [".ng-select{min-width:100%}\n"], dependencies: [{ 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AddManualPaymentDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AddManualPaymentDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-add-manual-payment-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.add-payment-to-order' | translate }}</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'order.payment-method' | translate\" for=\"method\">\r\n        <ng-select\r\n            [items]=\"paymentMethods$ | async\"\r\n            bindLabel=\"code\"\r\n            appendTo=\"body\"\r\n            autofocus\r\n            bindValue=\"code\"\r\n            [addTag]=\"true\"\r\n            formControlName=\"method\"\r\n        ></ng-select>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'order.transaction-id' | translate\" for=\"transactionId\">\r\n        <input id=\"transactionId\" type=\"text\" formControlName=\"transactionId\" />\r\n    </vdr-form-field>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"submit()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || form.pristine\">\r\n        {{ 'order.add-payment' | translate }}  ({{ outstandingAmount | localeCurrency: currencyCode }})\r\n    </button>\r\n</ng-template>\r\n", styles: [".ng-select{min-width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DataService }]; } });

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

@@ -70,11 +70,11 @@ export class CancelOrderDialogComponent {
         }))
             .filter(l => 0 < l.quantity);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CancelOrderDialogComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: CancelOrderDialogComponent, selector: "vdr-cancel-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-lines\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.is-disabled]=\"cancelAll\"\r\n                [class.is-cancelled]=\"line.quantity === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.quantity }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"line.quantity > 0 && !order.active; else nonEditable\"\r\n                        [(ngModel)]=\"lineQuantities[line.id]\"\r\n                        (input)=\"checkIfAllSelected()\"\r\n                        [disabled]=\"cancelAll\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                    />\r\n                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"cancellation-details\">\r\n        <ng-container *ngIf=\"order.active !== true\">\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"true\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-entire-order' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"false\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-specified-items' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n        </ng-container>\r\n        <label class=\"clr-control-label\">{{ 'order.cancellation-reason' | translate }}</label>\r\n        <ng-select\r\n            [items]=\"reasons\"\r\n            bindLabel=\"name\"\r\n            autofocus\r\n            bindValue=\"id\"\r\n            [addTag]=\"true\"\r\n            [(ngModel)]=\"reason\"\r\n        ></ng-select>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"!reason || (!order.active && selectionCount === 0)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        <ng-container *ngIf=\"!order.active\">\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-container>\r\n        <ng-container *ngIf=\"order.active\">\r\n            {{ 'order.cancel-order' | translate }}\r\n        </ng-container>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}@media screen and (min-width: 768px){.fulfillment-wrapper .cancellation-details{margin-top:0;margin-left:24px;width:250px}}.fulfillment-wrapper .order-lines{flex:1;overflow-y:auto}.fulfillment-wrapper .order-lines table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}.fulfillment-wrapper .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.fulfillment-wrapper .is-disabled td,.fulfillment-wrapper .is-disabled td input{background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.ClrRadio, selector: "[clrRadio]" }, { kind: "component", type: i2.ClrRadioWrapper, selector: "clr-radio-wrapper" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CancelOrderDialogComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CancelOrderDialogComponent, selector: "vdr-cancel-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-lines\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.is-disabled]=\"cancelAll\"\r\n                [class.is-cancelled]=\"line.quantity === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.quantity }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"line.quantity > 0 && !order.active; else nonEditable\"\r\n                        [(ngModel)]=\"lineQuantities[line.id]\"\r\n                        (input)=\"checkIfAllSelected()\"\r\n                        [disabled]=\"cancelAll\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                    />\r\n                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"cancellation-details\">\r\n        <ng-container *ngIf=\"order.active !== true\">\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"true\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-entire-order' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"false\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-specified-items' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n        </ng-container>\r\n        <label class=\"clr-control-label\">{{ 'order.cancellation-reason' | translate }}</label>\r\n        <ng-select\r\n            [items]=\"reasons\"\r\n            bindLabel=\"name\"\r\n            autofocus\r\n            bindValue=\"id\"\r\n            [addTag]=\"true\"\r\n            [(ngModel)]=\"reason\"\r\n        ></ng-select>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"!reason || (!order.active && selectionCount === 0)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        <ng-container *ngIf=\"!order.active\">\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-container>\r\n        <ng-container *ngIf=\"order.active\">\r\n            {{ 'order.cancel-order' | translate }}\r\n        </ng-container>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}@media screen and (min-width: 768px){.fulfillment-wrapper .cancellation-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .order-lines{flex:1;overflow-y:auto}.fulfillment-wrapper .order-lines table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}.fulfillment-wrapper .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.fulfillment-wrapper .is-disabled td,.fulfillment-wrapper .is-disabled td input{background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.ClrRadio, selector: "[clrRadio]" }, { kind: "component", type: i2.ClrRadioWrapper, selector: "clr-radio-wrapper" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CancelOrderDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CancelOrderDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-cancel-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-lines\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.is-disabled]=\"cancelAll\"\r\n                [class.is-cancelled]=\"line.quantity === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.quantity }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"line.quantity > 0 && !order.active; else nonEditable\"\r\n                        [(ngModel)]=\"lineQuantities[line.id]\"\r\n                        (input)=\"checkIfAllSelected()\"\r\n                        [disabled]=\"cancelAll\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                    />\r\n                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"cancellation-details\">\r\n        <ng-container *ngIf=\"order.active !== true\">\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"true\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-entire-order' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"false\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-specified-items' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n        </ng-container>\r\n        <label class=\"clr-control-label\">{{ 'order.cancellation-reason' | translate }}</label>\r\n        <ng-select\r\n            [items]=\"reasons\"\r\n            bindLabel=\"name\"\r\n            autofocus\r\n            bindValue=\"id\"\r\n            [addTag]=\"true\"\r\n            [(ngModel)]=\"reason\"\r\n        ></ng-select>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"!reason || (!order.active && selectionCount === 0)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        <ng-container *ngIf=\"!order.active\">\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-container>\r\n        <ng-container *ngIf=\"order.active\">\r\n            {{ 'order.cancel-order' | translate }}\r\n        </ng-container>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}@media screen and (min-width: 768px){.fulfillment-wrapper .cancellation-details{margin-top:0;margin-left:24px;width:250px}}.fulfillment-wrapper .order-lines{flex:1;overflow-y:auto}.fulfillment-wrapper .order-lines table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}.fulfillment-wrapper .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.fulfillment-wrapper .is-disabled td,.fulfillment-wrapper .is-disabled td input{background-color:var(--color-component-bg-200)}\n"] }]
+            args: [{ selector: 'vdr-cancel-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-lines\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.is-disabled]=\"cancelAll\"\r\n                [class.is-cancelled]=\"line.quantity === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.quantity }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"line.quantity > 0 && !order.active; else nonEditable\"\r\n                        [(ngModel)]=\"lineQuantities[line.id]\"\r\n                        (input)=\"checkIfAllSelected()\"\r\n                        [disabled]=\"cancelAll\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                    />\r\n                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"cancellation-details\">\r\n        <ng-container *ngIf=\"order.active !== true\">\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"true\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-entire-order' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"false\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-specified-items' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n        </ng-container>\r\n        <label class=\"clr-control-label\">{{ 'order.cancellation-reason' | translate }}</label>\r\n        <ng-select\r\n            [items]=\"reasons\"\r\n            bindLabel=\"name\"\r\n            autofocus\r\n            bindValue=\"id\"\r\n            [addTag]=\"true\"\r\n            [(ngModel)]=\"reason\"\r\n        ></ng-select>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"!reason || (!order.active && selectionCount === 0)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        <ng-container *ngIf=\"!order.active\">\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-container>\r\n        <ng-container *ngIf=\"order.active\">\r\n            {{ 'order.cancel-order' | translate }}\r\n        </ng-container>\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}@media screen and (min-width: 768px){.fulfillment-wrapper .cancellation-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .order-lines{flex:1;overflow-y:auto}.fulfillment-wrapper .order-lines table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}.fulfillment-wrapper .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.fulfillment-wrapper .is-disabled td,.fulfillment-wrapper .is-disabled td input{background-color:var(--color-component-bg-200)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.I18nService }]; } });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FuY2VsLW9yZGVyLWRpYWxvZy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL29yZGVyL3NyYy9jb21wb25lbnRzL2NhbmNlbC1vcmRlci1kaWFsb2cvY2FuY2VsLW9yZGVyLWRpYWxvZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL29yZGVyL3NyYy9jb21wb25lbnRzL2NhbmNlbC1vcmRlci1kaWFsb2cvY2FuY2VsLW9yZGVyLWRpYWxvZy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQzNFLE9BQU8sRUFBRSxNQUFNLElBQUksQ0FBQyxFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFDdEUsT0FBTyxFQUdILFlBQVksR0FJZixNQUFNLHdCQUF3QixDQUFDOzs7Ozs7OztBQVFoQyxNQUFNLE9BQU8sMEJBQTBCO0lBV25DLElBQUksY0FBYztRQUNkLE9BQU8sTUFBTSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsR0FBRyxFQUFFLENBQUMsRUFBRSxFQUFFLENBQUMsR0FBRyxHQUFHLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztJQUM3RSxDQUFDO0lBRUQsWUFBb0IsV0FBd0I7UUFBeEIsZ0JBQVcsR0FBWCxXQUFXLENBQWE7UUFiNUMsY0FBUyxHQUFHLElBQUksQ0FBQztRQUdqQixtQkFBYyxHQUFpQyxFQUFFLENBQUM7UUFDbEQsWUFBTyxHQUFhLFlBQVksRUFBRSxDQUFDLG1CQUFtQixJQUFJO1lBQ3RELENBQUMsQ0FBQyxzQ0FBc0MsQ0FBQztZQUN6QyxDQUFDLENBQUMsbUNBQW1DLENBQUM7U0FDekMsQ0FBQztRQU9FLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ3hFLENBQUM7SUFFRCxRQUFRO1FBQ0osSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQ3pDLENBQUMsTUFBTSxFQUFFLElBQUksRUFBRSxFQUFFLENBQUMsQ0FBQyxFQUFFLEdBQUcsTUFBTSxFQUFFLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxFQUFFLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxFQUMzRCxFQUFFLENBQ0wsQ0FBQztJQUNOLENBQUM7SUFFRCxZQUFZO1FBQ1IsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2hCLEtBQUssTUFBTSxJQUFJLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLEVBQUU7Z0JBQ2pDLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUM7YUFDaEQ7U0FDSjthQUFNO1lBQ0gsS0FBSyxNQUFNLElBQUksSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssRUFBRTtnQkFDakMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLEdBQUcsQ0FBQyxDQUFDO2FBQ3BDO1NBQ0o7SUFDTCxDQUFDO0lBRUQsa0JBQWtCO1FBQ2QsS0FBSyxNQUFNLENBQUMsTUFBTSxFQUFFLFFBQVEsQ0FBQyxJQUFJLE1BQU0sQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxFQUFFO1lBQ2xFLE1BQU0sZUFBZSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFFLEtBQUssTUFBTSxDQUFDLEVBQUUsUUFBUSxDQUFDO1lBQ3BGLElBQUksZUFBZSxJQUFJLFFBQVEsR0FBRyxlQUFlLEVBQUU7Z0JBQy9DLE9BQU87YUFDVjtTQUNKO1FBQ0Qsd0VBQXdFO1FBQ3hFLGdEQUFnRDtRQUNoRCxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztJQUMxQixDQUFDO0lBRUQsTUFBTTtRQUNGLElBQUksQ0FBQyxXQUFXLENBQUM7WUFDYixPQUFPLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFO1lBQ3RCLEtBQUssRUFBRSxJQUFJLENBQUMsYUFBYSxFQUFFO1lBQzNCLE1BQU0sRUFBRSxJQUFJLENBQUMsTUFBTTtZQUNuQixjQUFjLEVBQUUsSUFBSSxDQUFDLFNBQVM7U0FDakMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVELE1BQU07UUFDRixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDdkIsQ0FBQztJQUVPLGFBQWE7UUFDakIsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sRUFBRTtZQUNuQixPQUFPO1NBQ1Y7UUFDRCxPQUFPLE1BQU0sQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQzthQUNyQyxHQUFHLENBQUMsQ0FBQyxDQUFDLFdBQVcsRUFBRSxRQUFRLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztZQUMvQixXQUFXO1lBQ1gsUUFBUTtTQUNYLENBQUMsQ0FBQzthQUNGLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDckMsQ0FBQzs4R0F6RVEsMEJBQTBCO2tHQUExQiwwQkFBMEIsK0RDakJ2Qywwb0lBa0dBOzsyRkRqRmEsMEJBQTBCO2tCQU50QyxTQUFTOytCQUNJLHlCQUF5QixtQkFHbEIsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBtYXJrZXIgYXMgXyB9IGZyb20gJ0BiaWVzYmplcmcvbmd4LXRyYW5zbGF0ZS1leHRyYWN0LW1hcmtlcic7XHJcbmltcG9ydCB7XHJcbiAgICBDYW5jZWxPcmRlcklucHV0LFxyXG4gICAgRGlhbG9nLFxyXG4gICAgZ2V0QXBwQ29uZmlnLFxyXG4gICAgSTE4blNlcnZpY2UsXHJcbiAgICBPcmRlckRldGFpbEZyYWdtZW50LFxyXG4gICAgT3JkZXJMaW5lSW5wdXQsXHJcbn0gZnJvbSAnQHZlbmR1cmUvYWRtaW4tdWkvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAndmRyLWNhbmNlbC1vcmRlci1kaWFsb2cnLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL2NhbmNlbC1vcmRlci1kaWFsb2cuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vY2FuY2VsLW9yZGVyLWRpYWxvZy5jb21wb25lbnQuc2NzcyddLFxyXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDYW5jZWxPcmRlckRpYWxvZ0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgRGlhbG9nPENhbmNlbE9yZGVySW5wdXQ+IHtcclxuICAgIG9yZGVyOiBPcmRlckRldGFpbEZyYWdtZW50O1xyXG4gICAgY2FuY2VsQWxsID0gdHJ1ZTtcclxuICAgIHJlc29sdmVXaXRoOiAocmVzdWx0PzogQ2FuY2VsT3JkZXJJbnB1dCkgPT4gdm9pZDtcclxuICAgIHJlYXNvbjogc3RyaW5nO1xyXG4gICAgbGluZVF1YW50aXRpZXM6IHsgW2xpbmVJZDogc3RyaW5nXTogbnVtYmVyIH0gPSB7fTtcclxuICAgIHJlYXNvbnM6IHN0cmluZ1tdID0gZ2V0QXBwQ29uZmlnKCkuY2FuY2VsbGF0aW9uUmVhc29ucyA/PyBbXHJcbiAgICAgICAgXygnb3JkZXIuY2FuY2VsLXJlYXNvbi1jdXN0b21lci1yZXF1ZXN0JyksXHJcbiAgICAgICAgXygnb3JkZXIuY2FuY2VsLXJlYXNvbi1ub3QtYXZhaWxhYmxlJyksXHJcbiAgICBdO1xyXG5cclxuICAgIGdldCBzZWxlY3Rpb25Db3VudCgpOiBudW1iZXIge1xyXG4gICAgICAgIHJldHVybiBPYmplY3QudmFsdWVzKHRoaXMubGluZVF1YW50aXRpZXMpLnJlZHVjZSgoc3VtLCBuKSA9PiBzdW0gKyBuLCAwKTtcclxuICAgIH1cclxuXHJcbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIGkxOG5TZXJ2aWNlOiBJMThuU2VydmljZSkge1xyXG4gICAgICAgIHRoaXMucmVhc29ucyA9IHRoaXMucmVhc29ucy5tYXAociA9PiB0aGlzLmkxOG5TZXJ2aWNlLnRyYW5zbGF0ZShyKSk7XHJcbiAgICB9XHJcblxyXG4gICAgbmdPbkluaXQoKSB7XHJcbiAgICAgICAgdGhpcy5saW5lUXVhbnRpdGllcyA9IHRoaXMub3JkZXIubGluZXMucmVkdWNlKFxyXG4gICAgICAgICAgICAocmVzdWx0LCBsaW5lKSA9PiAoeyAuLi5yZXN1bHQsIFtsaW5lLmlkXTogbGluZS5xdWFudGl0eSB9KSxcclxuICAgICAgICAgICAge30sXHJcbiAgICAgICAgKTtcclxuICAgIH1cclxuXHJcbiAgICByYWRpb0NoYW5nZWQoKSB7XHJcbiAgICAgICAgaWYgKHRoaXMuY2FuY2VsQWxsKSB7XHJcbiAgICAgICAgICAgIGZvciAoY29uc3QgbGluZSBvZiB0aGlzLm9yZGVyLmxpbmVzKSB7XHJcbiAgICAgICAgICAgICAgICB0aGlzLmxpbmVRdWFudGl0aWVzW2xpbmUuaWRdID0gbGluZS5xdWFudGl0eTtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgIH0gZWxzZSB7XHJcbiAgICAgICAgICAgIGZvciAoY29uc3QgbGluZSBvZiB0aGlzLm9yZGVyLmxpbmVzKSB7XHJcbiAgICAgICAgICAgICAgICB0aGlzLmxpbmVRdWFudGl0aWVzW2xpbmUuaWRdID0gMDtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICBjaGVja0lmQWxsU2VsZWN0ZWQoKSB7XHJcbiAgICAgICAgZm9yIChjb25zdCBbbGluZUlkLCBxdWFudGl0eV0gb2YgT2JqZWN0LmVudHJpZXModGhpcy5saW5lUXVhbnRpdGllcykpIHtcclxuICAgICAgICAgICAgY29uc3QgcXVhbnRpdHlJbk9yZGVyID0gdGhpcy5vcmRlci5saW5lcy5maW5kKGxpbmUgPT4gbGluZS5pZCA9PT0gbGluZUlkKT8ucXVhbnRpdHk7XHJcbiAgICAgICAgICAgIGlmIChxdWFudGl0eUluT3JkZXIgJiYgcXVhbnRpdHkgPCBxdWFudGl0eUluT3JkZXIpIHtcclxuICAgICAgICAgICAgICAgIHJldHVybjtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgIH1cclxuICAgICAgICAvLyBJZiB3ZSBnb3QgaGVyZSwgYWxsIG9mIHRoZSBzZWxlY3RlZCBxdWFudGl0aWVzIGFyZSBlcXVhbCB0byB0aGUgb3JkZXJcclxuICAgICAgICAvLyBsaW5lIHF1YW50aXRpZXMsIGkuZS4gZXZlcnl0aGluZyBpcyBzZWxlY3RlZC5cclxuICAgICAgICB0aGlzLmNhbmNlbEFsbCA9IHRydWU7XHJcbiAgICB9XHJcblxyXG4gICAgc2VsZWN0KCkge1xyXG4gICAgICAgIHRoaXMucmVzb2x2ZVdpdGgoe1xyXG4gICAgICAgICAgICBvcmRlcklkOiB0aGlzLm9yZGVyLmlkLFxyXG4gICAgICAgICAgICBsaW5lczogdGhpcy5nZXRMaW5lSW5wdXRzKCksXHJcbiAgICAgICAgICAgIHJlYXNvbjogdGhpcy5yZWFzb24sXHJcbiAgICAgICAgICAgIGNhbmNlbFNoaXBwaW5nOiB0aGlzLmNhbmNlbEFsbCxcclxuICAgICAgICB9KTtcclxuICAgIH1cclxuXHJcbiAgICBjYW5jZWwoKSB7XHJcbiAgICAgICAgdGhpcy5yZXNvbHZlV2l0aCgpO1xyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgZ2V0TGluZUlucHV0cygpOiBPcmRlckxpbmVJbnB1dFtdIHwgdW5kZWZpbmVkIHtcclxuICAgICAgICBpZiAodGhpcy5vcmRlci5hY3RpdmUpIHtcclxuICAgICAgICAgICAgcmV0dXJuO1xyXG4gICAgICAgIH1cclxuICAgICAgICByZXR1cm4gT2JqZWN0LmVudHJpZXModGhpcy5saW5lUXVhbnRpdGllcylcclxuICAgICAgICAgICAgLm1hcCgoW29yZGVyTGluZUlkLCBxdWFudGl0eV0pID0+ICh7XHJcbiAgICAgICAgICAgICAgICBvcmRlckxpbmVJZCxcclxuICAgICAgICAgICAgICAgIHF1YW50aXR5LFxyXG4gICAgICAgICAgICB9KSlcclxuICAgICAgICAgICAgLmZpbHRlcihsID0+IDAgPCBsLnF1YW50aXR5KTtcclxuICAgIH1cclxufVxyXG4iLCI8bmctdGVtcGxhdGUgdmRyRGlhbG9nVGl0bGU+e3sgJ29yZGVyLmNhbmNlbC1vcmRlcicgfCB0cmFuc2xhdGUgfX08L25nLXRlbXBsYXRlPlxyXG5cclxuPGRpdiBjbGFzcz1cImZ1bGZpbGxtZW50LXdyYXBwZXJcIj5cclxuICAgIDxkaXYgY2xhc3M9XCJvcmRlci1saW5lc1wiPlxyXG4gICAgICAgIDx0YWJsZSBjbGFzcz1cInRhYmxlXCI+XHJcbiAgICAgICAgICAgIDx0aGVhZD5cclxuICAgICAgICAgICAgICAgIDx0cj5cclxuICAgICAgICAgICAgICAgICAgICA8dGg+PC90aD5cclxuICAgICAgICAgICAgICAgICAgICA8dGg+e3sgJ29yZGVyLnByb2R1Y3QtbmFtZScgfCB0cmFuc2xhdGUgfX08L3RoPlxyXG4gICAgICAgICAgICAgICAgICAgIDx0aD57eyAnb3JkZXIucHJvZHVjdC1za3UnIHwgdHJhbnNsYXRlIH19PC90aD5cclxuICAgICAgICAgICAgICAgICAgICA8dGg+e3sgJ29yZGVyLnF1YW50aXR5JyB8IHRyYW5zbGF0ZSB9fTwvdGg+XHJcbiAgICAgICAgICAgICAgICAgICAgPHRoPnt7ICdvcmRlci51bml0LXByaWNlJyB8IHRyYW5zbGF0ZSB9fTwvdGg+XHJcbiAgICAgICAgICAgICAgICAgICAgPHRoPnt7ICdvcmRlci5jYW5jZWwnIHwgdHJhbnNsYXRlIH19PC90aD5cclxuICAgICAgICAgICAgICAgIDwvdHI+XHJcbiAgICAgICAgICAgIDwvdGhlYWQ+XHJcbiAgICAgICAgICAgIDx0clxyXG4gICAgICAgICAgICAgICAgKm5nRm9yPVwibGV0IGxpbmUgb2Ygb3JkZXIubGluZXNcIlxyXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJvcmRlci1saW5lXCJcclxuICAgICAgICAgICAgICAgIFtjbGFzcy5pcy1kaXNhYmxlZF09XCJjYW5jZWxBbGxcIlxyXG4gICAgICAgICAgICAgICAgW2NsYXNzLmlzLWNhbmNlbGxlZF09XCJsaW5lLnF1YW50aXR5ID09PSAwXCJcclxuICAgICAgICAgICAgPlxyXG4gICAgICAgICAgICAgICAgPHRkIGNsYXNzPVwiYWxpZ24tbWlkZGxlIHRodW1iXCI+XHJcbiAgICAgICAgICAgICAgICAgICAgPGltZyBbc3JjXT1cImxpbmUuZmVhdHVyZWRBc3NldCB8IGFzc2V0UHJldmlldzogJ3RpbnknXCIgLz5cclxuICAgICAgICAgICAgICAgIDwvdGQ+XHJcbiAgICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJhbGlnbi1taWRkbGUgbmFtZVwiPnt7IGxpbmUucHJvZHVjdFZhcmlhbnQubmFtZSB9fTwvdGQ+XHJcbiAgICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJhbGlnbi1taWRkbGUgc2t1XCI+e3sgbGluZS5wcm9kdWN0VmFyaWFudC5za3UgfX08L3RkPlxyXG4gICAgICAgICAgICAgICAgPHRkIGNsYXNzPVwiYWxpZ24tbWlkZGxlIHF1YW50aXR5XCI+e3sgbGluZS5xdWFudGl0eSB9fTwvdGQ+XHJcbiAgICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJhbGlnbi1taWRkbGUgcXVhbnRpdHlcIj5cclxuICAgICAgICAgICAgICAgICAgICB7eyBsaW5lLnVuaXRQcmljZVdpdGhUYXggfCBsb2NhbGVDdXJyZW5jeTogb3JkZXIuY3VycmVuY3lDb2RlIH19XHJcbiAgICAgICAgICAgICAgICA8L3RkPlxyXG4gICAgICAgICAgICAgICAgPHRkIGNsYXNzPVwiYWxpZ24tbWlkZGxlIGZ1bGZpbFwiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxpbnB1dFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAqbmdJZj1cImxpbmUucXVhbnRpdHkgPiAwICYmICFvcmRlci5hY3RpdmU7IGVsc2Ugbm9uRWRpdGFibGVcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICBbKG5nTW9kZWwpXT1cImxpbmVRdWFudGl0aWVzW2xpbmUuaWRdXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgKGlucHV0KT1cImNoZWNrSWZBbGxTZWxlY3RlZCgpXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgW2Rpc2FibGVkXT1cImNhbmNlbEFsbFwiXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIHR5cGU9XCJudW1iZXJcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICBbbWF4XT1cImxpbmUucXVhbnRpdHlcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICBtaW49XCIwXCJcclxuICAgICAgICAgICAgICAgICAgICAvPlxyXG4gICAgICAgICAgICAgICAgICAgIDxuZy10ZW1wbGF0ZSAjbm9uRWRpdGFibGU+e3sgbGluZS5xdWFudGl0eSB9fTwvbmctdGVtcGxhdGU+XHJcbiAgICAgICAgICAgICAgICA8L3RkPlxyXG4gICAgICAgICAgICA8L3RyPlxyXG4gICAgICAgIDwvdGFibGU+XHJcbiAgICA8L2Rpdj5cclxuICAgIDxkaXYgY2xhc3M9XCJjYW5jZWxsYXRpb24tZGV0YWlsc1wiPlxyXG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJvcmRlci5hY3RpdmUgIT09IHRydWVcIj5cclxuICAgICAgICAgICAgPGNsci1yYWRpby13cmFwcGVyPlxyXG4gICAgICAgICAgICAgICAgPGlucHV0XHJcbiAgICAgICAgICAgICAgICAgICAgdHlwZT1cInJhZGlvXCJcclxuICAgICAgICAgICAgICAgICAgICBjbHJSYWRpb1xyXG4gICAgICAgICAgICAgICAgICAgIFt2YWx1ZV09XCJ0cnVlXCJcclxuICAgICAgICAgICAgICAgICAgICBbKG5nTW9kZWwpXT1cImNhbmNlbEFsbFwiXHJcbiAgICAgICAgICAgICAgICAgICAgbmFtZT1cIm9wdGlvbnNcIlxyXG4gICAgICAgICAgICAgICAgICAgIChuZ01vZGVsQ2hhbmdlKT1cInJhZGlvQ2hhbmdlZCgpXCJcclxuICAgICAgICAgICAgICAgIC8+XHJcbiAgICAgICAgICAgICAgICA8bGFiZWw+e3sgJ29yZGVyLmNhbmNlbC1lbnRpcmUtb3JkZXInIHwgdHJhbnNsYXRlIH19PC9sYWJlbD5cclxuICAgICAgICAgICAgPC9jbHItcmFkaW8td3JhcHBlcj5cclxuICAgICAgICAgICAgPGNsci1yYWRpby13cmFwcGVyPlxyXG4gICAgICAgICAgICAgICAgPGlucHV0XHJcbiAgICAgICAgICAgICAgICAgICAgdHlwZT1cInJhZGlvXCJcclxuICAgICAgICAgICAgICAgICAgICBjbHJSYWRpb1xyXG4gICAgICAgICAgICAgICAgICAgIFt2YWx1ZV09XCJmYWxzZVwiXHJcbiAgICAgICAgICAgICAgICAgICAgWyhuZ01vZGVsKV09XCJjYW5jZWxBbGxcIlxyXG4gICAgICAgICAgICAgICAgICAgIG5hbWU9XCJvcHRpb25zXCJcclxuICAgICAgICAgICAgICAgICAgICAobmdNb2RlbENoYW5nZSk9XCJyYWRpb0NoYW5nZWQoKVwiXHJcbiAgICAgICAgICAgICAgICAvPlxyXG4gICAgICAgICAgICAgICAgPGxhYmVsPnt7ICdvcmRlci5jYW5jZWwtc3BlY2lmaWVkLWl0ZW1zJyB8IHRyYW5zbGF0ZSB9fTwvbGFiZWw+XHJcbiAgICAgICAgICAgIDwvY2xyLXJhZGlvLXdyYXBwZXI+XHJcbiAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgPGxhYmVsIGNsYXNzPVwiY2xyLWNvbnRyb2wtbGFiZWxcIj57eyAnb3JkZXIuY2FuY2VsbGF0aW9uLXJlYXNvbicgfCB0cmFuc2xhdGUgfX08L2xhYmVsPlxyXG4gICAgICAgIDxuZy1zZWxlY3RcclxuICAgICAgICAgICAgW2l0ZW1zXT1cInJlYXNvbnNcIlxyXG4gICAgICAgICAgICBiaW5kTGFiZWw9XCJuYW1lXCJcclxuICAgICAgICAgICAgYXV0b2ZvY3VzXHJcbiAgICAgICAgICAgIGJpbmRWYWx1ZT1cImlkXCJcclxuICAgICAgICAgICAgW2FkZFRhZ109XCJ0cnVlXCJcclxuICAgICAgICAgICAgWyhuZ01vZGVsKV09XCJyZWFzb25cIlxyXG4gICAgICAgID48L25nLXNlbGVjdD5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj5cclxuXHJcbjxuZy10ZW1wbGF0ZSB2ZHJEaWFsb2dCdXR0b25zPlxyXG4gICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgY2xhc3M9XCJidG5cIiAoY2xpY2spPVwiY2FuY2VsKClcIj57eyAnY29tbW9uLmNhbmNlbCcgfCB0cmFuc2xhdGUgfX08L2J1dHRvbj5cclxuICAgIDxidXR0b25cclxuICAgICAgICB0eXBlPVwic3VibWl0XCJcclxuICAgICAgICAoY2xpY2spPVwic2VsZWN0KClcIlxyXG4gICAgICAgIFtkaXNhYmxlZF09XCIhcmVhc29uIHx8ICghb3JkZXIuYWN0aXZlICYmIHNlbGVjdGlvbkNvdW50ID09PSAwKVwiXHJcbiAgICAgICAgY2xhc3M9XCJidG4gYnRuLXByaW1hcnlcIlxyXG4gICAgPlxyXG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhb3JkZXIuYWN0aXZlXCI+XHJcbiAgICAgICAgICAgIHt7ICdvcmRlci5jYW5jZWwtc2VsZWN0ZWQtaXRlbXMnIHwgdHJhbnNsYXRlIH19XHJcbiAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIm9yZGVyLmFjdGl2ZVwiPlxyXG4gICAgICAgICAgICB7eyAnb3JkZXIuY2FuY2VsLW9yZGVyJyB8IHRyYW5zbGF0ZSB9fVxyXG4gICAgICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgPC9idXR0b24+XHJcbjwvbmctdGVtcGxhdGU+XHJcbiJdfQ==

package/esm2022/order/components/coupon-code-selector/coupon-code-selector.component.mjs

@@ -44,10 +44,10 @@ export class CouponCodeSelectorComponent {
             this.control = new UntypedFormControl(this.couponCodes ?? []);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CouponCodeSelectorComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: { couponCodes: "couponCodes", control: "control" }, outputs: { addCouponCode: "addCouponCode", removeCouponCode: "removeCouponCode" }, ngImport: i0, template: "<ng-select\r\n    [items]=\"availableCouponCodes$ | async\"\r\n    appendTo=\"body\"\r\n    bindLabel=\"code\"\r\n    bindValue=\"code\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"true\"\r\n    [hideSelected]=\"true\"\r\n    [minTermLength]=\"2\"\r\n    typeToSearchText=\"\"\r\n    [typeahead]=\"couponCodeInput$\"\r\n    [formControl]=\"control\"\r\n    (add)=\"addCouponCode.emit($event.code)\"\r\n    (remove)=\"removeCouponCode.emit($event.value?.code)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip>{{ item.code }}</vdr-chip>\r\n        {{ item.promotionName }}\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CouponCodeSelectorComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: { couponCodes: "couponCodes", control: "control" }, outputs: { addCouponCode: "addCouponCode", removeCouponCode: "removeCouponCode" }, ngImport: i0, template: "<ng-select\r\n    [items]=\"availableCouponCodes$ | async\"\r\n    appendTo=\"body\"\r\n    bindLabel=\"code\"\r\n    bindValue=\"code\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"true\"\r\n    [hideSelected]=\"true\"\r\n    [minTermLength]=\"2\"\r\n    typeToSearchText=\"\"\r\n    [typeahead]=\"couponCodeInput$\"\r\n    [formControl]=\"control\"\r\n    (add)=\"addCouponCode.emit($event.code)\"\r\n    (remove)=\"removeCouponCode.emit($event.value?.code)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip>{{ item.code }}</vdr-chip>\r\n        {{ item.promotionName }}\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CouponCodeSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CouponCodeSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-coupon-code-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-select\r\n    [items]=\"availableCouponCodes$ | async\"\r\n    appendTo=\"body\"\r\n    bindLabel=\"code\"\r\n    bindValue=\"code\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"true\"\r\n    [hideSelected]=\"true\"\r\n    [minTermLength]=\"2\"\r\n    typeToSearchText=\"\"\r\n    [typeahead]=\"couponCodeInput$\"\r\n    [formControl]=\"control\"\r\n    (add)=\"addCouponCode.emit($event.code)\"\r\n    (remove)=\"removeCouponCode.emit($event.value?.code)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip>{{ item.code }}</vdr-chip>\r\n        {{ item.promotionName }}\r\n    </ng-template>\r\n</ng-select>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1.DataService }]; }, propDecorators: { couponCodes: [{

package/esm2022/order/components/draft-order-detail/draft-order-detail.component.mjs

@@ -172,10 +172,10 @@ export class DraftOrderDetailComponent extends TypedBaseDetailComponent {
     setFormValues(entity) {
         // empty
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DraftOrderDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: i2.OrderTransitionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: DraftOrderDetailComponent, selector: "vdr-draft-order-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-align-items-center\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"draft-order-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"completeOrder()\"\r\n                [disabled]=\"!order.customer || !order.lines.length || !order.shippingLines.length\"\r\n            >\r\n                <clr-icon shape=\"check\"></clr-icon>\r\n                {{ 'order.complete-draft-order' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"deleteOrder()\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'order.delete-draft-order' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon *ngIf=\"!order.customer\" shape=\"unknown-status\" class=\"is-warning\"></clr-icon>\r\n                <clr-icon *ngIf=\"order.customer\" shape=\"check\" class=\"is-success\"></clr-icon>\r\n            </ng-template>\r\n            <vdr-customer-label\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.customer\"\r\n                [customer]=\"order.customer\"\r\n            ></vdr-customer-label>\r\n            <button class=\"button-small\" (click)=\"setCustomer()\">\r\n                {{ 'order.set-customer-for-order' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.billing-address' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.billingAddress.streetLine1\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.billingAddress.streetLine1\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.billingAddress\"\r\n                [address]=\"order.billingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small\" (click)=\"setBillingAddress()\">\r\n                {{ 'order.set-billing-address' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.shipping' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.shippingAddress.streetLine1 || !order.shippingLines.length\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.shippingAddress.streetLine1 && order.shippingLines.length\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.shippingAddress\"\r\n                [address]=\"order.shippingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small mr-2\" (click)=\"setShippingAddress()\">\r\n                {{ 'order.set-shipping-address' | translate }}\r\n            </button>\r\n\r\n            <div *ngFor=\"let shippingLine of order.shippingLines\">\r\n                {{ shippingLine.shippingMethod.name }}\r\n            </div>\r\n            <button class=\"button-small\" (click)=\"setShippingMethod()\">\r\n                {{ 'order.set-shipping-method' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <button\r\n                *ngIf=\"order.couponCodes.length === 0 && !displayCouponCodeInput\"\r\n                class=\"button-small\"\r\n                (click)=\"displayCouponCodeInput = !displayCouponCodeInput\"\r\n            >\r\n                {{ 'order.set-coupon-codes' | translate }}\r\n            </button>\r\n            <div *ngIf=\"order.couponCodes.length || displayCouponCodeInput\">\r\n                <label>{{ 'order.set-coupon-codes' | translate }}</label>\r\n                <vdr-coupon-code-selector\r\n                    [couponCodes]=\"order.couponCodes\"\r\n                    (addCouponCode)=\"applyCouponCode($event)\"\r\n                    (removeCouponCode)=\"removeCouponCode($event)\"\r\n                ></vdr-coupon-code-selector>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <vdr-page-block>\r\n        <vdr-card>\r\n            <vdr-draft-order-variant-selector\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                (addItem)=\"addItemToOrder($event)\"\r\n            ></vdr-draft-order-variant-selector>\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [isDraft]=\"true\"\r\n                (adjust)=\"adjustOrderLine($event)\"\r\n                (remove)=\"removeOrderLine($event)\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\">\r\n            <ng-container *ngIf=\"order.taxSummary.length\">\r\n                <table class=\"table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>{{ 'common.description' | translate }}</th>\r\n                            <th>{{ 'order.tax-rate' | translate }}</th>\r\n                            <th>{{ 'order.tax-base' | translate }}</th>\r\n                            <th>{{ 'order.tax-total' | translate }}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let row of order.taxSummary\">\r\n                            <td>{{ row.description }}</td>\r\n                            <td>{{ row.taxRate / 100 | percent }}</td>\r\n                            <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                            <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </vdr-card>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"draft-order-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n\r\n        <vdr-order-custom-fields-card\r\n            [customFieldsConfig]=\"customFields\"\r\n            [customFieldValues]=\"order.customFields\"\r\n            (updateClick)=\"updateCustomFields($event)\"\r\n        ></vdr-order-custom-fields-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "component", type: i5.OrderCustomFieldsCardComponent, selector: "vdr-order-custom-fields-card", inputs: ["customFieldsConfig", "customFieldValues"], outputs: ["updateClick"] }, { kind: "component", type: i6.OrderTableComponent, selector: "vdr-order-table", inputs: ["order", "orderLineCustomFields", "isDraft"], outputs: ["adjust", "remove"] }, { kind: "component", type: i7.DraftOrderVariantSelectorComponent, selector: "vdr-draft-order-variant-selector", inputs: ["currencyCode", "orderLineCustomFields"], outputs: ["addItem"] }, { kind: "component", type: i8.CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: ["couponCodes", "control"], outputs: ["addCouponCode", "removeCouponCode"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PercentPipe, name: "percent" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DraftOrderDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: i2.OrderTransitionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DraftOrderDetailComponent, selector: "vdr-draft-order-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-align-items-center\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"draft-order-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"completeOrder()\"\r\n                [disabled]=\"!order.customer || !order.lines.length || !order.shippingLines.length\"\r\n            >\r\n                <clr-icon shape=\"check\"></clr-icon>\r\n                {{ 'order.complete-draft-order' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"deleteOrder()\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'order.delete-draft-order' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon *ngIf=\"!order.customer\" shape=\"unknown-status\" class=\"is-warning\"></clr-icon>\r\n                <clr-icon *ngIf=\"order.customer\" shape=\"check\" class=\"is-success\"></clr-icon>\r\n            </ng-template>\r\n            <vdr-customer-label\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.customer\"\r\n                [customer]=\"order.customer\"\r\n            ></vdr-customer-label>\r\n            <button class=\"button-small\" (click)=\"setCustomer()\">\r\n                {{ 'order.set-customer-for-order' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.billing-address' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.billingAddress.streetLine1\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.billingAddress.streetLine1\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.billingAddress\"\r\n                [address]=\"order.billingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small\" (click)=\"setBillingAddress()\">\r\n                {{ 'order.set-billing-address' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.shipping' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.shippingAddress.streetLine1 || !order.shippingLines.length\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.shippingAddress.streetLine1 && order.shippingLines.length\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.shippingAddress\"\r\n                [address]=\"order.shippingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small mr-2\" (click)=\"setShippingAddress()\">\r\n                {{ 'order.set-shipping-address' | translate }}\r\n            </button>\r\n\r\n            <div *ngFor=\"let shippingLine of order.shippingLines\">\r\n                {{ shippingLine.shippingMethod.name }}\r\n            </div>\r\n            <button class=\"button-small\" (click)=\"setShippingMethod()\">\r\n                {{ 'order.set-shipping-method' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <button\r\n                *ngIf=\"order.couponCodes.length === 0 && !displayCouponCodeInput\"\r\n                class=\"button-small\"\r\n                (click)=\"displayCouponCodeInput = !displayCouponCodeInput\"\r\n            >\r\n                {{ 'order.set-coupon-codes' | translate }}\r\n            </button>\r\n            <div *ngIf=\"order.couponCodes.length || displayCouponCodeInput\">\r\n                <label>{{ 'order.set-coupon-codes' | translate }}</label>\r\n                <vdr-coupon-code-selector\r\n                    [couponCodes]=\"order.couponCodes\"\r\n                    (addCouponCode)=\"applyCouponCode($event)\"\r\n                    (removeCouponCode)=\"removeCouponCode($event)\"\r\n                ></vdr-coupon-code-selector>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <vdr-page-block>\r\n        <vdr-card>\r\n            <vdr-draft-order-variant-selector\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                (addItem)=\"addItemToOrder($event)\"\r\n            ></vdr-draft-order-variant-selector>\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [isDraft]=\"true\"\r\n                (adjust)=\"adjustOrderLine($event)\"\r\n                (remove)=\"removeOrderLine($event)\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\">\r\n            <ng-container *ngIf=\"order.taxSummary.length\">\r\n                <table class=\"table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>{{ 'common.description' | translate }}</th>\r\n                            <th>{{ 'order.tax-rate' | translate }}</th>\r\n                            <th>{{ 'order.tax-base' | translate }}</th>\r\n                            <th>{{ 'order.tax-total' | translate }}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let row of order.taxSummary\">\r\n                            <td>{{ row.description }}</td>\r\n                            <td>{{ row.taxRate / 100 | percent }}</td>\r\n                            <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                            <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </vdr-card>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"draft-order-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n\r\n        <vdr-order-custom-fields-card\r\n            [customFieldsConfig]=\"customFields\"\r\n            [customFieldValues]=\"order.customFields\"\r\n            (updateClick)=\"updateCustomFields($event)\"\r\n        ></vdr-order-custom-fields-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.CustomerLabelComponent, selector: "vdr-customer-label", inputs: ["customer"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "component", type: i5.OrderCustomFieldsCardComponent, selector: "vdr-order-custom-fields-card", inputs: ["customFieldsConfig", "customFieldValues"], outputs: ["updateClick"] }, { kind: "component", type: i6.OrderTableComponent, selector: "vdr-order-table", inputs: ["order", "orderLineCustomFields", "isDraft"], outputs: ["adjust", "remove"] }, { kind: "component", type: i7.DraftOrderVariantSelectorComponent, selector: "vdr-draft-order-variant-selector", inputs: ["currencyCode", "orderLineCustomFields"], outputs: ["addItem"] }, { kind: "component", type: i8.CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: ["couponCodes", "control"], outputs: ["addCouponCode", "removeCouponCode"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PercentPipe, name: "percent" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DraftOrderDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DraftOrderDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-draft-order-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-align-items-center\">\r\n                <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n            </div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"draft-order-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                (click)=\"completeOrder()\"\r\n                [disabled]=\"!order.customer || !order.lines.length || !order.shippingLines.length\"\r\n            >\r\n                <clr-icon shape=\"check\"></clr-icon>\r\n                {{ 'order.complete-draft-order' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"deleteOrder()\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'order.delete-draft-order' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity$ | async as order\">\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card [title]=\"'order.customer' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon *ngIf=\"!order.customer\" shape=\"unknown-status\" class=\"is-warning\"></clr-icon>\r\n                <clr-icon *ngIf=\"order.customer\" shape=\"check\" class=\"is-success\"></clr-icon>\r\n            </ng-template>\r\n            <vdr-customer-label\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.customer\"\r\n                [customer]=\"order.customer\"\r\n            ></vdr-customer-label>\r\n            <button class=\"button-small\" (click)=\"setCustomer()\">\r\n                {{ 'order.set-customer-for-order' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.billing-address' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.billingAddress.streetLine1\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.billingAddress.streetLine1\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.billingAddress\"\r\n                [address]=\"order.billingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small\" (click)=\"setBillingAddress()\">\r\n                {{ 'order.set-billing-address' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.shipping' | translate\">\r\n            <ng-template vdrCardControls>\r\n                <clr-icon\r\n                    *ngIf=\"!order.shippingAddress.streetLine1 || !order.shippingLines.length\"\r\n                    shape=\"unknown-status\"\r\n                    class=\"is-warning\"\r\n                ></clr-icon>\r\n                <clr-icon\r\n                    *ngIf=\"order.shippingAddress.streetLine1 && order.shippingLines.length\"\r\n                    shape=\"check\"\r\n                    class=\"is-success\"\r\n                ></clr-icon>\r\n            </ng-template>\r\n            <vdr-formatted-address\r\n                class=\"block mb-2\"\r\n                *ngIf=\"order.shippingAddress\"\r\n                [address]=\"order.shippingAddress\"\r\n            ></vdr-formatted-address>\r\n            <button class=\"button-small mr-2\" (click)=\"setShippingAddress()\">\r\n                {{ 'order.set-shipping-address' | translate }}\r\n            </button>\r\n\r\n            <div *ngFor=\"let shippingLine of order.shippingLines\">\r\n                {{ shippingLine.shippingMethod.name }}\r\n            </div>\r\n            <button class=\"button-small\" (click)=\"setShippingMethod()\">\r\n                {{ 'order.set-shipping-method' | translate }}\r\n            </button>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <button\r\n                *ngIf=\"order.couponCodes.length === 0 && !displayCouponCodeInput\"\r\n                class=\"button-small\"\r\n                (click)=\"displayCouponCodeInput = !displayCouponCodeInput\"\r\n            >\r\n                {{ 'order.set-coupon-codes' | translate }}\r\n            </button>\r\n            <div *ngIf=\"order.couponCodes.length || displayCouponCodeInput\">\r\n                <label>{{ 'order.set-coupon-codes' | translate }}</label>\r\n                <vdr-coupon-code-selector\r\n                    [couponCodes]=\"order.couponCodes\"\r\n                    (addCouponCode)=\"applyCouponCode($event)\"\r\n                    (removeCouponCode)=\"removeCouponCode($event)\"\r\n                ></vdr-coupon-code-selector>\r\n            </div>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <vdr-page-block>\r\n        <vdr-card>\r\n            <vdr-draft-order-variant-selector\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                (addItem)=\"addItemToOrder($event)\"\r\n            ></vdr-draft-order-variant-selector>\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [isDraft]=\"true\"\r\n                (adjust)=\"adjustOrderLine($event)\"\r\n                (remove)=\"removeOrderLine($event)\"\r\n            ></vdr-order-table>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'order.tax-summary' | translate\">\r\n            <ng-container *ngIf=\"order.taxSummary.length\">\r\n                <table class=\"table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>{{ 'common.description' | translate }}</th>\r\n                            <th>{{ 'order.tax-rate' | translate }}</th>\r\n                            <th>{{ 'order.tax-base' | translate }}</th>\r\n                            <th>{{ 'order.tax-total' | translate }}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let row of order.taxSummary\">\r\n                            <td>{{ row.description }}</td>\r\n                            <td>{{ row.taxRate / 100 | percent }}</td>\r\n                            <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>\r\n                            <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </vdr-card>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"draft-order-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n\r\n        <vdr-order-custom-fields-card\r\n            [customFieldsConfig]=\"customFields\"\r\n            [customFieldValues]=\"order.customFields\"\r\n            (updateClick)=\"updateCustomFields($event)\"\r\n        ></vdr-order-custom-fields-card>\r\n    </vdr-page-block>\r\n</vdr-page-detail-layout>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i1.NotificationService }, { type: i1.ModalService }, { type: i2.OrderTransitionService }]; } });

package/esm2022/order/components/draft-order-variant-selector/draft-order-variant-selector.component.mjs

@@ -43,10 +43,10 @@ export class DraftOrderVariantSelectorComponent {
             this.customFieldsFormGroup.reset();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DraftOrderVariantSelectorComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: DraftOrderVariantSelectorComponent, selector: "vdr-draft-order-variant-selector", inputs: { currencyCode: "currencyCode", orderLineCustomFields: "orderLineCustomFields" }, outputs: { addItem: "addItem" }, ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-block\">\r\n        <h4 class=\"card-title\">{{ 'order.add-item-to-order' | translate }}</h4>\r\n        <vdr-product-variant-selector\r\n            (productSelected)=\"selectedVariantId$.next($event.productVariantId)\"\r\n        ></vdr-product-variant-selector>\r\n    </div>\r\n    <div class=\"card-block\" *ngIf=\"selectedVariant$ | async as selectedVariant\">\r\n        <div class=\"variant-details\">\r\n            <img class=\"mr-2\" [src]=\"selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32\">\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.name }}</div>\r\n                <div class=\"small\">{{ selectedVariant?.sku }}</div>\r\n            </div>\r\n            <div class=\"details ml-4\">\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-on-hand' | translate }}: {{ selectedVariant.stockOnHand }}\r\n                </div>\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-allocated' | translate }}: {{ selectedVariant.stockAllocated }}\r\n                </div>\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.priceWithTax | localeCurrency: currencyCode }}</div>\r\n                <div class=\"small\" [title]=\"'order.net-price' | translate\">\r\n                    {{ selectedVariant?.price | localeCurrency: currencyCode }}\r\n                </div>\r\n            </div>\r\n            <div>\r\n                <input [disabled]=\"!selectedVariant\" type=\"number\" min=\"0\" [(ngModel)]=\"quantity\" />\r\n            </div>\r\n            <button\r\n                [disabled]=\"!selectedVariant\"\r\n                class=\"btn btn-small btn-primary\"\r\n                (click)=\"addItemClick(selectedVariant)\"\r\n            >\r\n                {{ 'order.add-item-to-order' | translate }}\r\n            </button>\r\n        </div>\r\n        <ng-container *ngIf=\"orderLineCustomFields.length\">\r\n            <div class=\"custom-field\" *ngFor=\"let field of orderLineCustomFields\">\r\n                <vdr-custom-field-control\r\n                    [compact]=\"true\"\r\n                    [readonly]=\"false\"\r\n                    [customField]=\"field\"\r\n                    [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                ></vdr-custom-field-control>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: [".variant-details{display:flex;align-items:center}.variant-details img{border-radius:var(--border-radius-img);width:32px;height:32px}.variant-details .details{font-size:.65rem;line-height:.7rem}.variant-details input{width:48px;margin:0 6px}.variant-details .small{font-size:11px;color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DraftOrderVariantSelectorComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DraftOrderVariantSelectorComponent, selector: "vdr-draft-order-variant-selector", inputs: { currencyCode: "currencyCode", orderLineCustomFields: "orderLineCustomFields" }, outputs: { addItem: "addItem" }, ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-block\">\r\n        <h4 class=\"card-title\">{{ 'order.add-item-to-order' | translate }}</h4>\r\n        <vdr-product-variant-selector\r\n            (productSelected)=\"selectedVariantId$.next($event.productVariantId)\"\r\n        ></vdr-product-variant-selector>\r\n    </div>\r\n    <div class=\"card-block\" *ngIf=\"selectedVariant$ | async as selectedVariant\">\r\n        <div class=\"variant-details\">\r\n            <img class=\"mr-2\" [src]=\"selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32\">\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.name }}</div>\r\n                <div class=\"small\">{{ selectedVariant?.sku }}</div>\r\n            </div>\r\n            <div class=\"details ml-4\">\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-on-hand' | translate }}: {{ selectedVariant.stockOnHand }}\r\n                </div>\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-allocated' | translate }}: {{ selectedVariant.stockAllocated }}\r\n                </div>\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.priceWithTax | localeCurrency: currencyCode }}</div>\r\n                <div class=\"small\" [title]=\"'order.net-price' | translate\">\r\n                    {{ selectedVariant?.price | localeCurrency: currencyCode }}\r\n                </div>\r\n            </div>\r\n            <div>\r\n                <input [disabled]=\"!selectedVariant\" type=\"number\" min=\"0\" [(ngModel)]=\"quantity\" />\r\n            </div>\r\n            <button\r\n                [disabled]=\"!selectedVariant\"\r\n                class=\"btn btn-small btn-primary\"\r\n                (click)=\"addItemClick(selectedVariant)\"\r\n            >\r\n                {{ 'order.add-item-to-order' | translate }}\r\n            </button>\r\n        </div>\r\n        <ng-container *ngIf=\"orderLineCustomFields.length\">\r\n            <div class=\"custom-field\" *ngFor=\"let field of orderLineCustomFields\">\r\n                <vdr-custom-field-control\r\n                    [compact]=\"true\"\r\n                    [readonly]=\"false\"\r\n                    [customField]=\"field\"\r\n                    [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                ></vdr-custom-field-control>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: [".variant-details{display:flex;align-items:center}.variant-details img{border-radius:var(--border-radius-img);width:32px;height:32px}.variant-details .details{font-size:.65rem;line-height:.7rem}.variant-details input{width:48px;margin:0 6px}.variant-details .small{font-size:11px;color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DraftOrderVariantSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DraftOrderVariantSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-draft-order-variant-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card\">\r\n    <div class=\"card-block\">\r\n        <h4 class=\"card-title\">{{ 'order.add-item-to-order' | translate }}</h4>\r\n        <vdr-product-variant-selector\r\n            (productSelected)=\"selectedVariantId$.next($event.productVariantId)\"\r\n        ></vdr-product-variant-selector>\r\n    </div>\r\n    <div class=\"card-block\" *ngIf=\"selectedVariant$ | async as selectedVariant\">\r\n        <div class=\"variant-details\">\r\n            <img class=\"mr-2\" [src]=\"selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32\">\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.name }}</div>\r\n                <div class=\"small\">{{ selectedVariant?.sku }}</div>\r\n            </div>\r\n            <div class=\"details ml-4\">\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-on-hand' | translate }}: {{ selectedVariant.stockOnHand }}\r\n                </div>\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-allocated' | translate }}: {{ selectedVariant.stockAllocated }}\r\n                </div>\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.priceWithTax | localeCurrency: currencyCode }}</div>\r\n                <div class=\"small\" [title]=\"'order.net-price' | translate\">\r\n                    {{ selectedVariant?.price | localeCurrency: currencyCode }}\r\n                </div>\r\n            </div>\r\n            <div>\r\n                <input [disabled]=\"!selectedVariant\" type=\"number\" min=\"0\" [(ngModel)]=\"quantity\" />\r\n            </div>\r\n            <button\r\n                [disabled]=\"!selectedVariant\"\r\n                class=\"btn btn-small btn-primary\"\r\n                (click)=\"addItemClick(selectedVariant)\"\r\n            >\r\n                {{ 'order.add-item-to-order' | translate }}\r\n            </button>\r\n        </div>\r\n        <ng-container *ngIf=\"orderLineCustomFields.length\">\r\n            <div class=\"custom-field\" *ngFor=\"let field of orderLineCustomFields\">\r\n                <vdr-custom-field-control\r\n                    [compact]=\"true\"\r\n                    [readonly]=\"false\"\r\n                    [customField]=\"field\"\r\n                    [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                ></vdr-custom-field-control>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: [".variant-details{display:flex;align-items:center}.variant-details img{border-radius:var(--border-radius-img);width:32px;height:32px}.variant-details .details{font-size:.65rem;line-height:.7rem}.variant-details input{width:48px;margin:0 6px}.variant-details .small{font-size:11px;color:var(--color-text-300)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DataService }]; }, propDecorators: { currencyCode: [{

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

@@ -69,11 +69,11 @@ export class FulfillOrderDialogComponent {
     cancel() {
         this.resolveWith();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FulfillOrderDialogComponent, deps: [{ token: i1.DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: FulfillOrderDialogComponent, selector: "vdr-fulfill-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\r\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                    <th>{{ 'order.fulfill' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\r\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\r\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\r\n                        type=\"number\"\r\n                        [max]=\"fulfillmentQuantities[line.id].max\"\r\n                        min=\"0\"\r\n                    />\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"shipping-details\">\r\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\r\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\r\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\r\n        <vdr-configurable-input\r\n            [operationDefinition]=\"fulfillmentHandlerDef\"\r\n            [operation]=\"fulfillmentHandler\"\r\n            [formControl]=\"fulfillmentHandlerControl\"\r\n            [removable]=\"false\"\r\n        ></vdr-configurable-input>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        {{ 'order.create-fulfillment' | translate }}\r\n    </button>\r\n</ng-template>\r\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-right:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-right:2px}.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-left:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position"], outputs: ["remove"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FulfillOrderDialogComponent, deps: [{ token: i1.DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: FulfillOrderDialogComponent, selector: "vdr-fulfill-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\r\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                    <th>{{ 'order.fulfill' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\r\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\r\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\r\n                        type=\"number\"\r\n                        [max]=\"fulfillmentQuantities[line.id].max\"\r\n                        min=\"0\"\r\n                    />\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"shipping-details\">\r\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\r\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\r\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\r\n        <vdr-configurable-input\r\n            [operationDefinition]=\"fulfillmentHandlerDef\"\r\n            [operation]=\"fulfillmentHandler\"\r\n            [formControl]=\"fulfillmentHandlerControl\"\r\n            [removable]=\"false\"\r\n        ></vdr-configurable-input>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        {{ 'order.create-fulfillment' | translate }}\r\n    </button>\r\n</ng-template>\r\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{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}.fulfillment-wrapper .shipping-details{margin-top:24px}@media screen and (min-width: 768px){.fulfillment-wrapper .shipping-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position"], outputs: ["remove"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FulfillOrderDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FulfillOrderDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-fulfill-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\r\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                    <th>{{ 'order.fulfill' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\r\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\r\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\r\n                        type=\"number\"\r\n                        [max]=\"fulfillmentQuantities[line.id].max\"\r\n                        min=\"0\"\r\n                    />\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"shipping-details\">\r\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\r\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\r\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\r\n        <vdr-configurable-input\r\n            [operationDefinition]=\"fulfillmentHandlerDef\"\r\n            [operation]=\"fulfillmentHandler\"\r\n            [formControl]=\"fulfillmentHandlerControl\"\r\n            [removable]=\"false\"\r\n        ></vdr-configurable-input>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        {{ 'order.create-fulfillment' | translate }}\r\n    </button>\r\n</ng-template>\r\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-right:18px}:host .draft-qty{max-width:48px}:host .order-line-custom-field{background-color:var(--color-component-bg-100)}:host .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}:host .net-price{font-size:11px;color:var(--color-text-300);line-height:14px}:host .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-right:2px}.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-left:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"] }]
+            args: [{ selector: 'vdr-fulfill-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\r\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                    <th>{{ 'order.fulfill' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\r\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\r\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\r\n                        type=\"number\"\r\n                        [max]=\"fulfillmentQuantities[line.id].max\"\r\n                        min=\"0\"\r\n                    />\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"shipping-details\">\r\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\r\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\r\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\r\n        <vdr-configurable-input\r\n            [operationDefinition]=\"fulfillmentHandlerDef\"\r\n            [operation]=\"fulfillmentHandler\"\r\n            [formControl]=\"fulfillmentHandlerControl\"\r\n            [removable]=\"false\"\r\n        ></vdr-configurable-input>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        {{ 'order.create-fulfillment' | translate }}\r\n    </button>\r\n</ng-template>\r\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{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}:host .thumb img{width:50px;height:50px}:host .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}.fulfillment-wrapper .shipping-details{margin-top:24px}@media screen and (min-width: 768px){.fulfillment-wrapper .shipping-details{margin-top:0;margin-inline-start:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i0.ChangeDetectorRef }]; } });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnVsZmlsbC1vcmRlci1kaWFsb2cuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9vcmRlci9zcmMvY29tcG9uZW50cy9mdWxmaWxsLW9yZGVyLWRpYWxvZy9mdWxmaWxsLW9yZGVyLWRpYWxvZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL29yZGVyL3NyYy9jb21wb25lbnRzL2Z1bGZpbGwtb3JkZXItZGlhbG9nL2Z1bGZpbGwtb3JkZXItZGlhbG9nLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBcUIsU0FBUyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQzlGLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3BELE9BQU8sRUFDSCxnQ0FBZ0MsRUFHaEMsaUNBQWlDLEVBSWpDLFVBQVUsRUFFViw0QkFBNEIsR0FDL0IsTUFBTSx3QkFBd0IsQ0FBQzs7Ozs7O0FBUWhDLE1BQU0sT0FBTywyQkFBMkI7SUFVcEMsWUFBb0IsV0FBd0IsRUFBVSxjQUFpQztRQUFuRSxnQkFBVyxHQUFYLFdBQVcsQ0FBYTtRQUFVLG1CQUFjLEdBQWQsY0FBYyxDQUFtQjtRQU52Riw4QkFBeUIsR0FBRyxJQUFJLGtCQUFrQixFQUFFLENBQUM7UUFDckQsMEJBQXFCLEdBQWdFLEVBQUUsQ0FBQztJQUtFLENBQUM7SUFFM0YsUUFBUTtRQUNKLElBQUksQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLGlCQUFpQixFQUFFLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDLEVBQUUsY0FBYyxFQUFFLEVBQUUsRUFBRTtZQUNuRixJQUFJLENBQUMscUJBQXFCLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLENBQUMsTUFBTSxFQUFFLElBQUksRUFBRSxFQUFFO2dCQUNsRSxNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsbUJBQW1CLENBQUMsSUFBSSxFQUFFLGNBQWMsQ0FBQyxjQUFjLENBQUMsQ0FBQztnQkFDbkYsT0FBTztvQkFDSCxHQUFHLE1BQU07b0JBQ1QsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxZQUFZLEVBQUUsR0FBRyxFQUFFLFlBQVksRUFBRTtpQkFDakQsQ0FBQztZQUNOLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztZQUNQLElBQUksQ0FBQyxjQUFjLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDdkMsQ0FBQyxDQUFDLENBQUM7UUFFSCxJQUFJLENBQUMsV0FBVyxDQUFDLGNBQWM7YUFDMUIsMkJBQTJCLEVBQUU7YUFDN0IsU0FBUyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLG1CQUFtQixDQUFDO2FBQzNDLFNBQVMsQ0FBQyxRQUFRLENBQUMsRUFBRTtZQUNsQixJQUFJLENBQUMscUJBQXFCO2dCQUN0QixRQUFRLENBQUMsSUFBSSxDQUNULENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksS0FBSyxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsRUFBRSxjQUFjLEVBQUUsc0JBQXNCLENBQ3RGLElBQUksUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQ3JCLElBQUksQ0FBQyxrQkFBa0IsR0FBRyxnQ0FBZ0MsQ0FBQyxJQUFJLENBQUMscUJBQXFCLENBQUMsQ0FBQztZQUN2RixJQUFJLENBQUMseUJBQXlCLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO1lBQ25FLElBQUksQ0FBQyxjQUFjLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDdkMsQ0FBQyxDQUFDLENBQUM7SUFDWCxDQUFDO0lBRUQsbUJBQW1CLENBQUMsSUFBMEMsRUFBRSxvQkFBNkI7UUFDekYsTUFBTSxFQUFFLGNBQWMsRUFBRSxXQUFXLEVBQUUsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDO1FBQzVELE1BQU0sc0JBQXNCLEdBQ3hCLGNBQWMsS0FBSyxVQUFVLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDLENBQUMsY0FBYyxLQUFLLFVBQVUsQ0FBQyxJQUFJLENBQUM7UUFFdEcsTUFBTSxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDeEQsT0FBTyxzQkFBc0IsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxnQkFBZ0IsRUFBRSxXQUFXLENBQUMsQ0FBQyxDQUFDLENBQUMsZ0JBQWdCLENBQUM7SUFDL0YsQ0FBQztJQUVELG1CQUFtQixDQUFDLElBQTBDO1FBQzFELE1BQU0sU0FBUyxHQUNYLElBQUksQ0FBQyxLQUFLLENBQUMsWUFBWTtZQUNuQixFQUFFLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxLQUFLLEtBQUssV0FBVyxDQUFDO2FBQ3JDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7YUFDakIsSUFBSSxFQUFFO2FBQ04sTUFBTSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxDQUFDLFdBQVcsS0FBSyxJQUFJLENBQUMsRUFBRSxDQUFDO2FBQzFDLE1BQU0sQ0FBQyxDQUFDLEdBQUcsRUFBRSxHQUFHLEVBQUUsRUFBRSxDQUFDLEdBQUcsR0FBRyxHQUFHLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUMxRCxPQUFPLElBQUksQ0FBQyxRQUFRLEdBQUcsU0FBUyxDQUFDO0lBQ3JDLENBQUM7SUFFRCxTQUFTO1FBQ0wsTUFBTSxVQUFVLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMscUJBQXFCLENBQUMsQ0FBQyxNQUFNLENBQy9ELENBQUMsS0FBSyxFQUFFLEVBQUUsWUFBWSxFQUFFLEVBQUUsRUFBRSxDQUFDLEtBQUssR0FBRyxZQUFZLEVBQ2pELENBQUMsQ0FDSixDQUFDO1FBQ0YsTUFBTSwwQkFBMEIsR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDLEtBQUssQ0FDOUUsQ0FBQyxFQUFFLFlBQVksRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLENBQUMsWUFBWSxJQUFJLEdBQUcsQ0FDakQsQ0FBQztRQUNGLE1BQU0sV0FBVyxHQUNiLGlDQUFpQyxDQUM3QixJQUFJLENBQUMscUJBQXFCLEVBQzFCLElBQUksQ0FBQyx5QkFBeUIsQ0FBQyxLQUFLLENBQ3ZDLElBQUksSUFBSSxDQUFDLHlCQUF5QixDQUFDLEtBQUssQ0FBQztRQUM5QyxPQUFPLFdBQVcsSUFBSSxDQUFDLEdBQUcsVUFBVSxJQUFJLDBCQUEwQixDQUFDO0lBQ3ZFLENBQUM7SUFFRCxNQUFNO1FBQ0YsTUFBTSxLQUFLLEdBQUcsTUFBTSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMscUJBQXFCLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLFdBQVcsRUFBRSxFQUFFLFlBQVksRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7WUFDL0YsV0FBVztZQUNYLFFBQVEsRUFBRSxZQUFZO1NBQ3pCLENBQUMsQ0FBQyxDQUFDO1FBQ0osSUFBSSxDQUFDLFdBQVcsQ0FBQztZQUNiLEtBQUs7WUFDTCxPQUFPLEVBQUUsNEJBQTRCLENBQ2pDLElBQUksQ0FBQyxrQkFBa0IsRUFDdkIsSUFBSSxDQUFDLHlCQUF5QixDQUFDLEtBQUssQ0FDdkM7U0FDSixDQUFDLENBQUM7SUFDUCxDQUFDO0lBRUQsTUFBTTtRQUNGLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUN2QixDQUFDOzhHQTFGUSwyQkFBMkI7a0dBQTNCLDJCQUEyQixnRUNyQnhDLHU3RkE0REE7OzJGRHZDYSwyQkFBMkI7a0JBTnZDLFNBQVM7K0JBQ0ksMEJBQTBCLG1CQUduQix1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENoYW5nZURldGVjdG9yUmVmLCBDb21wb25lbnQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBVbnR5cGVkRm9ybUNvbnRyb2wgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XHJcbmltcG9ydCB7XHJcbiAgICBjb25maWd1cmFibGVEZWZpbml0aW9uVG9JbnN0YW5jZSxcclxuICAgIENvbmZpZ3VyYWJsZU9wZXJhdGlvbixcclxuICAgIENvbmZpZ3VyYWJsZU9wZXJhdGlvbkRlZmluaXRpb24sXHJcbiAgICBjb25maWd1cmFibGVPcGVyYXRpb25WYWx1ZUlzVmFsaWQsXHJcbiAgICBEYXRhU2VydmljZSxcclxuICAgIERpYWxvZyxcclxuICAgIEZ1bGZpbGxPcmRlcklucHV0LFxyXG4gICAgR2xvYmFsRmxhZyxcclxuICAgIE9yZGVyRGV0YWlsRnJhZ21lbnQsXHJcbiAgICB0b0NvbmZpZ3VyYWJsZU9wZXJhdGlvbklucHV0LFxyXG59IGZyb20gJ0B2ZW5kdXJlL2FkbWluLXVpL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ3Zkci1mdWxmaWxsLW9yZGVyLWRpYWxvZycsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vZnVsZmlsbC1vcmRlci1kaWFsb2cuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vZnVsZmlsbC1vcmRlci1kaWFsb2cuY29tcG9uZW50LnNjc3MnXSxcclxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgRnVsZmlsbE9yZGVyRGlhbG9nQ29tcG9uZW50IGltcGxlbWVudHMgRGlhbG9nPEZ1bGZpbGxPcmRlcklucHV0PiwgT25Jbml0IHtcclxuICAgIHJlc29sdmVXaXRoOiAocmVzdWx0PzogRnVsZmlsbE9yZGVySW5wdXQpID0+IHZvaWQ7XHJcbiAgICBmdWxmaWxsbWVudEhhbmRsZXJEZWY6IENvbmZpZ3VyYWJsZU9wZXJhdGlvbkRlZmluaXRpb247XHJcbiAgICBmdWxmaWxsbWVudEhhbmRsZXI6IENvbmZpZ3VyYWJsZU9wZXJhdGlvbjtcclxuICAgIGZ1bGZpbGxtZW50SGFuZGxlckNvbnRyb2wgPSBuZXcgVW50eXBlZEZvcm1Db250cm9sKCk7XHJcbiAgICBmdWxmaWxsbWVudFF1YW50aXRpZXM6IHsgW2xpbmVJZDogc3RyaW5nXTogeyBmdWxmaWxsQ291bnQ6IG51bWJlcjsgbWF4OiBudW1iZXIgfSB9ID0ge307XHJcblxyXG4gICAgLy8gUHJvdmlkZWQgYnkgbW9kYWxTZXJ2aWNlLmZyb21Db21wb25lbnQoKSBjYWxsXHJcbiAgICBvcmRlcjogT3JkZXJEZXRhaWxGcmFnbWVudDtcclxuXHJcbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIGRhdGFTZXJ2aWNlOiBEYXRhU2VydmljZSwgcHJpdmF0ZSBjaGFuZ2VEZXRlY3RvcjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHt9XHJcblxyXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICAgICAgdGhpcy5kYXRhU2VydmljZS5zZXR0aW5ncy5nZXRHbG9iYWxTZXR0aW5ncygpLnNpbmdsZSQuc3Vic2NyaWJlKCh7IGdsb2JhbFNldHRpbmdzIH0pID0+IHtcclxuICAgICAgICAgICAgdGhpcy5mdWxmaWxsbWVudFF1YW50aXRpZXMgPSB0aGlzLm9yZGVyLmxpbmVzLnJlZHVjZSgocmVzdWx0LCBsaW5lKSA9PiB7XHJcbiAgICAgICAgICAgICAgICBjb25zdCBmdWxmaWxsQ291bnQgPSB0aGlzLmdldEZ1bGZpbGxhYmxlQ291bnQobGluZSwgZ2xvYmFsU2V0dGluZ3MudHJhY2tJbnZlbnRvcnkpO1xyXG4gICAgICAgICAgICAgICAgcmV0dXJuIHtcclxuICAgICAgICAgICAgICAgICAgICAuLi5yZXN1bHQsXHJcbiAgICAgICAgICAgICAgICAgICAgW2xpbmUuaWRdOiB7IGZ1bGZpbGxDb3VudCwgbWF4OiBmdWxmaWxsQ291bnQgfSxcclxuICAgICAgICAgICAgICAgIH07XHJcbiAgICAgICAgICAgIH0sIHt9KTtcclxuICAgICAgICAgICAgdGhpcy5jaGFuZ2VEZXRlY3Rvci5tYXJrRm9yQ2hlY2soKTtcclxuICAgICAgICB9KTtcclxuXHJcbiAgICAgICAgdGhpcy5kYXRhU2VydmljZS5zaGlwcGluZ01ldGhvZFxyXG4gICAgICAgICAgICAuZ2V0U2hpcHBpbmdNZXRob2RPcGVyYXRpb25zKClcclxuICAgICAgICAgICAgLm1hcFNpbmdsZShkYXRhID0+IGRhdGEuZnVsZmlsbG1lbnRIYW5kbGVycylcclxuICAgICAgICAgICAgLnN1YnNjcmliZShoYW5kbGVycyA9PiB7XHJcbiAgICAgICAgICAgICAgICB0aGlzLmZ1bGZpbGxtZW50SGFuZGxlckRlZiA9XHJcbiAgICAgICAgICAgICAgICAgICAgaGFuZGxlcnMuZmluZChcclxuICAgICAgICAgICAgICAgICAgICAgICAgaCA9PiBoLmNvZGUgPT09IHRoaXMub3JkZXIuc2hpcHBpbmdMaW5lc1swXT8uc2hpcHBpbmdNZXRob2Q/LmZ1bGZpbGxtZW50SGFuZGxlckNvZGUsXHJcbiAgICAgICAgICAgICAgICAgICAgKSB8fCBoYW5kbGVyc1swXTtcclxuICAgICAgICAgICAgICAgIHRoaXMuZnVsZmlsbG1lbnRIYW5kbGVyID0gY29uZmlndXJhYmxlRGVmaW5pdGlvblRvSW5zdGFuY2UodGhpcy5mdWxmaWxsbWVudEhhbmRsZXJEZWYpO1xyXG4gICAgICAgICAgICAgICAgdGhpcy5mdWxmaWxsbWVudEhhbmRsZXJDb250cm9sLnBhdGNoVmFsdWUodGhpcy5mdWxmaWxsbWVudEhhbmRsZXIpO1xyXG4gICAgICAgICAgICAgICAgdGhpcy5jaGFuZ2VEZXRlY3Rvci5tYXJrRm9yQ2hlY2soKTtcclxuICAgICAgICAgICAgfSk7XHJcbiAgICB9XHJcblxyXG4gICAgZ2V0RnVsZmlsbGFibGVDb3VudChsaW5lOiBPcmRlckRldGFpbEZyYWdtZW50WydsaW5lcyddW251bWJlcl0sIGdsb2JhbFRyYWNrSW52ZW50b3J5OiBib29sZWFuKTogbnVtYmVyIHtcclxuICAgICAgICBjb25zdCB7IHRyYWNrSW52ZW50b3J5LCBzdG9ja09uSGFuZCB9ID0gbGluZS5wcm9kdWN0VmFyaWFudDtcclxuICAgICAgICBjb25zdCBlZmZlY3RpdmVUcmFjSW52ZW50b3J5ID1cclxuICAgICAgICAgICAgdHJhY2tJbnZlbnRvcnkgPT09IEdsb2JhbEZsYWcuSU5IRVJJVCA/IGdsb2JhbFRyYWNrSW52ZW50b3J5IDogdHJhY2tJbnZlbnRvcnkgPT09IEdsb2JhbEZsYWcuVFJVRTtcclxuXHJcbiAgICAgICAgY29uc3QgdW5mdWxmaWxsZWRDb3VudCA9IHRoaXMuZ2V0VW5mdWxmaWxsZWRDb3VudChsaW5lKTtcclxuICAgICAgICByZXR1cm4gZWZmZWN0aXZlVHJhY0ludmVudG9yeSA/IE1hdGgubWluKHVuZnVsZmlsbGVkQ291bnQsIHN0b2NrT25IYW5kKSA6IHVuZnVsZmlsbGVkQ291bnQ7XHJcbiAgICB9XHJcblxyXG4gICAgZ2V0VW5mdWxmaWxsZWRDb3VudChsaW5lOiBPcmRlckRldGFpbEZyYWdtZW50WydsaW5lcyddW251bWJlcl0pOiBudW1iZXIge1xyXG4gICAgICAgIGNvbnN0IGZ1bGZpbGxlZCA9XHJcbiAgICAgICAgICAgIHRoaXMub3JkZXIuZnVsZmlsbG1lbnRzXHJcbiAgICAgICAgICAgICAgICA/LmZpbHRlcihmID0+IGYuc3RhdGUgIT09ICdDYW5jZWxsZWQnKVxyXG4gICAgICAgICAgICAgICAgLm1hcChmID0+IGYubGluZXMpXHJcbiAgICAgICAgICAgICAgICAuZmxhdCgpXHJcbiAgICAgICAgICAgICAgICAuZmlsdGVyKHJvdyA9PiByb3cub3JkZXJMaW5lSWQgPT09IGxpbmUuaWQpXHJcbiAgICAgICAgICAgICAgICAucmVkdWNlKChzdW0sIHJvdykgPT4gc3VtICsgcm93LnF1YW50aXR5LCAwKSA/PyAwO1xyXG4gICAgICAgIHJldHVybiBsaW5lLnF1YW50aXR5IC0gZnVsZmlsbGVkO1xyXG4gICAgfVxyXG5cclxuICAgIGNhblN1Ym1pdCgpOiBib29sZWFuIHtcclxuICAgICAgICBjb25zdCB0b3RhbENvdW50ID0gT2JqZWN0LnZhbHVlcyh0aGlzLmZ1bGZpbGxtZW50UXVhbnRpdGllcykucmVkdWNlKFxyXG4gICAgICAgICAgICAodG90YWwsIHsgZnVsZmlsbENvdW50IH0pID0+IHRvdGFsICsgZnVsZmlsbENvdW50LFxyXG4gICAgICAgICAgICAwLFxyXG4gICAgICAgICk7XHJcbiAgICAgICAgY29uc3QgZnVsZmlsbG1lbnRRdWFudGl0eUlzVmFsaWQgPSBPYmplY3QudmFsdWVzKHRoaXMuZnVsZmlsbG1lbnRRdWFudGl0aWVzKS5ldmVyeShcclxuICAgICAgICAgICAgKHsgZnVsZmlsbENvdW50LCBtYXggfSkgPT4gZnVsZmlsbENvdW50IDw9IG1heCxcclxuICAgICAgICApO1xyXG4gICAgICAgIGNvbnN0IGZvcm1Jc1ZhbGlkID1cclxuICAgICAgICAgICAgY29uZmlndXJhYmxlT3BlcmF0aW9uVmFsdWVJc1ZhbGlkKFxyXG4gICAgICAgICAgICAgICAgdGhpcy5mdWxmaWxsbWVudEhhbmRsZXJEZWYsXHJcbiAgICAgICAgICAgICAgICB0aGlzLmZ1bGZpbGxtZW50SGFuZGxlckNvbnRyb2wudmFsdWUsXHJcbiAgICAgICAgICAgICkgJiYgdGhpcy5mdWxmaWxsbWVudEhhbmRsZXJDb250cm9sLnZhbGlkO1xyXG4gICAgICAgIHJldHVybiBmb3JtSXNWYWxpZCAmJiAwIDwgdG90YWxDb3VudCAmJiBmdWxmaWxsbWVudFF1YW50aXR5SXNWYWxpZDtcclxuICAgIH1cclxuXHJcbiAgICBzZWxlY3QoKSB7XHJcbiAgICAgICAgY29uc3QgbGluZXMgPSBPYmplY3QuZW50cmllcyh0aGlzLmZ1bGZpbGxtZW50UXVhbnRpdGllcykubWFwKChbb3JkZXJMaW5lSWQsIHsgZnVsZmlsbENvdW50IH1dKSA9PiAoe1xyXG4gICAgICAgICAgICBvcmRlckxpbmVJZCxcclxuICAgICAgICAgICAgcXVhbnRpdHk6IGZ1bGZpbGxDb3VudCxcclxuICAgICAgICB9KSk7XHJcbiAgICAgICAgdGhpcy5yZXNvbHZlV2l0aCh7XHJcbiAgICAgICAgICAgIGxpbmVzLFxyXG4gICAgICAgICAgICBoYW5kbGVyOiB0b0NvbmZpZ3VyYWJsZU9wZXJhdGlvbklucHV0KFxyXG4gICAgICAgICAgICAgICAgdGhpcy5mdWxmaWxsbWVudEhhbmRsZXIsXHJcbiAgICAgICAgICAgICAgICB0aGlzLmZ1bGZpbGxtZW50SGFuZGxlckNvbnRyb2wudmFsdWUsXHJcbiAgICAgICAgICAgICksXHJcbiAgICAgICAgfSk7XHJcbiAgICB9XHJcblxyXG4gICAgY2FuY2VsKCkge1xyXG4gICAgICAgIHRoaXMucmVzb2x2ZVdpdGgoKTtcclxuICAgIH1cclxufVxyXG4iLCI8bmctdGVtcGxhdGUgdmRyRGlhbG9nVGl0bGU+e3sgJ29yZGVyLmZ1bGZpbGwtb3JkZXInIHwgdHJhbnNsYXRlIH19PC9uZy10ZW1wbGF0ZT5cclxuXHJcbjxkaXYgY2xhc3M9XCJmdWxmaWxsbWVudC13cmFwcGVyXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwib3JkZXItdGFibGVcIj5cclxuICAgICAgICA8dGFibGUgY2xhc3M9XCJ0YWJsZVwiPlxyXG4gICAgICAgICAgICA8dGhlYWQ+XHJcbiAgICAgICAgICAgICAgICA8dHI+XHJcbiAgICAgICAgICAgICAgICAgICAgPHRoPjwvdGg+XHJcbiAgICAgICAgICAgICAgICAgICAgPHRoPnt7ICdvcmRlci5wcm9kdWN0LW5hbWUnIHwgdHJhbnNsYXRlIH19PC90aD5cclxuICAgICAgICAgICAgICAgICAgICA8dGg+e3sgJ29yZGVyLnByb2R1Y3Qtc2t1JyB8IHRyYW5zbGF0ZSB9fTwvdGg+XHJcbiAgICAgICAgICAgICAgICAgICAgPHRoPnt7ICdvcmRlci51bmZ1bGZpbGxlZCcgfCB0cmFuc2xhdGUgfX08L3RoPlxyXG4gICAgICAgICAgICAgICAgICAgIDx0aD57eyAnY2F0YWxvZy5zdG9jay1vbi1oYW5kJyB8IHRyYW5zbGF0ZSB9fTwvdGg+XHJcbiAgICAgICAgICAgICAgICAgICAgPHRoPnt7ICdvcmRlci5mdWxmaWxsJyB8IHRyYW5zbGF0ZSB9fTwvdGg+XHJcbiAgICAgICAgICAgICAgICA8L3RyPlxyXG4gICAgICAgICAgICA8L3RoZWFkPlxyXG4gICAgICAgICAgICA8dHJcclxuICAgICAgICAgICAgICAgICpuZ0Zvcj1cImxldCBsaW5lIG9mIG9yZGVyLmxpbmVzXCJcclxuICAgICAgICAgICAgICAgIGNsYXNzPVwib3JkZXItbGluZVwiXHJcbiAgICAgICAgICAgICAgICBbY2xhc3MuaWdub3JlXT1cImdldFVuZnVsZmlsbGVkQ291bnQobGluZSkgPT09IDBcIlxyXG4gICAgICAgICAgICA+XHJcbiAgICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJhbGlnbi1taWRkbGUgdGh1bWJcIj5cclxuICAgICAgICAgICAgICAgICAgICA8aW1nICpuZ0lmPVwibGluZS5mZWF0dXJlZEFzc2V0XCIgW3NyY109XCJsaW5lLmZlYXR1cmVkQXNzZXQgfCBhc3NldFByZXZpZXc6ICd0aW55J1wiIC8+XHJcbiAgICAgICAgICAgICAgICA8L3RkPlxyXG4gICAgICAgICAgICAgICAgPHRkIGNsYXNzPVwiYWxpZ24tbWlkZGxlIG5hbWVcIj57eyBsaW5lLnByb2R1Y3RWYXJpYW50Lm5hbWUgfX08L3RkPlxyXG4gICAgICAgICAgICAgICAgPHRkIGNsYXNzPVwiYWxpZ24tbWlkZGxlIHNrdVwiPnt7IGxpbmUucHJvZHVjdFZhcmlhbnQuc2t1IH19PC90ZD5cclxuICAgICAgICAgICAgICAgIDx0ZCBjbGFzcz1cImFsaWduLW1pZGRsZSBxdWFudGl0eVwiPnt7IGdldFVuZnVsZmlsbGVkQ291bnQobGluZSkgfX08L3RkPlxyXG4gICAgICAgICAgICAgICAgPHRkIGNsYXNzPVwiYWxpZ24tbWlkZGxlIHF1YW50aXR5XCI+e3sgbGluZS5wcm9kdWN0VmFyaWFudC5zdG9ja09uSGFuZCB9fTwvdGQ+XHJcbiAgICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJhbGlnbi1taWRkbGUgZnVsZmlsXCI+XHJcbiAgICAgICAgICAgICAgICAgICAgPGlucHV0XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICpuZ0lmPVwiZnVsZmlsbG1lbnRRdWFudGl0aWVzW2xpbmUuaWRdXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgW2Rpc2FibGVkXT1cImdldFVuZnVsZmlsbGVkQ291bnQobGluZSkgPT09IDBcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICBbKG5nTW9kZWwpXT1cImZ1bGZpbGxtZW50UXVhbnRpdGllc1tsaW5lLmlkXS5mdWxmaWxsQ291bnRcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICB0eXBlPVwibnVtYmVyXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgW21heF09XCJmdWxmaWxsbWVudFF1YW50aXRpZXNbbGluZS5pZF0ubWF4XCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgbWluPVwiMFwiXHJcbiAgICAgICAgICAgICAgICAgICAgLz5cclxuICAgICAgICAgICAgICAgIDwvdGQ+XHJcbiAgICAgICAgICAgIDwvdHI+XHJcbiAgICAgICAgPC90YWJsZT5cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiBjbGFzcz1cInNoaXBwaW5nLWRldGFpbHNcIj5cclxuICAgICAgICA8dmRyLWZvcm1hdHRlZC1hZGRyZXNzIFthZGRyZXNzXT1cIm9yZGVyLnNoaXBwaW5nQWRkcmVzc1wiPjwvdmRyLWZvcm1hdHRlZC1hZGRyZXNzPlxyXG4gICAgICAgIDxoNj57eyAnb3JkZXIuc2hpcHBpbmctbWV0aG9kJyB8IHRyYW5zbGF0ZSB9fTwvaDY+XHJcbiAgICAgICAge3sgb3JkZXIuc2hpcHBpbmdMaW5lc1swXT8uc2hpcHBpbmdNZXRob2Q/Lm5hbWUgfX1cclxuICAgICAgICA8c3Ryb25nPnt7IG9yZGVyLnNoaXBwaW5nIHwgbG9jYWxlQ3VycmVuY3k6IG9yZGVyLmN1cnJlbmN5Q29kZSB9fTwvc3Ryb25nPlxyXG4gICAgICAgIDx2ZHItY29uZmlndXJhYmxlLWlucHV0XHJcbiAgICAgICAgICAgIFtvcGVyYXRpb25EZWZpbml0aW9uXT1cImZ1bGZpbGxtZW50SGFuZGxlckRlZlwiXHJcbiAgICAgICAgICAgIFtvcGVyYXRpb25dPVwiZnVsZmlsbG1lbnRIYW5kbGVyXCJcclxuICAgICAgICAgICAgW2Zvcm1Db250cm9sXT1cImZ1bGZpbGxtZW50SGFuZGxlckNvbnRyb2xcIlxyXG4gICAgICAgICAgICBbcmVtb3ZhYmxlXT1cImZhbHNlXCJcclxuICAgICAgICA+PC92ZHItY29uZmlndXJhYmxlLWlucHV0PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PlxyXG5cclxuPG5nLXRlbXBsYXRlIHZkckRpYWxvZ0J1dHRvbnM+XHJcbiAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiBjbGFzcz1cImJ0blwiIChjbGljayk9XCJjYW5jZWwoKVwiPnt7ICdjb21tb24uY2FuY2VsJyB8IHRyYW5zbGF0ZSB9fTwvYnV0dG9uPlxyXG4gICAgPGJ1dHRvbiB0eXBlPVwic3VibWl0XCIgKGNsaWNrKT1cInNlbGVjdCgpXCIgW2Rpc2FibGVkXT1cIiFjYW5TdWJtaXQoKVwiIGNsYXNzPVwiYnRuIGJ0bi1wcmltYXJ5XCI+XHJcbiAgICAgICAge3sgJ29yZGVyLmNyZWF0ZS1mdWxmaWxsbWVudCcgfCB0cmFuc2xhdGUgfX1cclxuICAgIDwvYnV0dG9uPlxyXG48L25nLXRlbXBsYXRlPlxyXG4iXX0=

package/esm2022/order/components/fulfillment-card/fulfillment-card.component.mjs

@@ -32,10 +32,10 @@ export class FulfillmentCardComponent {
         const suggested = this.nextSuggestedState();
         return this.fulfillment.nextStates.filter(s => s !== suggested);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FulfillmentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: FulfillmentCardComponent, selector: "vdr-fulfillment-card", inputs: { fulfillment: "fulfillment", order: "order" }, outputs: { transitionState: "transitionState" }, ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-header fulfillment-header\">\r\n        <div>{{ 'order.fulfillment' | translate }}</div>\r\n        <div class=\"fulfillment-state\">\r\n            <vdr-fulfillment-state-label [state]=\"fulfillment?.state\"></vdr-fulfillment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-fulfillment-detail\r\n            *ngIf=\"!!fulfillment\"\r\n            [fulfillmentId]=\"fulfillment?.id\"\r\n            [order]=\"order\"\r\n        ></vdr-fulfillment-detail>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"fulfillment?.nextStates.length\">\r\n        <ng-container *ngIf=\"nextSuggestedState() as suggestedState\">\r\n            <button class=\"btn btn-sm btn-primary\" (click)=\"transitionState.emit(suggestedState)\">\r\n                {{ 'order.set-fulfillment-state' | translate: { state: (suggestedState | stateI18nToken | translate) } }}\r\n            </button>\r\n        </ng-container>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionState.emit(nextState)\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{ 'order.transition-to-state' | translate: { state: (nextState | stateI18nToken | translate) } }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-fulfillment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n", styles: [".fulfillment-header{display:flex;justify-content:space-between;align-items:center}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i3.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i3.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i3.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i4.FulfillmentDetailComponent, selector: "vdr-fulfillment-detail", inputs: ["fulfillmentId", "order"] }, { kind: "component", type: i5.FulfillmentStateLabelComponent, selector: "vdr-fulfillment-state-label", inputs: ["state"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i3.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FulfillmentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: FulfillmentCardComponent, selector: "vdr-fulfillment-card", inputs: { fulfillment: "fulfillment", order: "order" }, outputs: { transitionState: "transitionState" }, ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-header fulfillment-header\">\r\n        <div>{{ 'order.fulfillment' | translate }}</div>\r\n        <div class=\"fulfillment-state\">\r\n            <vdr-fulfillment-state-label [state]=\"fulfillment?.state\"></vdr-fulfillment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-fulfillment-detail\r\n            *ngIf=\"!!fulfillment\"\r\n            [fulfillmentId]=\"fulfillment?.id\"\r\n            [order]=\"order\"\r\n        ></vdr-fulfillment-detail>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"fulfillment?.nextStates.length\">\r\n        <ng-container *ngIf=\"nextSuggestedState() as suggestedState\">\r\n            <button class=\"btn btn-sm btn-primary\" (click)=\"transitionState.emit(suggestedState)\">\r\n                {{ 'order.set-fulfillment-state' | translate: { state: (suggestedState | stateI18nToken | translate) } }}\r\n            </button>\r\n        </ng-container>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionState.emit(nextState)\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{ 'order.transition-to-state' | translate: { state: (nextState | stateI18nToken | translate) } }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-fulfillment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n", styles: [".fulfillment-header{display:flex;justify-content:space-between;align-items:center}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i3.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i3.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i3.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i4.FulfillmentDetailComponent, selector: "vdr-fulfillment-detail", inputs: ["fulfillmentId", "order"] }, { kind: "component", type: i5.FulfillmentStateLabelComponent, selector: "vdr-fulfillment-state-label", inputs: ["state"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i3.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FulfillmentCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FulfillmentCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-fulfillment-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card\">\r\n    <div class=\"card-header fulfillment-header\">\r\n        <div>{{ 'order.fulfillment' | translate }}</div>\r\n        <div class=\"fulfillment-state\">\r\n            <vdr-fulfillment-state-label [state]=\"fulfillment?.state\"></vdr-fulfillment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-fulfillment-detail\r\n            *ngIf=\"!!fulfillment\"\r\n            [fulfillmentId]=\"fulfillment?.id\"\r\n            [order]=\"order\"\r\n        ></vdr-fulfillment-detail>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"fulfillment?.nextStates.length\">\r\n        <ng-container *ngIf=\"nextSuggestedState() as suggestedState\">\r\n            <button class=\"btn btn-sm btn-primary\" (click)=\"transitionState.emit(suggestedState)\">\r\n                {{ 'order.set-fulfillment-state' | translate: { state: (suggestedState | stateI18nToken | translate) } }}\r\n            </button>\r\n        </ng-container>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionState.emit(nextState)\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{ 'order.transition-to-state' | translate: { state: (nextState | stateI18nToken | translate) } }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-fulfillment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n", styles: [".fulfillment-header{display:flex;justify-content:space-between;align-items:center}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"] }]
         }], propDecorators: { fulfillment: [{

package/esm2022/order/components/fulfillment-detail/fulfillment-detail.component.mjs

@@ -36,10 +36,10 @@ export class FulfillmentDetailComponent {
     customFieldIsObject(customField) {
         return Array.isArray(customField) || isObject(customField);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FulfillmentDetailComponent, deps: [{ token: i1.ServerConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: FulfillmentDetailComponent, selector: "vdr-fulfillment-detail", inputs: { fulfillmentId: "fulfillmentId", order: "order" }, usesOnChanges: true, ngImport: i0, template: "<vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n    {{ fulfillment?.createdAt | localeDate: 'medium' }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.fulfillment-method' | translate\">\r\n    {{ fulfillment?.method }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"fulfillment?.trackingCode\" [label]=\"'order.tracking-code' | translate\">\r\n    {{ fulfillment?.trackingCode }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n    <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<ng-container *ngFor=\"let customField of customFieldConfig\">\r\n    <vdr-custom-field-control\r\n        *ngIf=\"customFieldFormGroup.get(customField.name)\"\r\n        [readonly]=\"true\"\r\n        [compact]=\"true\"\r\n        [customField]=\"customField\"\r\n        [customFieldsFormGroup]=\"customFieldFormGroup\"\r\n    ></vdr-custom-field-control>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i3.SimpleItemListComponent, selector: "vdr-simple-item-list", inputs: ["items"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FulfillmentDetailComponent, deps: [{ token: i1.ServerConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: FulfillmentDetailComponent, selector: "vdr-fulfillment-detail", inputs: { fulfillmentId: "fulfillmentId", order: "order" }, usesOnChanges: true, ngImport: i0, template: "<vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n    {{ fulfillment?.createdAt | localeDate: 'medium' }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.fulfillment-method' | translate\">\r\n    {{ fulfillment?.method }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"fulfillment?.trackingCode\" [label]=\"'order.tracking-code' | translate\">\r\n    {{ fulfillment?.trackingCode }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n    <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<ng-container *ngFor=\"let customField of customFieldConfig\">\r\n    <vdr-custom-field-control\r\n        *ngIf=\"customFieldFormGroup.get(customField.name)\"\r\n        [readonly]=\"true\"\r\n        [compact]=\"true\"\r\n        [customField]=\"customField\"\r\n        [customFieldsFormGroup]=\"customFieldFormGroup\"\r\n    ></vdr-custom-field-control>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "component", type: i1.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i3.SimpleItemListComponent, selector: "vdr-simple-item-list", inputs: ["items"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FulfillmentDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FulfillmentDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-fulfillment-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n    {{ fulfillment?.createdAt | localeDate: 'medium' }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.fulfillment-method' | translate\">\r\n    {{ fulfillment?.method }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"fulfillment?.trackingCode\" [label]=\"'order.tracking-code' | translate\">\r\n    {{ fulfillment?.trackingCode }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n    <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<ng-container *ngFor=\"let customField of customFieldConfig\">\r\n    <vdr-custom-field-control\r\n        *ngIf=\"customFieldFormGroup.get(customField.name)\"\r\n        [readonly]=\"true\"\r\n        [compact]=\"true\"\r\n        [customField]=\"customField\"\r\n        [customFieldsFormGroup]=\"customFieldFormGroup\"\r\n    ></vdr-custom-field-control>\r\n</ng-container>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1.ServerConfigService }]; }, propDecorators: { fulfillmentId: [{