mobicloud-core 1.0.135 → 1.0.136

package/bundles/mobicloud-core-components.umd.js

@@ -4181,6 +4181,7 @@
             this.selectedShipmentProducts = [];
             this.servicePointRequired = false;
             this.servicePoints = [];
+            this.internationalShipping = false;
             this.returnLabelsEnabled = false;
             this.skipLinesTab = false;
             this.skipSenderTab = false;
@@ -4379,6 +4380,7 @@
                     }
                     else {
                         _this.updateReceiverFields();
+                        _this.checkForInternationalShiiping();
                         _this.skipSteps();
                     }
                 }, function (error) {
@@ -4404,6 +4406,7 @@
                                 var receiverTabValid = (this.formInstanceShipment.Receiver_Attention != undefined && this.formInstanceShipment.Receiver_Telephone != undefined && this.formInstanceShipment.Receiver_Address1 != undefined && this.formInstanceShipment.Receiver_Zipcode != undefined && this.formInstanceShipment.Receiver_City != undefined && this.formInstanceShipment.Receiver_CountryCode != undefined && this.formInstanceShipment.Receiver_Email != undefined && this.formInstanceShipment.Receiver_Mobile != undefined);
                                 if (receiverTabValid) {
                                     this._receiverCountryId = this.formInstanceShipment.Receiver_CountryCode;
+                                    this.checkForInternationalShiiping();
                                     this.stepper.next();
                                 }
                             }
@@ -4551,9 +4554,22 @@
         PickinglistAddNewShipment.prototype.onClick_Receiver = function () {
             var validateResult = validationEngine__default['default'].validateGroup("formReceiver");
             if (validateResult === null || validateResult === void 0 ? void 0 : validateResult.isValid) {
+                this.checkForInternationalShiiping();
                 this.stepper.next();
             }
         };
+        PickinglistAddNewShipment.prototype.checkForInternationalShiiping = function () {
+            var _a;
+            this.internationalShipping = false;
+            if (this.formInstanceShipment.Receiver_CountryCode) {
+                if ((_a = this.cloudDataService.coreService.countries) === null || _a === void 0 ? void 0 : _a.has(this.formInstanceShipment.Receiver_CountryCode.toUpperCase())) {
+                    var country = this.cloudDataService.coreService.countries.get(this.formInstanceShipment.Receiver_CountryCode.toUpperCase());
+                    if (country && country.TradeArea != "EU") {
+                        this.internationalShipping = true;
+                    }
+                }
+            }
+        };
         PickinglistAddNewShipment.prototype.calculateProductAndBoxesQty = function () {
             var _this = this;
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -4626,7 +4642,12 @@
             this.selectedBoxesList.instance.saveEditData();
             this.boxesSelectionValid = this.selectedBoxes.length > 0;
             if (this.boxesSelectionValid) {
-                this.productBoxesQuantityValid = this.validateProductBoxesQuantity();
+                if (this.internationalShipping) {
+                    this.productBoxesQuantityValid = this.validateProductBoxesQuantity();
+                }
+                else {
+                    this.productBoxesQuantityValid = true;
+                }
                 if (this.productBoxesQuantityValid) {
                     if (this.shipmentProviderType == api.ShipmentProviderType.Webshipper) {
                         this.onClick_Packages_Webshipper();
@@ -4702,6 +4723,7 @@
                 return __generator(this, function (_1) {
                     packageBoxEntry = Object.assign(new PackagingBoxEntry(), e.data);
                     packageBoxEntry.Id = new Guid__default['default']().toString();
+                    packageBoxEntry.Quantity = 1;
                     if (this.packagingBoxInitEntity) {
                         packageBoxEntry.Length_InCm = this.packagingBoxInitEntity.Length_InCm;
                         packageBoxEntry.Width_InCm = this.packagingBoxInitEntity.Width_InCm;
@@ -4717,38 +4739,40 @@
                     }
                     this.packagingBoxInitEntity = undefined;
                     e.data = packageBoxEntry;
-                    pickingLineIds = [];
-                    if (this.allowSelectPickingLines) {
-                        pickingLineIds = this.selectedPickingLinesKeys;
-                    }
-                    else if (this.pickingLines) {
-                        for (i = 0; i < this.pickingLines.length; i++) {
-                            pickLineId = this.pickingLines[i].Id;
-                            if (pickLineId) {
-                                pickingLineIds.push(pickLineId);
+                    if (this.internationalShipping) {
+                        pickingLineIds = [];
+                        if (this.allowSelectPickingLines) {
+                            pickingLineIds = this.selectedPickingLinesKeys;
+                        }
+                        else if (this.pickingLines) {
+                            for (i = 0; i < this.pickingLines.length; i++) {
+                                pickLineId = this.pickingLines[i].Id;
+                                if (pickLineId) {
+                                    pickingLineIds.push(pickLineId);
+                                }
                             }
                         }
-                    }
-                    pickingLinesSum = this.calculateProductAndBoxesQty();
-                    packageBoxEntry.Lines = [];
-                    if (pickingLineIds.length > 0) {
-                        _loop_1 = function (i) {
-                            pickingLine = (_a = this_1.pickingLines) === null || _a === void 0 ? void 0 : _a.filter(function (p) { return p.Id == pickingLineIds[i]; })[0];
-                            if (pickingLine && pickingLine.ProductId && pickingLine.Product) {
-                                productSum = pickingLinesSum[pickingLine.ProductId];
-                                if (productSum && (productSum.pickqty < productSum.qty)) {
-                                    packageBoxEntryLine = Object.assign(new PackagingBoxEntryLine(), {});
-                                    packageBoxEntryLine.PickingLine = pickingLine;
-                                    packageBoxEntryLine.ParcelLine = Object.assign(new Shipping_ParcelLine(), {});
-                                    packageBoxEntryLine.ParcelLine.PickingListLinesId = pickingLine.Id;
-                                    packageBoxEntryLine.ParcelLine.Quantity = (productSum.qty - productSum.pickqty);
-                                    packageBoxEntry.Lines.push(packageBoxEntryLine);
+                        pickingLinesSum = this.calculateProductAndBoxesQty();
+                        packageBoxEntry.Lines = [];
+                        if (pickingLineIds.length > 0) {
+                            _loop_1 = function (i) {
+                                pickingLine = (_a = this_1.pickingLines) === null || _a === void 0 ? void 0 : _a.filter(function (p) { return p.Id == pickingLineIds[i]; })[0];
+                                if (pickingLine && pickingLine.ProductId && pickingLine.Product) {
+                                    productSum = pickingLinesSum[pickingLine.ProductId];
+                                    if (productSum && (productSum.pickqty < productSum.qty)) {
+                                        packageBoxEntryLine = Object.assign(new PackagingBoxEntryLine(), {});
+                                        packageBoxEntryLine.PickingLine = pickingLine;
+                                        packageBoxEntryLine.ParcelLine = Object.assign(new Shipping_ParcelLine(), {});
+                                        packageBoxEntryLine.ParcelLine.PickingListLinesId = pickingLine.Id;
+                                        packageBoxEntryLine.ParcelLine.Quantity = (productSum.qty - productSum.pickqty);
+                                        packageBoxEntry.Lines.push(packageBoxEntryLine);
+                                    }
                                 }
+                            };
+                            this_1 = this;
+                            for (i = 0; i < pickingLineIds.length; i++) {
+                                _loop_1(i);
                             }
-                        };
-                        this_1 = this;
-                        for (i = 0; i < pickingLineIds.length; i++) {
-                            _loop_1(i);
                         }
                     }
                     return [2 /*return*/];
@@ -4975,7 +4999,7 @@
         };
         PickinglistAddNewShipment.prototype.createShipment = function () {
             var _this = this;
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g;
             var request = Object.assign(new CreateShipmentRequest(), {});
             request.PickingListId = this.pickingList.Id;
             request.Sender = Object.assign(new Shipment_Sender(), {});
@@ -5018,31 +5042,59 @@
                 request.Sender.mobile_phone = this.formInstanceShipment.Receiver_Mobile;
             }
             if (this.selectedBoxes) {
+                var selectedPickingLines = [];
+                if (this.pickingLines) {
+                    if (this.allowSelectPickingLines) {
+                        selectedPickingLines = (_a = this.pickingLines) === null || _a === void 0 ? void 0 : _a.filter(function (p) { return (_this.selectedPickingLinesKeys.filter(function (f) { var _a; return f == ((_a = p.Id) === null || _a === void 0 ? void 0 : _a.toString()); })).length > 0; });
+                    }
+                    else if (this.pickingLines) {
+                        selectedPickingLines = this.pickingLines;
+                    }
+                }
                 request.Packages = [];
                 for (var i = 0; i < this.selectedBoxes.length; i++) {
                     var packageBoxEntry = this.selectedBoxes[i];
-                    var lineCount = (_b = ((_a = packageBoxEntry.Lines) === null || _a === void 0 ? void 0 : _a.length)) !== null && _b !== void 0 ? _b : 0;
-                    if (packageBoxEntry && lineCount > 0) {
+                    if (this.internationalShipping) {
+                        var lineCount = (_c = ((_b = packageBoxEntry.Lines) === null || _b === void 0 ? void 0 : _b.length)) !== null && _c !== void 0 ? _c : 0;
+                        if (packageBoxEntry && lineCount > 0) {
+                            var parcel = Object.assign(new Shipping_Parcel(), {});
+                            parcel.boxtype = packageBoxEntry.BoxType;
+                            parcel.height = packageBoxEntry.Height_InCm;
+                            parcel.length = packageBoxEntry.Length_InCm;
+                            parcel.weight = packageBoxEntry.Weight_InKg;
+                            parcel.width = packageBoxEntry.Width_InCm;
+                            parcel.quantity = 1;
+                            if (packageBoxEntry.Lines) {
+                                parcel.Lines = [];
+                                for (var q = 0; q < lineCount; q++) {
+                                    var entryLine = packageBoxEntry.Lines[q];
+                                    if (entryLine.ParcelLine) {
+                                        var parcelLine = Object.assign(new Shipping_ParcelLine(), {});
+                                        parcelLine.PickingListLinesId = entryLine.ParcelLine.PickingListLinesId;
+                                        parcelLine.Quantity = entryLine.ParcelLine.Quantity;
+                                        parcel.Lines.push(parcelLine);
+                                    }
+                                }
+                            }
+                            request.Packages.push(parcel);
+                        }
+                    }
+                    else {
                         var parcel = Object.assign(new Shipping_Parcel(), {});
                         parcel.boxtype = packageBoxEntry.BoxType;
                         parcel.height = packageBoxEntry.Height_InCm;
                         parcel.length = packageBoxEntry.Length_InCm;
                         parcel.weight = packageBoxEntry.Weight_InKg;
                         parcel.width = packageBoxEntry.Width_InCm;
-                        parcel.quantity = 1;
-                        if (packageBoxEntry.Lines) {
-                            parcel.Lines = [];
-                            for (var q = 0; q < lineCount; q++) {
-                                var entryLine = packageBoxEntry.Lines[q];
-                                if (entryLine.ParcelLine) {
-                                    var parcelLine = Object.assign(new Shipping_ParcelLine(), {});
-                                    parcelLine.PickingListLinesId = entryLine.ParcelLine.PickingListLinesId;
-                                    parcelLine.Quantity = entryLine.ParcelLine.Quantity;
-                                    parcel.Lines.push(parcelLine);
-                                }
-                            }
-                        }
+                        parcel.quantity = packageBoxEntry.Quantity;
                         request.Packages.push(parcel);
+                        parcel.Lines = [];
+                        for (var q = 0; q < selectedPickingLines.length; q++) {
+                            var parcelLine = Object.assign(new Shipping_ParcelLine(), {});
+                            parcelLine.PickingListLinesId = selectedPickingLines[q].Id;
+                            parcelLine.Quantity = selectedPickingLines[q].QtyPick;
+                            parcel.Lines.push(parcelLine);
+                        }
                     }
                 }
             }
@@ -5066,10 +5118,10 @@
             else {
                 request.PrintLabels = false;
             }
-            if ((_c = this.selectedShippingProduct) === null || _c === void 0 ? void 0 : _c.parameters) {
-                var shipment_description_requirement = (_d = this.selectedShippingProduct) === null || _d === void 0 ? void 0 : _d.parameters.filter(function (f) { return f.attr_key == "shipment_description"; })[0];
+            if ((_d = this.selectedShippingProduct) === null || _d === void 0 ? void 0 : _d.parameters) {
+                var shipment_description_requirement = (_e = this.selectedShippingProduct) === null || _e === void 0 ? void 0 : _e.parameters.filter(function (f) { return f.attr_key == "shipment_description"; })[0];
                 if (shipment_description_requirement) {
-                    request.ShipmentDescription = (_f = (_e = this.pickingList.MetaData) === null || _e === void 0 ? void 0 : _e.ExternalId) !== null && _f !== void 0 ? _f : request.Reference;
+                    request.ShipmentDescription = (_g = (_f = this.pickingList.MetaData) === null || _f === void 0 ? void 0 : _f.ExternalId) !== null && _g !== void 0 ? _g : request.Reference;
                 }
             }
             this.isLoadingData = true;
@@ -5377,7 +5429,7 @@
     PickinglistAddNewShipment.decorators = [
         { type: core.Component, args: [{
                     selector: 'mobicloud-pickinglist-add-new-shipment',
-                    template: "<div mat-dialog-container class=\"dialog-container\">\n    <!-- <mat-toolbar color=\"primary\" class=\"mat-elevation-z2 dialog-caption\" cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle>\n        <mat-card-header i18n=\"@@FieldCaption-CreateShipment\">Create shipment</mat-card-header>\n        <span class=\"dialog-caption-spacer\"></span>\n        <button mat-raised-button appMaterialElevation matTooltip=\"Close\" i18n-matTooltip=\"@@Action-Close\" aria-label=\"Close\" i18n-aria-label=\"@@Action-Close\" class=\"dialog-toolbar-button\" (click)=\"onCancel()\">\n          <svg-icon name=\"mobicloud_close\" svgClass=\"dialog-toolbar-button-icon\"></svg-icon>\n        </button>        \n    </mat-toolbar>     -->\n    <mat-toolbar color=\"primary\" class=\"mat-elevation-z2 dialog-caption\" cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle>\n        <mat-card-header>\n            <div class=\"toolbar-header-text-container\">\n                <svg-icon name=\"mobicloud_shipment\" svgClass=\"dialog-caption-icon\"></svg-icon><div i18n=\"@@FieldCaption-CreateShipment\" class=\"toolbar-header-text\">Create shipment</div>\n            </div>            \n        </mat-card-header>\n        <span class=\"dialog-caption-spacer\"></span>\n        <button mat-raised-button appMaterialElevation matTooltip=\"Close\" i18n-matTooltip=\"@@Action-Close\" aria-label=\"Close\" i18n-aria-label=\"@@Action-Close\" class=\"dialog-toolbar-button\" (click)=\"onCancel()\">\n          <svg-icon name=\"mobicloud_close\" svgClass=\"dialog-toolbar-button-icon\"></svg-icon>\n        </button>        \n    </mat-toolbar>      \n\n    <div #shipment_dialog_container id=\"shipment_dialog_container\" class=\"dialog-wizard-steps-container\">\n        <mat-horizontal-stepper [linear]=\"true\" #stepper class=\"dialog-wizard-steps\" (animationDone)=\"setFocus()\" labelPosition='bottom'>\n            <mat-step label=\"Lines\" i18n-label=\"@@CaptionHeader-Lines\" [editable]=\"!createCompleted\">\n                <div fxLayout=\"column\" class=\"dialog-form-content\">                           \n                    <div fxLayout=\"column\" class=\"dialog-tab-input-container\">\n                        <div class=\"invalid-message-Lines\" *ngIf=\"!pickingLinesSelectionValid\" i18n=\"@@ValidationText-NoShipmentPickingLinesSelected\">No lines has been selected for shipping</div>\n                        <dx-data-grid keyExpr=\"Id\" #datagrid_pickinglines id=\"datagrid_pickinglines\" [(selectedRowKeys)]=\"selectedPickingLinesKeys\" class=\"devex-grid-lb\" height=\"100%\" [dataSource]=\"pickingLines\" [showBorders]=\"false\" [showColumnLines]=\"false\" [showRowLines]=\"true\" [allowColumnReordering]=\"true\" [allowColumnResizing]=\"true\" [rowAlternationEnabled]=\"true\">\n                            <!-- <dxo-editing mode=\"batch\" refreshMode=\"full\" [selectTextOnEditStart]=\"true\" startEditAction=\"click\" [allowAdding]=\"false\" [allowUpdating]=\"false\" [allowDeleting]=\"false\" [confirmDelete]=\"true\"></dxo-editing> -->\n                            <dxo-column-chooser [enabled]=\"true\" mode=\"select\" title=\"Choose columns\" i18n-title=\"@@CaptionHeader-ColumnChooser\"></dxo-column-chooser>        \n                            <dxo-filter-row [visible]=\"true\"></dxo-filter-row> \n                            <dxo-header-filter [visible]=\"true\"></dxo-header-filter>\n                            <dxo-group-panel [visible]=\"false\" emptyPanelText=\"\"></dxo-group-panel>  \n                            <dxo-sorting mode=\"multiple\"></dxo-sorting>\n                            <dxo-selection [allowSelectAll]=\"true\" showCheckBoxesMode=\"always\" [mode]=\"allowSelectPickingLines ? 'multiple' : 'none'\"></dxo-selection>                            \n\n                            <dxo-toolbar>                \n                                <dxi-item location=\"after\">\n                                  <div *dxTemplate class=\"gridtoolbar-item-container\">\n                                    <dx-check-box [(value)]=\"returnLabelsEnabled\" [rtlEnabled]=\"false\" text=\"Return label\" i18n-text=\"@@FieldCaption-ReturnLabel\" (onValueChanged)=\"returnCheckBoxChanged($event)\" labelMode=\"static\" stylingMode=\"outlined\"></dx-check-box>\n                                  </div>\n                                </dxi-item>\n                \n                                <dxi-item name=\"columnChooserButton\"></dxi-item>\n                              </dxo-toolbar>                                 \n\n                            <dxi-column dataField=\"MetaData.Index\" [width]=\"40\" [visible]=\"true\" hidingPriority=\"99\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-LineNumber\" caption=\"#\" dataType=\"number\" [fixed]=\"true\" fixedPosition=\"left\"></dxi-column>\n                            <dxi-column dataField=\"LineId\" [visible]=\"true\" hidingPriority=\"20\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-LineId\" caption=\"Line id\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"SalesLine.LineId\" hidingPriority=\"92\" [visible]=\"false\" [showInColumnChooser]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-SalesLineId\" caption=\"Sales line id\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"ProductId\" hidingPriority=\"58\" [visible]=\"false\" [showInColumnChooser]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-ProductUId\" caption=\"Product uid\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Product\" hidingPriority=\"68\" [visible]=\"false\" [showInColumnChooser]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-Product\" caption=\"Product\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Product.ProductId\" [fixed]=\"true\" fixedPosition=\"left\" hidingPriority=\"100\" [visible]=\"true\" [showInColumnChooser]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-ProductId\" caption=\"Product id\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Product.Name\" hidingPriority=\"94\" [visible]=\"true\" [showInColumnChooser]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-ProductName\" caption=\"Product name\" dataType=\"string\"></dxi-column>        \n                            <dxi-column dataField=\"Product.SKU\" hidingPriority=\"54\" [visible]=\"true\" [showInColumnChooser]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-SKU\" caption=\"SKU\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Color\" hidingPriority=\"84\" [visible]=\"false\" [showInColumnChooser]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-Color\" caption=\"Color\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"ColorId\" hidingPriority=\"48\" [visible]=\"false\" [showInColumnChooser]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-ColorUId\" caption=\"Color uid\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Color.Code\" hidingPriority=\"82\" [visible]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-Color\" caption=\"Color\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Color.Name\" hidingPriority=\"46\" [visible]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-ColorName\" caption=\"Color name\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Size\" hidingPriority=\"78\" [visible]=\"false\" [showInColumnChooser]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-Size\" caption=\"Size\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"SizeId\" hidingPriority=\"44\" [visible]=\"false\" [showInColumnChooser]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-SizeUId\" caption=\"Size uid\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Size.Code\" hidingPriority=\"76\" [visible]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-Size\" caption=\"Size\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Size.Name\" hidingPriority=\"42\" [visible]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-SizeName\" caption=\"Size name\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Config\" hidingPriority=\"74\" [visible]=\"false\" [showInColumnChooser]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-Config\" caption=\"Config\" dataType=\"string\"></dxi-column>    \n                            <dxi-column dataField=\"ConfigId\" hidingPriority=\"40\" [visible]=\"false\" [showInColumnChooser]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-ConfigUId\" caption=\"Config uid\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Config.Code\" hidingPriority=\"72\" [visible]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-Config\" caption=\"Config\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Config.Name\" hidingPriority=\"38\" [visible]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-ConfigName\" caption=\"Config name\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Qty\" hidingPriority=\"74\" [visible]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-Qty\" caption=\"Quantity\" dataType=\"number\"></dxi-column>\n                            <dxi-column dataField=\"QtyPick\" hidingPriority=\"96\" [visible]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-QtyPick\" caption=\"Quantity pick\" dataType=\"number\"></dxi-column>\n                            <dxi-column dataField=\"Note\" hidingPriority=\"28\" [visible]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-Note\" caption=\"Note\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"SortCode\" hidingPriority=\"26\" [visible]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-SortCode\" caption=\"Sort code\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"WMSZone\" hidingPriority=\"24\" [visible]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-WMSZone\" caption=\"WMS zone\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"MetaData.Created\" hidingPriority=\"10\" [visible]=\"false\" [allowHeaderFiltering]=\"true\" i18n-caption=\"@@GridColumn-Created\" caption=\"Created\" dataType=\"date\"></dxi-column>\n                            <dxo-summary>\n                                <dxi-total-item column=\"Qty\" summaryType=\"sum\" displayFormat=\"{0}\"></dxi-total-item>\n                                <dxi-total-item column=\"QtyPick\" summaryType=\"sum\" displayFormat=\"{0}\"></dxi-total-item>\n                            </dxo-summary>                \n                            <dxi-column type=\"buttons\" [allowHiding]=\"false\" [fixed]=\"true\" fixedPosition=\"right\">\n                            </dxi-column>\n                            <!-- <dxi-column type=\"adaptive\" [allowHiding]=\"false\" cellTemplate=\"adaptiveCellTemplate\" [fixed]=\"true\" fixedPosition=\"right\"></dxi-column> -->\n                        \n                            <!-- Templates -->\n                        \n                            <div *dxTemplate=\"let column of 'adaptiveCellTemplate'\">\n                              <button aria-label=\"Collapse/Expand\" mat-icon-button (click)=\"column.component.isAdaptiveDetailRowExpanded(column.row.key) ? column.component.collapseAdaptiveDetailRow() : column.component.expandAdaptiveDetailRow(column.row.key);\">\n                                <mat-icon *ngIf=\"!column.component.isAdaptiveDetailRowExpanded(column.row.key)\" svgIcon=\"mobicloud_expand_arrows\" class=\"expand_gridrow\"></mat-icon>\n                                <mat-icon *ngIf=\"column.component.isAdaptiveDetailRowExpanded(column.row.key)\" svgIcon=\"mobicloud_collapse_arrows\" class=\"collapse_gridrow\"></mat-icon>\n                              </button>      \n                            </div>\n                         \n                            <dxo-paging [enabled]=\"false\"></dxo-paging>\n                        </dx-data-grid>                        \n                    </div>                                                                                                 \n                </div>\n                <div fxLayout=\"row\" fxFlex=\"100\" fxLayoutAlign=\"stretch\" fxLayoutAlign=\"end end\">\n                    <div fxLayout=\"row\" class=\"dialog-button-row\" fxFlex=\"100\" fxLayoutAlign=\"end center\">\n                        <button mat-flat-button color=\"accent\" (click)=\"onCancel()\" class=\"button1\" i18n=\"@@Button-Cancel\">Cancel</button>\n                        <button mat-flat-button color=\"primary\" (click)=\"onClick_Lines()\" class=\"button2\" i18n=\"@@Button-Next\">Next</button>\n                    </div>                                   \n                </div>                 \n            </mat-step>\n            <mat-step label=\"Sender\" i18n-label=\"@@CaptionHeader-Sender\" [editable]=\"!createCompleted\">\n                <div fxLayout=\"column\" class=\"dialog-form-content\">\n                    <div fxLayout=\"column\" class=\"dialog-tab-input-container\">\n                        <dx-select-box id=\"custom-templates\" class=\"sender-selectbox\" [dataSource]=\"inventLocation_ds\" displayExpr=\"Name\" [value]=\"inventLocationId\" [showClearButton]=\"true\" (onValueChanged)=\"senderSelectbox_onValueChanged($event)\">\n                        <div *dxTemplate=\"let data of 'item'\">\n                          <div class=\"custom-item\">\n                            <!-- <img src=\"{{ data.ImageSrc }}\" /> -->\n                            <div>\n                              {{ data.Name }} (test)\n                            </div>\n                          </div>\n                        </div>\n                      </dx-select-box>                        \n                        <fieldset class=\"shipment-fieldset-default shipment-fieldset-address\">\n                            <legend class=\"shipment-legend-default\" i18n=\"@@FieldCaption-Sender\">Sender</legend>\n                            <dx-form #form_Sender id=\"form_Sender\" [colCount]=\"2\" [formData]=\"formInstanceShipment\" validationGroup=\"formSender\" [showColonAfterLabel]=\"false\" labelMode=\"static\" labelLocation=\"top\" [showValidationSummary]=\"false\" [showRequiredMark] = \"false\">\n                    \n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"2\" [colSpan]=\"2\">\n                                    <dxi-item dataField=\"Sender_Name\" [colSpan]=\"2\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'organization'} }\">                        \n                                        <dxo-label text=\"Name\" i18n-text=\"@@FieldCaption-Name\"></dxo-label>\n                                        <dxi-validation-rule type=\"required\" message=\"Name is required\" i18n-text=\"@@ValidationText-Name-Required\"></dxi-validation-rule>                \n                                    </dxi-item>\n                                    <dxi-item dataField=\"Sender_Attention\" [colSpan]=\"2\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'given-name'} }\">\n                                        <dxo-label text=\"Attention\" i18n-text=\"@@FieldCaption-Attention\"></dxo-label>\n                                    </dxi-item>                                                                                  \n                                </dxi-item>  \n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"2\" [colSpan]=\"2\">\n                                    <dxi-item dataField=\"Sender_Address1\" [colSpan]=\"2\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'address-line1'} }\">\n                                        <dxo-label text=\"Address\" i18n-text=\"@@FieldCaption-Address\"></dxo-label>\n                                        <dxi-validation-rule type=\"required\" message=\"Address is required\" i18n-text=\"@@ValidationText-Address-Required\"></dxi-validation-rule>                \n                                    </dxi-item>                                  \n                                    <dxi-item dataField=\"Sender_Zipcode\" [editorOptions]=\"{ elementAttr: {autocomplete: 'postal-code'} }\">\n                                        <dxo-label text=\"ZipCode\" i18n-text=\"@@FieldCaption-ZipCode\"></dxo-label> \n                                        <dxi-validation-rule type=\"required\" message=\"Zip code is required\" i18n-text=\"@@ValidationText-ZipCode-Required\"></dxi-validation-rule>               \n                                    </dxi-item> \n                                    <dxi-item dataField=\"Sender_City\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'address-level2'} }\">\n                                        <dxo-label text=\"City\" i18n-text=\"@@FieldCaption-City\"></dxo-label> \n                                        <dxi-validation-rule type=\"required\" message=\"City is required\" i18n-text=\"@@ValidationText-City-Required\"></dxi-validation-rule>               \n                                    </dxi-item>                                                                                                               \n                                </dxi-item>\n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"1\" [colSpan]=\"2\">\n                                    <dxi-item dataField=\"Sender_CountryCode\">\n                                        <dxo-label text=\"Country\" i18n-text=\"@@FieldCaption-Country\"></dxo-label>  \n                                        <div *dxTemplate=\"let data of 'content'\">\n                                            <dx-drop-down-box [deferRendering]=\"true\" [showClearButton]=\"true\" [readOnly]=\"false\" fieldTemplate=\"fieldTemplate\"\n                                                [dataSource]=\"sender_country_ds\"                   \n                                                [(value)]=\"_senderCountryId\"\n                                                valueExpr=\"Code2\"                \n                                                displayExpr=\"LocalName\"                                    \n                                                [(opened)]=\"_senderCountryOpened\"> \n                                                <dxo-drop-down-options title=\"Countries\" i18n-title=\"@@FieldCaption-Countries\" [showTitle]=\"true\" [fullScreen]=\"false\" [showCloseButton]=\"true\">\n                                            </dxo-drop-down-options>                                       \n                                                <dx-data-grid [filterRow]=\"{ visible: true }\" [scrolling]=\"{ mode: 'standard' }\" [selection]=\"{ mode: 'single' }\" height=\"100%\" [hoverStateEnabled]=\"true\"\n                                                    [dataSource]=\"sender_country_ds\"\n                                                    [(selectedRowKeys)]=\"_senderCountryId\"\n                                                    (onSelectionChanged)=\"senderCountryChanged($event)\"\n                                                    (onRowClick)=\"_senderCountryOpened = false\">\n                                                    <dxi-column dataField=\"Code2\" [allowFiltering]=\"false\" [allowSorting]=\"false\" cellTemplate=\"imgCellTemplate\" all [width]=\"50\" caption=\"\"></dxi-column>\n                                                    <dxi-column dataField=\"LocalName\" i18n-caption=\"@@GridColumn-Name\" caption=\"Name\"></dxi-column>\n                                                    <dxo-paging [enabled]=\"false\"></dxo-paging>\n                                                    <div *dxTemplate=\"let data of 'imgCellTemplate'\">\n                                                        <img alt=\"\" [src]=\"data.value | countryCodeToFlagUrl\"/>\n                                                    </div>\n                                                </dx-data-grid>\n                                                <div *dxTemplate=\"let data of 'fieldTemplate'\">\n                                                    <div class=\"country-edit-item\">\n                                                        <div class=\"country-edit-image\"><img alt=\"\" [src]=\"_selectedSenderCountry?.Code2 | countryCodeToFlagUrl\" *ngIf=\"_selectedSenderCountry?.Code2\"></div>\n                                                        <div class=\"country-edit-text\">\n                                                            <dx-text-box stylingMode=\"filled\" [value]=\"_selectedSenderCountry?.Code2 | countryCodeToName\" [readOnly]=\"true\"></dx-text-box>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </dx-drop-down-box>\n                                        </div>   \n                                        <dxi-validation-rule type=\"required\" message=\"Country is required\" i18n-text=\"@@ValidationText-Country-Required\"></dxi-validation-rule>\n                                    </dxi-item>                                                                                  \n                                </dxi-item>                                    \n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"2\" [colSpan]=\"2\">\n                                    <dxi-item dataField=\"Sender_Email\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'email'} }\">\n                                        <dxo-label text=\"Email\" i18n-text=\"@@FieldCaption-Email\"></dxo-label>        \n                                        <dxi-validation-rule type=\"required\" message=\"Email is required\" i18n-message=\"@@ValidationText-Email-Required\"></dxi-validation-rule>\n                                        <dxi-validation-rule type=\"email\" message=\"Email is invalid\" i18n-message=\"@@ValidationText-Email-Invalid\"></dxi-validation-rule>                                                                       \n                                    </dxi-item> \n                                    <dxi-item dataField=\"Sender_Mobile\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'tel'} }\">\n                                        <dxo-label text=\"Mobile phone\" i18n-text=\"@@FieldCaption-MobilePhone\"></dxo-label> \n                                        <dxi-validation-rule type=\"required\" message=\"Phone is required\" i18n-message=\"@@ValidationText-Phone-Required\"></dxi-validation-rule>\n                                    </dxi-item>                                                                                   \n                                </dxi-item>                                                                                    \n                            </dx-form>                            \n                        </fieldset>                       \n                    </div>                                                                    \n                </div>\n                <div fxLayout=\"row\" fxFlex=\"100\" fxLayoutAlign=\"stretch\" fxLayoutAlign=\"end end\">\n                    <div fxLayout=\"row\" class=\"dialog-button-row\" fxFlex=\"100\" fxLayoutAlign=\"end center\">\n                        <button mat-flat-button matStepperPrevious color=\"accent\" class=\"button1\" i18n=\"@@Button-Back\">Back</button>\n                        <!-- <button mat-flat-button color=\"accent\" (click)=\"onCancel()\" class=\"button1\" i18n=\"@@Button-Cancel\">Cancel</button> -->\n                        <button mat-flat-button color=\"primary\" (click)=\"onClick_Sender()\" class=\"button2\" i18n=\"@@Button-Next\">Next</button>                            \n                    </div>                                   \n                </div>                \n            </mat-step>\n            <mat-step label=\"Receiver\" i18n-label=\"@@CaptionHeader-Receiver\" [editable]=\"!createCompleted\">\n                <div fxLayout=\"column\" class=\"dialog-form-content\">\n                    <div fxLayout=\"column\" class=\"dialog-tab-input-container\">\n                        <fieldset class=\"shipment-fieldset-default shipment-fieldset-address\">\n                            <legend class=\"shipment-legend-default\" i18n=\"@@FieldCaption-Receiver\">Receiver</legend>\n                            <dx-form #form_Receiver id=\"form_Receiver\" [colCount]=\"2\" [formData]=\"formInstanceShipment\" validationGroup=\"formReceiver\" [showColonAfterLabel]=\"false\" labelMode=\"static\" labelLocation=\"top\" [showValidationSummary]=\"false\" [showRequiredMark] = \"false\">\n                    \n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"2\" [colSpan]=\"2\">\n                                    <dxi-item dataField=\"Receiver_Name\" [colSpan]=\"2\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'organization'} }\">                        \n                                        <dxo-label text=\"Company\" i18n-text=\"@@FieldCaption-Company\"></dxo-label>\n                                        <!-- <dxi-validation-rule type=\"required\" message=\"Name is required\" i18n-text=\"@@ValidationText-Name-Required\"></dxi-validation-rule> -->\n                                    </dxi-item>\n                                    <dxi-item dataField=\"Receiver_Attention\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'given-name'} }\">\n                                        <dxo-label text=\"First name\" i18n-text=\"@@FieldCaption-Firstname\"></dxo-label>\n                                        <dxi-validation-rule type=\"required\" message=\"First name is required\" i18n-text=\"@@ValidationText-FirstName-Required\"></dxi-validation-rule>\n                                    </dxi-item>  \n                                    <dxi-item dataField=\"Receiver_Telephone\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'family-name'} }\">\n                                        <dxo-label text=\"Last name\" i18n-text=\"@@FieldCaption-Lastname\"></dxo-label>\n                                        <dxi-validation-rule type=\"required\" message=\"Last name is required\" i18n-text=\"@@ValidationText-LastName-Required\"></dxi-validation-rule>\n                                    </dxi-item>                                                                                                                    \n                                </dxi-item>  \n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"2\" [colSpan]=\"2\">\n                                    <dxi-item dataField=\"Receiver_Address1\" [colSpan]=\"2\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'address-line1'} }\">\n                                        <dxo-label text=\"Address\" i18n-text=\"@@FieldCaption-Address\"></dxo-label>\n                                        <dxi-validation-rule type=\"required\" message=\"Address is required\" i18n-text=\"@@ValidationText-Address-Required\"></dxi-validation-rule>                \n                                    </dxi-item>                                  \n                                    <dxi-item dataField=\"Receiver_Zipcode\" [editorOptions]=\"{ elementAttr: {autocomplete: 'postal-code'} }\">\n                                        <dxo-label text=\"ZipCode\" i18n-text=\"@@FieldCaption-ZipCode\"></dxo-label> \n                                        <dxi-validation-rule type=\"required\" message=\"Zip code is required\" i18n-text=\"@@ValidationText-ZipCode-Required\"></dxi-validation-rule>               \n                                    </dxi-item> \n                                    <dxi-item dataField=\"Receiver_City\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'address-level2'} }\">\n                                        <dxo-label text=\"City\" i18n-text=\"@@FieldCaption-City\"></dxo-label> \n                                        <dxi-validation-rule type=\"required\" message=\"City is required\" i18n-text=\"@@ValidationText-City-Required\"></dxi-validation-rule>               \n                                    </dxi-item>                                                                                                               \n                                </dxi-item>\n                                <dxi-item itemType=\"group\" caption=\"\" [colSpan]=\"2\">\n                                    <dxi-item dataField=\"Receiver_CountryCode\">\n                                        <dxo-label text=\"Country\" i18n-text=\"@@FieldCaption-Country\"></dxo-label>  \n                                        <div *dxTemplate=\"let data of 'content'\">\n                                            <dx-drop-down-box [deferRendering]=\"true\" [showClearButton]=\"true\" [readOnly]=\"false\" fieldTemplate=\"fieldTemplate\"\n                                                [dataSource]=\"receiver_country_ds\"                   \n                                                [(value)]=\"_receiverCountryId\"\n                                                valueExpr=\"Code2\"                \n                                                displayExpr=\"LocalName\"                                    \n                                                [(opened)]=\"_receiverCountryOpened\"> \n                                                <dxo-drop-down-options title=\"Countries\" i18n-title=\"@@FieldCaption-Countries\" [showTitle]=\"true\" [fullScreen]=\"false\" [showCloseButton]=\"true\">\n                                            </dxo-drop-down-options>                                       \n                                                <dx-data-grid [filterRow]=\"{ visible: true }\" [scrolling]=\"{ mode: 'standard' }\" [selection]=\"{ mode: 'single' }\" height=\"100%\" [hoverStateEnabled]=\"true\"\n                                                    [dataSource]=\"receiver_country_ds\"\n                                                    [(selectedRowKeys)]=\"_receiverCountryId\"\n                                                    (onSelectionChanged)=\"receiverCountryChanged($event)\"\n                                                    (onRowClick)=\"_receiverCountryOpened = false\">\n                                                    <dxi-column dataField=\"Code2\" [allowFiltering]=\"false\" [allowSorting]=\"false\" cellTemplate=\"imgCellTemplate\" all [width]=\"50\" caption=\"\"></dxi-column>\n                                                    <dxi-column dataField=\"LocalName\" i18n-caption=\"@@GridColumn-Name\" caption=\"Name\"></dxi-column>\n                                                    <dxo-paging [enabled]=\"false\"></dxo-paging>\n                                                    <div *dxTemplate=\"let data of 'imgCellTemplate'\">\n                                                        <img alt=\"\" [src]=\"data.value | countryCodeToFlagUrl\"/>\n                                                    </div>\n                                                </dx-data-grid>\n                                                <div *dxTemplate=\"let data of 'fieldTemplate'\">\n                                                    <div class=\"country-edit-item\">\n                                                        <div class=\"country-edit-image\"><img alt=\"\" [src]=\"_selectedReceiverCountry?.Code2 | countryCodeToFlagUrl\" *ngIf=\"_selectedReceiverCountry?.Code2\"></div>\n                                                        <div class=\"country-edit-text\">\n                                                            <dx-text-box stylingMode=\"filled\" [value]=\"_selectedReceiverCountry?.Code2 | countryCodeToName\" [readOnly]=\"true\"></dx-text-box>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </dx-drop-down-box>\n                                        </div>   \n                                        <dxi-validation-rule type=\"required\" message=\"Country is required\" i18n-text=\"@@ValidationText-Country-Required\"></dxi-validation-rule>\n                                    </dxi-item>                                                                                                                    \n                                </dxi-item>                                    \n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"2\" [colSpan]=\"2\">\n                                    <dxi-item dataField=\"Receiver_Email\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'email'} }\">\n                                        <dxo-label text=\"Email\" i18n-text=\"@@FieldCaption-Email\"></dxo-label> \n                                        <dxi-validation-rule type=\"required\" message=\"Email is required\" i18n-message=\"@@ValidationText-Email-Required\"></dxi-validation-rule>\n                                        <dxi-validation-rule type=\"email\" message=\"Email is invalid\" i18n-message=\"@@ValidationText-Email-Invalid\"></dxi-validation-rule>                                                                              \n                                    </dxi-item>   \n                                    <dxi-item dataField=\"Receiver_Mobile\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'tel'} }\">\n                                        <dxo-label text=\"Mobile phone\" i18n-text=\"@@FieldCaption-MobilePhone\"></dxo-label> \n                                        <dxi-validation-rule type=\"required\" message=\"Phone is required\" i18n-message=\"@@ValidationText-Phone-Required\"></dxi-validation-rule>\n                                    </dxi-item>                                    \n                                </dxi-item>                                                                                                                   \n                            </dx-form>                               \n                        </fieldset>                         \n                    </div>                                                                    \n                </div>\n                <div fxLayout=\"row\" fxFlex=\"100\" fxLayoutAlign=\"stretch\" fxLayoutAlign=\"end end\">\n                    <div fxLayout=\"row\" class=\"dialog-button-row\" fxFlex=\"100\" fxLayoutAlign=\"end center\">\n                        <button mat-flat-button matStepperPrevious color=\"accent\" class=\"button1\" i18n=\"@@Button-Back\">Back</button>\n                        <button mat-flat-button color=\"primary\" (click)=\"onClick_Receiver()\" class=\"button2\" i18n=\"@@Button-Next\">Next</button>                            \n                    </div>                                   \n                </div>                \n            </mat-step>            \n            <mat-step label=\"Packages\" i18n-label=\"@@CaptionHeader-Packages\" [editable]=\"!createCompleted\">\n                <div fxLayout=\"column\" class=\"dialog-form-content\">\n                    <div fxLayout=\"column\" class=\"dialog-tab-input-container\">\n                        <div class=\"invalid-message-Lines\" *ngIf=\"!boxesSelectionValid\" i18n=\"@@ValidationText-NoShipmentBoxesSelected\">No boxes has been selected for shipping</div>\n                        <div class=\"invalid-message-Lines\" *ngIf=\"!productBoxesQuantityValid\" i18n=\"@@ValidationText-ProductBoxesQuantityInvalid\">Product quantities in the boxes is invalid</div>\n                        <dx-data-grid #selectedBoxesList id=\"selectedBoxesList\" keyExpr=\"Id\" class=\"devex-grid-lb\" height=\"100%\" [dataSource]=\"selectedBoxes\" [showBorders]=\"false\" [showColumnLines]=\"false\" [showRowLines]=\"true\" [allowColumnReordering]=\"true\" [allowColumnResizing]=\"true\" [rowAlternationEnabled]=\"true\" (onInitNewRow)=\"onInitNewRow_Boxes($event)\">\n                            <dxo-paging [enabled]=\"false\"></dxo-paging>\n                            <dxo-editing mode=\"cell\" [allowUpdating]=\"true\" [allowAdding]=\"true\" [allowDeleting]=\"true\" [selectTextOnEditStart]=\"true\">\n                            </dxo-editing>\n                            <dxo-toolbar>\n                                <dxi-item location=\"before\">\n                                    <dx-drop-down-button text=\"Add box\" i18n-text=\"@@Button-AddBox\" icon=\"box\" [items]=\"packagingBoxes\" displayExpr=\"Name\" (onItemClick)=\"onAddBoxButtonClick($event)\"></dx-drop-down-button>  \n                                </dxi-item>                            \n                                <dxi-item name=\"addRowButton\" cssClass=\"action-button\"></dxi-item>\n                                <dxi-item name=\"revertButton\" cssClass=\"action-button\"></dxi-item>\n                              </dxo-toolbar>\n\n                            <dxo-master-detail [enabled]=\"true\" template=\"detail\" [autoExpandAll]=\"true\"></dxo-master-detail>\n                            <div *dxTemplate=\"let row of 'detail'\">        \n                                <fieldset class=\"detailsgrid-fieldset-default\"> \n                                  <legend class=\"detailsgrid-legend-default\" i18n=\"@@FieldCaption-Products\">Products</legend>\n\n                                  <dx-data-grid keyExpr=\"PickingLine.Id\" class=\"devex-grid-lb\" height=\"100%\" [dataSource]=\"row.data.Lines\" [showBorders]=\"false\" [showColumnLines]=\"false\" [showRowLines]=\"true\" [allowColumnReordering]=\"true\" [allowColumnResizing]=\"true\" [rowAlternationEnabled]=\"true\">\n                                    <dxo-paging [enabled]=\"false\"></dxo-paging>\n                                    <dxo-editing mode=\"cell\" [allowUpdating]=\"true\" [allowAdding]=\"false\" [allowDeleting]=\"true\" [selectTextOnEditStart]=\"true\">\n                                    </dxo-editing>\n                                    <!-- <dxo-selection selectAllMode=\"allPages\" showCheckBoxesMode=\"always\" mode=\"multiple\" [allowSelectAll]=\"true\"></dxo-selection> -->\n                                    \n                                    <dxi-column dataField=\"PickingLine.Product.ProductId\" caption=\"Product id\" hidingPriority=\"100\" [allowEditing]=\"false\" i18n-caption=\"@@GridColumn-ProductId\" dataType=\"string\" [fixed]=\"true\" fixedPosition=\"left\"></dxi-column>\n                                    <dxi-column dataField=\"ParcelLine.Quantity\" caption=\"Quantity\" [allowEditing]=\"true\" hidingPriority=\"90\" i18n-caption=\"@@GridColumn-Quantity\" dataType=\"number\" format=\"#\" [editorOptions]=\"{ format: '#' }\" [fixed]=\"true\" fixedPosition=\"right\"></dxi-column>\n\n                                  </dx-data-grid>\n                                </fieldset>        \n                            </div>\n\n                            <!-- <dxi-column dataField=\"Quantity\" caption=\"Quantity\" hidingPriority=\"100\" i18n-caption=\"@@GridColumn-Quantity\" dataType=\"number\" format=\"#\" [editorOptions]=\"{ format: '#' }\" [fixed]=\"true\" fixedPosition=\"left\"></dxi-column> -->\n                            <dxi-column dataField=\"BoxType\" [setCellValue]=\"setCellValue_BoxType\" caption=\"Box type\" hidingPriority=\"90\" i18n-caption=\"@@GridColumn-BoxType\" dataType=\"string\" [fixed]=\"true\" fixedPosition=\"left\">\n                                <dxo-lookup\n                                    [dataSource]=\"packagingBoxType_ds\"\n                                    displayExpr=\"text\"\n                                    valueExpr=\"value\">\n                                </dxo-lookup>          \n                                <dxo-header-filter\n                                      [dataSource]=\"packagingBoxType_ds\">\n                                </dxo-header-filter>    \n                                <dxi-validation-rule type=\"required\" message=\"Box type is required\" i18n-message=\"@@ValidationText-BoxType-Required\"></dxi-validation-rule>  \n                            </dxi-column>                            \n                            <dxi-column dataField=\"Length_InCm\" hidingPriority=\"80\" i18n-caption=\"@@GridColumn-Length_CM\" caption=\"Length (cm)\" dataType=\"number\" format=\"#\" [editorOptions]=\"{ format: '#' }\">\n                                <dxi-validation-rule type=\"required\" message=\"Length is required\" i18n-message=\"@@ValidationText-Length-Required\"></dxi-validation-rule>\n                            </dxi-column>\n                            <dxi-column dataField=\"Width_InCm\" hidingPriority=\"70\" i18n-caption=\"@@GridColumn-Width_CM\" caption=\"Width (cm)\" dataType=\"number\" format=\"#\" [editorOptions]=\"{ format: '#' }\">\n                                <dxi-validation-rule type=\"required\" message=\"Width is required\" i18n-message=\"@@ValidationText-Width-Required\"></dxi-validation-rule>\n                            </dxi-column>\n                            <dxi-column dataField=\"Height_InCm\" hidingPriority=\"60\" i18n-caption=\"@@GridColumn-Height_CM\" caption=\"Height (cm)\" dataType=\"number\" format=\"#\" [editorOptions]=\"{ format: '#' }\"></dxi-column>\n                            <dxi-column dataField=\"Weight_InKg\" hidingPriority=\"50\" i18n-caption=\"@@GridColumn-Weight_KG\" caption=\"Weight (kg)\" dataType=\"number\" format=\"#\" [editorOptions]=\"{ format: '#' }\">\n                                <dxi-validation-rule type=\"required\" message=\"Weight is required\" i18n-message=\"@@ValidationText-Weight-Required\"></dxi-validation-rule>\n                            </dxi-column>\n                            \n                        </dx-data-grid>                       \n                    </div> \n                </div>\n                <div fxLayout=\"row\" class=\"dialog-button-row\">\n                    <button mat-flat-button matStepperPrevious color=\"accent\" class=\"button1\" i18n=\"@@Button-Back\">Back</button>\n                    <button mat-flat-button color=\"primary\" (click)=\"onClick_Packages()\" class=\"button2\" i18n=\"@@Button-Next\">Next</button>                        \n                </div>                 \n            </mat-step>                          \n            <mat-step label=\"Carrier\" i18n-label=\"@@CaptionHeader-Carrier\" [optional]=\"false\" [editable]=\"!createCompleted\">\n                <div fxLayout=\"column\" class=\"dialog-form-content\">   \n                    <div fxLayout=\"column\" class=\"dialog-tab-input-container\">\n\n                        <div class=\"carrier-info\" *ngIf=\"shipmentProviderType == 'Webshipper'\">\n                            <div class=\"carrier\">\n                                <dx-select-box id=\"carrierSelectbox\" [dataSource]=\"shipmentCarriers\" label=\"Carrier\" i18n-label=\"@@FieldCaption-Carrier\" labelMode=\"static\" displayExpr=\"name\" valueExpr=\"id\" [(value)]=\"selectedCarrierId\" (onSelectionChanged)=\"onCarrierSelectionChanged($event)\">\n                                    <div *dxTemplate=\"let data of 'item'\">\n                                        <div class=\"carrier-item\">\n                                            <div class=\"carrier-name\">\n                                                {{data?.name}}\n                                            </div>\n                                        </div>\n                                    </div>                                        \n                                </dx-select-box> \n                            </div>                            \n                        </div>                        \n\n                        <div fxLayout=\"row\" class=\"shipment-products-container\">\n                            <fieldset [ngClass]=\"{'shipment-fieldset-default shipment-fieldset-shipment-products':!servicePointRequired, 'shipment-fieldset-default shipment-fieldset-shipment-products-withservice':servicePointRequired}\">\n                                <legend class=\"shipment-legend-default\" i18n=\"@@FieldCaption-CarrierProducts\">Carrier products</legend>\n                                <dx-validation-summary validationGroup=\"ProductCode\"></dx-validation-summary>\n                                <dx-list #shipmentProducList keyExpr=\"product_code\" [dataSource]=\"shipmentProducts\" selectionMode=\"single\" showScrollbar=\"always\" [showSelectionControls]=\"true\" [(selectedItemKeys)]=\"selectedShipmentProducts\" (onSelectionChanged)=\"onShipmentProductSelectionChanged($event)\">\n                                    <div *dxTemplate=\"let item of 'item'\">\n                                        <div class=\"shipment-product-item\">                                  \n                                            <div class=\"shipment-product-item-name\">{{ item.name }}</div>\n                                            <div class=\"shipment-product-item-info\">\n                                                <div class=\"shipment-product-item-price\">\n                                                    <!-- <span class=\"item-caption\">Price</span><span class=\"item-caption-colon\">:</span><div class=\"item-value\">{{item.price_amount | currency:item.price_currency:\"symbol\"}}</div> -->\n                                                    <span class=\"item-caption\">Price</span><span class=\"item-caption-colon\">:</span><div class=\"item-value\">{{item.price_currency}} {{item.price_amount}}</div>\n                                                </div>\n                                                <div class=\"shipment-product-item-transit\">\n                                                    <span class=\"item-caption\">Transit time</span><span class=\"item-caption-colon\">:</span><span class=\"item-value\">{{ item.transit_time }}</span>                                                    \n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <dx-validator [adapter]=\"validationConfig_ProductCode\" validationGroup=\"ProductCode\">\n                                        <dxi-validation-rule type=\"required\" message=\"Carrier product is required\" i18n-message=\"@@ValidationText-CarrierProduct-Required\"></dxi-validation-rule>\n                                    </dx-validator>\n                                </dx-list>                                 \n                            </fieldset>\n                            <fieldset class=\"shipment-fieldset-default shipment-fieldset-shipment-servicepoint\" *ngIf=\"selectedShippingProduct?.service_point_required\">\n                                <legend class=\"shipment-legend-default\" i18n=\"@@FieldCaption-ParcelShop\">Parcel shop</legend>\n                                    <dx-validation-summary validationGroup=\"ServicePoint\"></dx-validation-summary>\n                                    <dx-select-box id=\"servicePointsSelectbox\" [dataSource]=\"servicePoints\" displayExpr=\"name\" [(value)]=\"selectedServicePoint\" (onSelectionChanged)=\"onServicePointSelectionChanged($event)\">\n                                        <div *dxTemplate=\"let data of 'item'\">\n                                            <div class=\"servicepoint-item\">\n                                                <div class=\"servicepoint-name\">\n                                                {{ data.name }} <span>{{data.id ? ('(' + data.id + ') ') : ':'}} {{(data.distance | meterToKilometer) | number : '1.0-1'}}</span><span> km</span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <dx-validator [adapter]=\"validationConfig_ServicePoint\" validationGroup=\"ServicePoint\">\n                                            <dxi-validation-rule type=\"required\" message=\"Parcel shop is required for this carrier product\" i18n-message=\"@@ValidationText-ParcelShop-Required\"></dxi-validation-rule>\n                                        </dx-validator>                                        \n                                    </dx-select-box>                                      \n                                    <div class=\"dx-fieldset selected-service-point\">\n                                        <div class=\"field\">\n                                            <!-- <div class=\"field-label\" i18n=\"@@FieldCaption-Name\">Name:</div> -->\n                                            <div class=\"field-value\">\n                                            {{selectedServicePoint?.name}} {{selectedServicePoint?.id ? ('(' + selectedServicePoint?.id + ')') : ''}}\n                                            </div>\n                                        </div>\n                                        <div class=\"field\">\n                                            <!-- <div class=\"field-label\" i18n=\"@@FieldCaption-Address\">Address:</div> -->\n                                            <div class=\"field-value\">\n                                            {{selectedServicePoint?.address_line}}\n                                            </div>\n                                        </div> \n                                        <div class=\"field\">\n                                            <!-- <div class=\"field-label\" i18n=\"@@FieldCaption-ZipCode\">Zip code:</div> -->\n                                            <div class=\"field-value\">\n                                            {{selectedServicePoint?.zip_code}} {{selectedServicePoint?.city}}\n                                            </div>\n                                        </div>    \n                                        <!-- <div class=\"field\">\n                                            <div class=\"field-label\" i18n=\"@@FieldCaption-City\">City:</div>\n                                            <div class=\"field-value\">\n                                            {{selectedServicePoint?.city}}\n                                            </div>\n                                        </div>                                                                       -->\n                                        <div class=\"field\">\n                                            <!-- <div class=\"field-label\" i18n=\"@@FieldCaption-Country\">Country:</div> -->\n                                            <div class=\"field-value\">\n                                            {{selectedServicePoint?.country_code | countryCodeToName}}\n                                            </div>\n                                        </div>  \n                                        <div class=\"field\">\n                                            <!-- <div class=\"field-label\" i18n=\"@@FieldCaption-Distance\">Distance:</div> -->\n                                            <div class=\"field-value\">\n                                                <span *ngIf=\"selectedServicePoint?.distance\">{{(selectedServicePoint?.distance | meterToKilometer) | number : '1.0-1'}}</span><span *ngIf=\"selectedServicePoint?.distance\"> km</span>\n                                            </div>\n                                        </div>                                                                                                          \n                                    </div>                              \n                            </fieldset>\n                        </div> \n                        <fieldset class=\"shipment-fieldset-default shipment-fieldset-shipment-info\">\n                            <legend class=\"shipment-legend-default\" i18n=\"@@FieldCaption-ShippingInfo\">Shipping information</legend>\n                            <dx-form #form_ShippingInfo id=\"form_ShippingInfo\" [colCount]=\"1\" [formData]=\"formInstanceShipment\" validationGroup=\"formShippingInfo\" [showColonAfterLabel]=\"false\" labelMode=\"static\" labelLocation=\"top\" [showValidationSummary]=\"false\" [showRequiredMark] = \"false\">\n                    \n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"2\">\n                                    <dxi-item dataField=\"ShippingDate\" editorType=\"dxDateBox\">                        \n                                        <dxo-label text=\"Shipping date\" i18n-text=\"@@FieldCaption-ShippingDate\"></dxo-label>\n                                        <dxi-validation-rule type=\"required\" message=\"Shipping date is required\" i18n-text=\"@@ValidationText-ShippingDate-Required\"></dxi-validation-rule>                \n                                    </dxi-item> \n                                    <dxi-item dataField=\"Reference\">\n                                        <dxo-label text=\"Reference\" i18n-text=\"@@FieldCaption-Reference\"></dxo-label> \n                                    </dxi-item>                                                                                                                     \n                                </dxi-item>                                                                 \n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"2\">                                    \n                                    <dxi-item dataField=\"Remarks\" [colSpan]=\"1\">\n                                        <dxo-label text=\"Remarks\" i18n-text=\"@@FieldCaption-Remarks\"></dxo-label> \n                                    </dxi-item>   \n                                    <dxi-item [colSpan]=\"1\">\n                                        <div *dxTemplate=\"let data of 'content'\">\n                                            <dx-select-box id=\"printerSelectbox\" [dataSource]=\"printer_store\" label=\"Printer\" i18n-label=\"@@FieldCaption-Printer\" labelMode=\"static\" displayExpr=\"PrinterName\" valueExpr=\"Id\" [(value)]=\"selectedPrinterId\">\n                                                <div *dxTemplate=\"let data of 'item'\">\n                                                    <div class=\"printer-item\">\n                                                        <div class=\"printer-name\">\n                                                            {{data?.PrinterName}} {{ data?.GatewayInstallationName ? ('(' + data.GatewayInstallationName + ')') : ('') }}\n                                                        </div>\n                                                    </div>\n                                                </div>                                        \n                                            </dx-select-box> \n                                        </div>\n                                    </dxi-item>                                                                                                                    \n                                </dxi-item>\n                            </dx-form>                             \n                        </fieldset>\n                    </div>                                                                    \n                </div>\n                <div fxLayout=\"row\" fxFlex=\"100\" fxLayoutAlign=\"stretch\" fxLayoutAlign=\"end end\">\n                    <div fxLayout=\"row\" class=\"dialog-button-row\" fxFlex=\"100\" fxLayoutAlign=\"end center\">\n                        <button mat-flat-button matStepperPrevious color=\"accent\" class=\"button1\" i18n=\"@@Button-Back\">Back</button>\n                        <button mat-flat-button color=\"primary\" (click)=\"onCreateShipmentClick()\" class=\"button2\" i18n=\"@@Button-CreateShipment\">Create shipment</button>                            \n                    </div>                                   \n                </div>                 \n            </mat-step>\n            <mat-step state=\"\">\n                <div fxLayout=\"column\" class=\"dialog-form-content\">\n                    <div fxLayout=\"column\" class=\"dialog-tab-input-container\">\n                        <div class=\"dialog-loading-shade\" *ngIf=\"isLoadingData\">\n                            <mat-spinner  diameter=\"50\" *ngIf=\"isLoadingData\"></mat-spinner>            \n                        </div>\n                        <div class=\"dialog-loading-spinner-text\" *ngIf=\"isLoadingData\">{{loadingText}}</div>\n                        <div class=\"dialog-complete-text\" *ngIf=\"!isLoadingData && createCompleted && !createError\">{{createCompletedText}}</div>\n                        <div class=\"dialog-error-caption\" *ngIf=\"!isLoadingData && createError\" i18n=\"@@ShipmentCreateFailed-Text\">Shipment create failed</div>\n                        <div class=\"dialog-error-text\" *ngIf=\"!isLoadingData && createError\">{{createErrorText}}</div>\n                    </div>                     \n                </div>\n                <div fxLayout=\"row\" fxFlex=\"100\" fxLayoutAlign=\"stretch\" fxLayoutAlign=\"end end\">\n                    <div fxLayout=\"row\" class=\"dialog-button-row\" fxFlex=\"100\" fxLayoutAlign=\"end center\">                            \n                        <button mat-flat-button matStepperPrevious color=\"accent\" class=\"button1\" [disabled]=\"isLoadingData || createCompleted\" i18n=\"@@Button-Back\">Back</button>\n                        <button mat-flat-button matStepperNext color=\"warn\" class=\"button2\" *ngIf=\"!isLoadingData && createError\" [disabled]=\"isLoadingData\" (click)=\"onCreateShipmentClick()\" i18n=\"@@Button-Retry\">Retry</button>\n                        <button mat-flat-button matStepperNext color=\"primary\" class=\"button2\" [disabled]=\"isLoadingData\" (click)=\"onClose()\" i18n=\"@@Button-Close\">Close</button>                            \n                    </div>                                   \n                </div>                 \n            </mat-step>                        \n        </mat-horizontal-stepper>        \n    </div>    \n  </div>\n\n  <dx-load-panel\n    #loadPanelMainContent\n    container=\"#shipment_dialog_container\"\n    [position]=\"{ of: '#shipment_dialog_container' }\"\n    [(visible)]=\"showLoadIndicator\"\n    [showIndicator]=\"true\"\n    [showPane]=\"true\"\n    [shading]=\"true\"    \n    [closeOnOutsideClick]=\"false\"></dx-load-panel>",
+                    template: "<div mat-dialog-container class=\"dialog-container\">\n    <!-- <mat-toolbar color=\"primary\" class=\"mat-elevation-z2 dialog-caption\" cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle>\n        <mat-card-header i18n=\"@@FieldCaption-CreateShipment\">Create shipment</mat-card-header>\n        <span class=\"dialog-caption-spacer\"></span>\n        <button mat-raised-button appMaterialElevation matTooltip=\"Close\" i18n-matTooltip=\"@@Action-Close\" aria-label=\"Close\" i18n-aria-label=\"@@Action-Close\" class=\"dialog-toolbar-button\" (click)=\"onCancel()\">\n          <svg-icon name=\"mobicloud_close\" svgClass=\"dialog-toolbar-button-icon\"></svg-icon>\n        </button>        \n    </mat-toolbar>     -->\n    <mat-toolbar color=\"primary\" class=\"mat-elevation-z2 dialog-caption\" cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle>\n        <mat-card-header>\n            <div class=\"toolbar-header-text-container\">\n                <svg-icon name=\"mobicloud_shipment\" svgClass=\"dialog-caption-icon\"></svg-icon><div i18n=\"@@FieldCaption-CreateShipment\" class=\"toolbar-header-text\">Create shipment</div>\n            </div>            \n        </mat-card-header>\n        <span class=\"dialog-caption-spacer\"></span>\n        <button mat-raised-button appMaterialElevation matTooltip=\"Close\" i18n-matTooltip=\"@@Action-Close\" aria-label=\"Close\" i18n-aria-label=\"@@Action-Close\" class=\"dialog-toolbar-button\" (click)=\"onCancel()\">\n          <svg-icon name=\"mobicloud_close\" svgClass=\"dialog-toolbar-button-icon\"></svg-icon>\n        </button>        \n    </mat-toolbar>      \n\n    <div #shipment_dialog_container id=\"shipment_dialog_container\" class=\"dialog-wizard-steps-container\">\n        <mat-horizontal-stepper [linear]=\"true\" #stepper class=\"dialog-wizard-steps\" (animationDone)=\"setFocus()\" labelPosition='bottom'>\n            <mat-step label=\"Lines\" i18n-label=\"@@CaptionHeader-Lines\" [editable]=\"!createCompleted\">\n                <div fxLayout=\"column\" class=\"dialog-form-content\">                           \n                    <div fxLayout=\"column\" class=\"dialog-tab-input-container\">\n                        <div class=\"invalid-message-Lines\" *ngIf=\"!pickingLinesSelectionValid\" i18n=\"@@ValidationText-NoShipmentPickingLinesSelected\">No lines has been selected for shipping</div>\n                        <dx-data-grid keyExpr=\"Id\" #datagrid_pickinglines id=\"datagrid_pickinglines\" [(selectedRowKeys)]=\"selectedPickingLinesKeys\" class=\"devex-grid-lb\" height=\"100%\" [dataSource]=\"pickingLines\" [showBorders]=\"false\" [showColumnLines]=\"false\" [showRowLines]=\"true\" [allowColumnReordering]=\"true\" [allowColumnResizing]=\"true\" [rowAlternationEnabled]=\"true\">\n                            <!-- <dxo-editing mode=\"batch\" refreshMode=\"full\" [selectTextOnEditStart]=\"true\" startEditAction=\"click\" [allowAdding]=\"false\" [allowUpdating]=\"false\" [allowDeleting]=\"false\" [confirmDelete]=\"true\"></dxo-editing> -->\n                            <dxo-column-chooser [enabled]=\"true\" mode=\"select\" title=\"Choose columns\" i18n-title=\"@@CaptionHeader-ColumnChooser\"></dxo-column-chooser>        \n                            <dxo-filter-row [visible]=\"true\"></dxo-filter-row> \n                            <dxo-header-filter [visible]=\"true\"></dxo-header-filter>\n                            <dxo-group-panel [visible]=\"false\" emptyPanelText=\"\"></dxo-group-panel>  \n                            <dxo-sorting mode=\"multiple\"></dxo-sorting>\n                            <dxo-selection [allowSelectAll]=\"true\" showCheckBoxesMode=\"always\" [mode]=\"allowSelectPickingLines ? 'multiple' : 'none'\"></dxo-selection>                            \n\n                            <dxo-toolbar>                \n                                <dxi-item location=\"after\">\n                                  <div *dxTemplate class=\"gridtoolbar-item-container\">\n                                    <dx-check-box [(value)]=\"returnLabelsEnabled\" [rtlEnabled]=\"false\" text=\"Return label\" i18n-text=\"@@FieldCaption-ReturnLabel\" (onValueChanged)=\"returnCheckBoxChanged($event)\" labelMode=\"static\" stylingMode=\"outlined\"></dx-check-box>\n                                  </div>\n                                </dxi-item>\n                \n                                <dxi-item name=\"columnChooserButton\"></dxi-item>\n                              </dxo-toolbar>                                 \n\n                            <dxi-column dataField=\"MetaData.Index\" [width]=\"40\" [visible]=\"true\" hidingPriority=\"99\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-LineNumber\" caption=\"#\" dataType=\"number\" [fixed]=\"true\" fixedPosition=\"left\"></dxi-column>\n                            <dxi-column dataField=\"LineId\" [visible]=\"true\" hidingPriority=\"20\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-LineId\" caption=\"Line id\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"SalesLine.LineId\" hidingPriority=\"92\" [visible]=\"false\" [showInColumnChooser]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-SalesLineId\" caption=\"Sales line id\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"ProductId\" hidingPriority=\"58\" [visible]=\"false\" [showInColumnChooser]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-ProductUId\" caption=\"Product uid\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Product\" hidingPriority=\"68\" [visible]=\"false\" [showInColumnChooser]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-Product\" caption=\"Product\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Product.ProductId\" [fixed]=\"true\" fixedPosition=\"left\" hidingPriority=\"100\" [visible]=\"true\" [showInColumnChooser]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-ProductId\" caption=\"Product id\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Product.Name\" hidingPriority=\"94\" [visible]=\"true\" [showInColumnChooser]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-ProductName\" caption=\"Product name\" dataType=\"string\"></dxi-column>        \n                            <dxi-column dataField=\"Product.SKU\" hidingPriority=\"54\" [visible]=\"true\" [showInColumnChooser]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-SKU\" caption=\"SKU\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Color\" hidingPriority=\"84\" [visible]=\"false\" [showInColumnChooser]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-Color\" caption=\"Color\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"ColorId\" hidingPriority=\"48\" [visible]=\"false\" [showInColumnChooser]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-ColorUId\" caption=\"Color uid\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Color.Code\" hidingPriority=\"82\" [visible]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-Color\" caption=\"Color\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Color.Name\" hidingPriority=\"46\" [visible]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-ColorName\" caption=\"Color name\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Size\" hidingPriority=\"78\" [visible]=\"false\" [showInColumnChooser]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-Size\" caption=\"Size\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"SizeId\" hidingPriority=\"44\" [visible]=\"false\" [showInColumnChooser]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-SizeUId\" caption=\"Size uid\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Size.Code\" hidingPriority=\"76\" [visible]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-Size\" caption=\"Size\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Size.Name\" hidingPriority=\"42\" [visible]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-SizeName\" caption=\"Size name\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Config\" hidingPriority=\"74\" [visible]=\"false\" [showInColumnChooser]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-Config\" caption=\"Config\" dataType=\"string\"></dxi-column>    \n                            <dxi-column dataField=\"ConfigId\" hidingPriority=\"40\" [visible]=\"false\" [showInColumnChooser]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-ConfigUId\" caption=\"Config uid\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Config.Code\" hidingPriority=\"72\" [visible]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-Config\" caption=\"Config\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Config.Name\" hidingPriority=\"38\" [visible]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-ConfigName\" caption=\"Config name\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"Qty\" hidingPriority=\"74\" [visible]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-Qty\" caption=\"Quantity\" dataType=\"number\"></dxi-column>\n                            <dxi-column dataField=\"QtyPick\" hidingPriority=\"96\" [visible]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-QtyPick\" caption=\"Quantity pick\" dataType=\"number\"></dxi-column>\n                            <dxi-column dataField=\"Note\" hidingPriority=\"28\" [visible]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-Note\" caption=\"Note\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"SortCode\" hidingPriority=\"26\" [visible]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-SortCode\" caption=\"Sort code\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"WMSZone\" hidingPriority=\"24\" [visible]=\"false\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-WMSZone\" caption=\"WMS zone\" dataType=\"string\"></dxi-column>\n                            <dxi-column dataField=\"MetaData.Created\" hidingPriority=\"10\" [visible]=\"false\" [allowHeaderFiltering]=\"true\" i18n-caption=\"@@GridColumn-Created\" caption=\"Created\" dataType=\"date\"></dxi-column>\n                            <dxo-summary>\n                                <dxi-total-item column=\"Qty\" summaryType=\"sum\" displayFormat=\"{0}\"></dxi-total-item>\n                                <dxi-total-item column=\"QtyPick\" summaryType=\"sum\" displayFormat=\"{0}\"></dxi-total-item>\n                            </dxo-summary>                \n                            <dxi-column type=\"buttons\" [allowHiding]=\"false\" [fixed]=\"true\" fixedPosition=\"right\">\n                            </dxi-column>\n                            <!-- <dxi-column type=\"adaptive\" [allowHiding]=\"false\" cellTemplate=\"adaptiveCellTemplate\" [fixed]=\"true\" fixedPosition=\"right\"></dxi-column> -->\n                        \n                            <!-- Templates -->\n                        \n                            <div *dxTemplate=\"let column of 'adaptiveCellTemplate'\">\n                              <button aria-label=\"Collapse/Expand\" mat-icon-button (click)=\"column.component.isAdaptiveDetailRowExpanded(column.row.key) ? column.component.collapseAdaptiveDetailRow() : column.component.expandAdaptiveDetailRow(column.row.key);\">\n                                <mat-icon *ngIf=\"!column.component.isAdaptiveDetailRowExpanded(column.row.key)\" svgIcon=\"mobicloud_expand_arrows\" class=\"expand_gridrow\"></mat-icon>\n                                <mat-icon *ngIf=\"column.component.isAdaptiveDetailRowExpanded(column.row.key)\" svgIcon=\"mobicloud_collapse_arrows\" class=\"collapse_gridrow\"></mat-icon>\n                              </button>      \n                            </div>\n                         \n                            <dxo-paging [enabled]=\"false\"></dxo-paging>\n                        </dx-data-grid>                        \n                    </div>                                                                                                 \n                </div>\n                <div fxLayout=\"row\" fxFlex=\"100\" fxLayoutAlign=\"stretch\" fxLayoutAlign=\"end end\">\n                    <div fxLayout=\"row\" class=\"dialog-button-row\" fxFlex=\"100\" fxLayoutAlign=\"end center\">\n                        <button mat-flat-button color=\"accent\" (click)=\"onCancel()\" class=\"button1\" i18n=\"@@Button-Cancel\">Cancel</button>\n                        <button mat-flat-button color=\"primary\" (click)=\"onClick_Lines()\" class=\"button2\" i18n=\"@@Button-Next\">Next</button>\n                    </div>                                   \n                </div>                 \n            </mat-step>\n            <mat-step label=\"Sender\" i18n-label=\"@@CaptionHeader-Sender\" [editable]=\"!createCompleted\">\n                <div fxLayout=\"column\" class=\"dialog-form-content\">\n                    <div fxLayout=\"column\" class=\"dialog-tab-input-container\">\n                        <dx-select-box id=\"custom-templates\" class=\"sender-selectbox\" [dataSource]=\"inventLocation_ds\" displayExpr=\"Name\" [value]=\"inventLocationId\" [showClearButton]=\"true\" (onValueChanged)=\"senderSelectbox_onValueChanged($event)\">\n                        <div *dxTemplate=\"let data of 'item'\">\n                          <div class=\"custom-item\">\n                            <!-- <img src=\"{{ data.ImageSrc }}\" /> -->\n                            <div>\n                              {{ data.Name }} (test)\n                            </div>\n                          </div>\n                        </div>\n                      </dx-select-box>                        \n                        <fieldset class=\"shipment-fieldset-default shipment-fieldset-address\">\n                            <legend class=\"shipment-legend-default\" i18n=\"@@FieldCaption-Sender\">Sender</legend>\n                            <dx-form #form_Sender id=\"form_Sender\" [colCount]=\"2\" [formData]=\"formInstanceShipment\" validationGroup=\"formSender\" [showColonAfterLabel]=\"false\" labelMode=\"static\" labelLocation=\"top\" [showValidationSummary]=\"false\" [showRequiredMark] = \"false\">\n                    \n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"2\" [colSpan]=\"2\">\n                                    <dxi-item dataField=\"Sender_Name\" [colSpan]=\"2\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'organization'} }\">                        \n                                        <dxo-label text=\"Name\" i18n-text=\"@@FieldCaption-Name\"></dxo-label>\n                                        <dxi-validation-rule type=\"required\" message=\"Name is required\" i18n-text=\"@@ValidationText-Name-Required\"></dxi-validation-rule>                \n                                    </dxi-item>\n                                    <dxi-item dataField=\"Sender_Attention\" [colSpan]=\"2\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'given-name'} }\">\n                                        <dxo-label text=\"Attention\" i18n-text=\"@@FieldCaption-Attention\"></dxo-label>\n                                    </dxi-item>                                                                                  \n                                </dxi-item>  \n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"2\" [colSpan]=\"2\">\n                                    <dxi-item dataField=\"Sender_Address1\" [colSpan]=\"2\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'address-line1'} }\">\n                                        <dxo-label text=\"Address\" i18n-text=\"@@FieldCaption-Address\"></dxo-label>\n                                        <dxi-validation-rule type=\"required\" message=\"Address is required\" i18n-text=\"@@ValidationText-Address-Required\"></dxi-validation-rule>                \n                                    </dxi-item>                                  \n                                    <dxi-item dataField=\"Sender_Zipcode\" [editorOptions]=\"{ elementAttr: {autocomplete: 'postal-code'} }\">\n                                        <dxo-label text=\"ZipCode\" i18n-text=\"@@FieldCaption-ZipCode\"></dxo-label> \n                                        <dxi-validation-rule type=\"required\" message=\"Zip code is required\" i18n-text=\"@@ValidationText-ZipCode-Required\"></dxi-validation-rule>               \n                                    </dxi-item> \n                                    <dxi-item dataField=\"Sender_City\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'address-level2'} }\">\n                                        <dxo-label text=\"City\" i18n-text=\"@@FieldCaption-City\"></dxo-label> \n                                        <dxi-validation-rule type=\"required\" message=\"City is required\" i18n-text=\"@@ValidationText-City-Required\"></dxi-validation-rule>               \n                                    </dxi-item>                                                                                                               \n                                </dxi-item>\n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"1\" [colSpan]=\"2\">\n                                    <dxi-item dataField=\"Sender_CountryCode\">\n                                        <dxo-label text=\"Country\" i18n-text=\"@@FieldCaption-Country\"></dxo-label>  \n                                        <div *dxTemplate=\"let data of 'content'\">\n                                            <dx-drop-down-box [deferRendering]=\"true\" [showClearButton]=\"true\" [readOnly]=\"false\" fieldTemplate=\"fieldTemplate\"\n                                                [dataSource]=\"sender_country_ds\"                   \n                                                [(value)]=\"_senderCountryId\"\n                                                valueExpr=\"Code2\"                \n                                                displayExpr=\"LocalName\"                                    \n                                                [(opened)]=\"_senderCountryOpened\"> \n                                                <dxo-drop-down-options title=\"Countries\" i18n-title=\"@@FieldCaption-Countries\" [showTitle]=\"true\" [fullScreen]=\"false\" [showCloseButton]=\"true\">\n                                            </dxo-drop-down-options>                                       \n                                                <dx-data-grid [filterRow]=\"{ visible: true }\" [scrolling]=\"{ mode: 'standard' }\" [selection]=\"{ mode: 'single' }\" height=\"100%\" [hoverStateEnabled]=\"true\"\n                                                    [dataSource]=\"sender_country_ds\"\n                                                    [(selectedRowKeys)]=\"_senderCountryId\"\n                                                    (onSelectionChanged)=\"senderCountryChanged($event)\"\n                                                    (onRowClick)=\"_senderCountryOpened = false\">\n                                                    <dxi-column dataField=\"Code2\" [allowFiltering]=\"false\" [allowSorting]=\"false\" cellTemplate=\"imgCellTemplate\" all [width]=\"50\" caption=\"\"></dxi-column>\n                                                    <dxi-column dataField=\"LocalName\" i18n-caption=\"@@GridColumn-Name\" caption=\"Name\"></dxi-column>\n                                                    <dxo-paging [enabled]=\"false\"></dxo-paging>\n                                                    <div *dxTemplate=\"let data of 'imgCellTemplate'\">\n                                                        <img alt=\"\" [src]=\"data.value | countryCodeToFlagUrl\"/>\n                                                    </div>\n                                                </dx-data-grid>\n                                                <div *dxTemplate=\"let data of 'fieldTemplate'\">\n                                                    <div class=\"country-edit-item\">\n                                                        <div class=\"country-edit-image\"><img alt=\"\" [src]=\"_selectedSenderCountry?.Code2 | countryCodeToFlagUrl\" *ngIf=\"_selectedSenderCountry?.Code2\"></div>\n                                                        <div class=\"country-edit-text\">\n                                                            <dx-text-box stylingMode=\"filled\" [value]=\"_selectedSenderCountry?.Code2 | countryCodeToName\" [readOnly]=\"true\"></dx-text-box>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </dx-drop-down-box>\n                                        </div>   \n                                        <dxi-validation-rule type=\"required\" message=\"Country is required\" i18n-text=\"@@ValidationText-Country-Required\"></dxi-validation-rule>\n                                    </dxi-item>                                                                                  \n                                </dxi-item>                                    \n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"2\" [colSpan]=\"2\">\n                                    <dxi-item dataField=\"Sender_Email\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'email'} }\">\n                                        <dxo-label text=\"Email\" i18n-text=\"@@FieldCaption-Email\"></dxo-label>        \n                                        <dxi-validation-rule type=\"required\" message=\"Email is required\" i18n-message=\"@@ValidationText-Email-Required\"></dxi-validation-rule>\n                                        <dxi-validation-rule type=\"email\" message=\"Email is invalid\" i18n-message=\"@@ValidationText-Email-Invalid\"></dxi-validation-rule>                                                                       \n                                    </dxi-item> \n                                    <dxi-item dataField=\"Sender_Mobile\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'tel'} }\">\n                                        <dxo-label text=\"Mobile phone\" i18n-text=\"@@FieldCaption-MobilePhone\"></dxo-label> \n                                        <dxi-validation-rule type=\"required\" message=\"Phone is required\" i18n-message=\"@@ValidationText-Phone-Required\"></dxi-validation-rule>\n                                    </dxi-item>                                                                                   \n                                </dxi-item>                                                                                    \n                            </dx-form>                            \n                        </fieldset>                       \n                    </div>                                                                    \n                </div>\n                <div fxLayout=\"row\" fxFlex=\"100\" fxLayoutAlign=\"stretch\" fxLayoutAlign=\"end end\">\n                    <div fxLayout=\"row\" class=\"dialog-button-row\" fxFlex=\"100\" fxLayoutAlign=\"end center\">\n                        <button mat-flat-button matStepperPrevious color=\"accent\" class=\"button1\" i18n=\"@@Button-Back\">Back</button>\n                        <!-- <button mat-flat-button color=\"accent\" (click)=\"onCancel()\" class=\"button1\" i18n=\"@@Button-Cancel\">Cancel</button> -->\n                        <button mat-flat-button color=\"primary\" (click)=\"onClick_Sender()\" class=\"button2\" i18n=\"@@Button-Next\">Next</button>                            \n                    </div>                                   \n                </div>                \n            </mat-step>\n            <mat-step label=\"Receiver\" i18n-label=\"@@CaptionHeader-Receiver\" [editable]=\"!createCompleted\">\n                <div fxLayout=\"column\" class=\"dialog-form-content\">\n                    <div fxLayout=\"column\" class=\"dialog-tab-input-container\">\n                        <fieldset class=\"shipment-fieldset-default shipment-fieldset-address\">\n                            <legend class=\"shipment-legend-default\" i18n=\"@@FieldCaption-Receiver\">Receiver</legend>\n                            <dx-form #form_Receiver id=\"form_Receiver\" [colCount]=\"2\" [formData]=\"formInstanceShipment\" validationGroup=\"formReceiver\" [showColonAfterLabel]=\"false\" labelMode=\"static\" labelLocation=\"top\" [showValidationSummary]=\"false\" [showRequiredMark] = \"false\">\n                    \n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"2\" [colSpan]=\"2\">\n                                    <dxi-item dataField=\"Receiver_Name\" [colSpan]=\"2\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'organization'} }\">                        \n                                        <dxo-label text=\"Company\" i18n-text=\"@@FieldCaption-Company\"></dxo-label>\n                                        <!-- <dxi-validation-rule type=\"required\" message=\"Name is required\" i18n-text=\"@@ValidationText-Name-Required\"></dxi-validation-rule> -->\n                                    </dxi-item>\n                                    <dxi-item dataField=\"Receiver_Attention\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'given-name'} }\">\n                                        <dxo-label text=\"First name\" i18n-text=\"@@FieldCaption-Firstname\"></dxo-label>\n                                        <dxi-validation-rule type=\"required\" message=\"First name is required\" i18n-text=\"@@ValidationText-FirstName-Required\"></dxi-validation-rule>\n                                    </dxi-item>  \n                                    <dxi-item dataField=\"Receiver_Telephone\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'family-name'} }\">\n                                        <dxo-label text=\"Last name\" i18n-text=\"@@FieldCaption-Lastname\"></dxo-label>\n                                        <dxi-validation-rule type=\"required\" message=\"Last name is required\" i18n-text=\"@@ValidationText-LastName-Required\"></dxi-validation-rule>\n                                    </dxi-item>                                                                                                                    \n                                </dxi-item>  \n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"2\" [colSpan]=\"2\">\n                                    <dxi-item dataField=\"Receiver_Address1\" [colSpan]=\"2\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'address-line1'} }\">\n                                        <dxo-label text=\"Address\" i18n-text=\"@@FieldCaption-Address\"></dxo-label>\n                                        <dxi-validation-rule type=\"required\" message=\"Address is required\" i18n-text=\"@@ValidationText-Address-Required\"></dxi-validation-rule>                \n                                    </dxi-item>                                  \n                                    <dxi-item dataField=\"Receiver_Zipcode\" [editorOptions]=\"{ elementAttr: {autocomplete: 'postal-code'} }\">\n                                        <dxo-label text=\"ZipCode\" i18n-text=\"@@FieldCaption-ZipCode\"></dxo-label> \n                                        <dxi-validation-rule type=\"required\" message=\"Zip code is required\" i18n-text=\"@@ValidationText-ZipCode-Required\"></dxi-validation-rule>               \n                                    </dxi-item> \n                                    <dxi-item dataField=\"Receiver_City\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'address-level2'} }\">\n                                        <dxo-label text=\"City\" i18n-text=\"@@FieldCaption-City\"></dxo-label> \n                                        <dxi-validation-rule type=\"required\" message=\"City is required\" i18n-text=\"@@ValidationText-City-Required\"></dxi-validation-rule>               \n                                    </dxi-item>                                                                                                               \n                                </dxi-item>\n                                <dxi-item itemType=\"group\" caption=\"\" [colSpan]=\"2\">\n                                    <dxi-item dataField=\"Receiver_CountryCode\">\n                                        <dxo-label text=\"Country\" i18n-text=\"@@FieldCaption-Country\"></dxo-label>  \n                                        <div *dxTemplate=\"let data of 'content'\">\n                                            <dx-drop-down-box [deferRendering]=\"true\" [showClearButton]=\"true\" [readOnly]=\"false\" fieldTemplate=\"fieldTemplate\"\n                                                [dataSource]=\"receiver_country_ds\"                   \n                                                [(value)]=\"_receiverCountryId\"\n                                                valueExpr=\"Code2\"                \n                                                displayExpr=\"LocalName\"                                    \n                                                [(opened)]=\"_receiverCountryOpened\"> \n                                                <dxo-drop-down-options title=\"Countries\" i18n-title=\"@@FieldCaption-Countries\" [showTitle]=\"true\" [fullScreen]=\"false\" [showCloseButton]=\"true\">\n                                            </dxo-drop-down-options>                                       \n                                                <dx-data-grid [filterRow]=\"{ visible: true }\" [scrolling]=\"{ mode: 'standard' }\" [selection]=\"{ mode: 'single' }\" height=\"100%\" [hoverStateEnabled]=\"true\"\n                                                    [dataSource]=\"receiver_country_ds\"\n                                                    [(selectedRowKeys)]=\"_receiverCountryId\"\n                                                    (onSelectionChanged)=\"receiverCountryChanged($event)\"\n                                                    (onRowClick)=\"_receiverCountryOpened = false\">\n                                                    <dxi-column dataField=\"Code2\" [allowFiltering]=\"false\" [allowSorting]=\"false\" cellTemplate=\"imgCellTemplate\" all [width]=\"50\" caption=\"\"></dxi-column>\n                                                    <dxi-column dataField=\"LocalName\" i18n-caption=\"@@GridColumn-Name\" caption=\"Name\"></dxi-column>\n                                                    <dxo-paging [enabled]=\"false\"></dxo-paging>\n                                                    <div *dxTemplate=\"let data of 'imgCellTemplate'\">\n                                                        <img alt=\"\" [src]=\"data.value | countryCodeToFlagUrl\"/>\n                                                    </div>\n                                                </dx-data-grid>\n                                                <div *dxTemplate=\"let data of 'fieldTemplate'\">\n                                                    <div class=\"country-edit-item\">\n                                                        <div class=\"country-edit-image\"><img alt=\"\" [src]=\"_selectedReceiverCountry?.Code2 | countryCodeToFlagUrl\" *ngIf=\"_selectedReceiverCountry?.Code2\"></div>\n                                                        <div class=\"country-edit-text\">\n                                                            <dx-text-box stylingMode=\"filled\" [value]=\"_selectedReceiverCountry?.Code2 | countryCodeToName\" [readOnly]=\"true\"></dx-text-box>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </dx-drop-down-box>\n                                        </div>   \n                                        <dxi-validation-rule type=\"required\" message=\"Country is required\" i18n-text=\"@@ValidationText-Country-Required\"></dxi-validation-rule>\n                                    </dxi-item>                                                                                                                    \n                                </dxi-item>                                    \n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"2\" [colSpan]=\"2\">\n                                    <dxi-item dataField=\"Receiver_Email\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'email'} }\">\n                                        <dxo-label text=\"Email\" i18n-text=\"@@FieldCaption-Email\"></dxo-label> \n                                        <dxi-validation-rule type=\"required\" message=\"Email is required\" i18n-message=\"@@ValidationText-Email-Required\"></dxi-validation-rule>\n                                        <dxi-validation-rule type=\"email\" message=\"Email is invalid\" i18n-message=\"@@ValidationText-Email-Invalid\"></dxi-validation-rule>                                                                              \n                                    </dxi-item>   \n                                    <dxi-item dataField=\"Receiver_Mobile\" [editorOptions]=\"{ inputAttr: {'autocomplete': 'tel'} }\">\n                                        <dxo-label text=\"Mobile phone\" i18n-text=\"@@FieldCaption-MobilePhone\"></dxo-label> \n                                        <dxi-validation-rule type=\"required\" message=\"Phone is required\" i18n-message=\"@@ValidationText-Phone-Required\"></dxi-validation-rule>\n                                    </dxi-item>                                    \n                                </dxi-item>                                                                                                                   \n                            </dx-form>                               \n                        </fieldset>                         \n                    </div>                                                                    \n                </div>\n                <div fxLayout=\"row\" fxFlex=\"100\" fxLayoutAlign=\"stretch\" fxLayoutAlign=\"end end\">\n                    <div fxLayout=\"row\" class=\"dialog-button-row\" fxFlex=\"100\" fxLayoutAlign=\"end center\">\n                        <button mat-flat-button matStepperPrevious color=\"accent\" class=\"button1\" i18n=\"@@Button-Back\">Back</button>\n                        <button mat-flat-button color=\"primary\" (click)=\"onClick_Receiver()\" class=\"button2\" i18n=\"@@Button-Next\">Next</button>                            \n                    </div>                                   \n                </div>                \n            </mat-step>            \n            <mat-step label=\"Packages\" i18n-label=\"@@CaptionHeader-Packages\" [editable]=\"!createCompleted\">\n                <div fxLayout=\"column\" class=\"dialog-form-content\">\n                    <div fxLayout=\"column\" class=\"dialog-tab-input-container\">\n                        <div class=\"invalid-message-Lines\" *ngIf=\"!boxesSelectionValid\" i18n=\"@@ValidationText-NoShipmentBoxesSelected\">No boxes has been selected for shipping</div>\n                        <div class=\"invalid-message-Lines\" *ngIf=\"!productBoxesQuantityValid\" i18n=\"@@ValidationText-ProductBoxesQuantityInvalid\">Product quantities in the boxes is invalid</div>\n                        <dx-data-grid #selectedBoxesList id=\"selectedBoxesList\" keyExpr=\"Id\" class=\"devex-grid-lb\" height=\"100%\" [dataSource]=\"selectedBoxes\" [showBorders]=\"false\" [showColumnLines]=\"false\" [showRowLines]=\"true\" [allowColumnReordering]=\"true\" [allowColumnResizing]=\"true\" [rowAlternationEnabled]=\"true\" (onInitNewRow)=\"onInitNewRow_Boxes($event)\">\n                            <dxo-paging [enabled]=\"false\"></dxo-paging>\n                            <dxo-editing mode=\"cell\" [allowUpdating]=\"true\" [allowAdding]=\"true\" [allowDeleting]=\"true\" [selectTextOnEditStart]=\"true\">\n                            </dxo-editing>\n                            <dxo-toolbar>\n                                <dxi-item location=\"before\">\n                                    <dx-drop-down-button text=\"Add box\" i18n-text=\"@@Button-AddBox\" icon=\"box\" [items]=\"packagingBoxes\" displayExpr=\"Name\" (onItemClick)=\"onAddBoxButtonClick($event)\"></dx-drop-down-button>  \n                                </dxi-item>                            \n                                <dxi-item name=\"addRowButton\" cssClass=\"action-button\"></dxi-item>\n                                <dxi-item name=\"revertButton\" cssClass=\"action-button\"></dxi-item>\n                              </dxo-toolbar>\n\n                            <dxo-master-detail [enabled]=\"true\" template=\"detail\" [autoExpandAll]=\"true\" *ngIf=\"internationalShipping\"></dxo-master-detail>\n                            <div *dxTemplate=\"let row of 'detail'\">        \n                                <fieldset class=\"detailsgrid-fieldset-default\"> \n                                  <legend class=\"detailsgrid-legend-default\" i18n=\"@@FieldCaption-Products\">Products</legend>\n\n                                  <dx-data-grid keyExpr=\"PickingLine.Id\" class=\"devex-grid-lb\" height=\"100%\" [dataSource]=\"row.data.Lines\" [showBorders]=\"false\" [showColumnLines]=\"false\" [showRowLines]=\"true\" [allowColumnReordering]=\"true\" [allowColumnResizing]=\"true\" [rowAlternationEnabled]=\"true\">\n                                    <dxo-paging [enabled]=\"false\"></dxo-paging>\n                                    <dxo-editing mode=\"cell\" [allowUpdating]=\"true\" [allowAdding]=\"false\" [allowDeleting]=\"true\" [selectTextOnEditStart]=\"true\">\n                                    </dxo-editing>\n                                    <!-- <dxo-selection selectAllMode=\"allPages\" showCheckBoxesMode=\"always\" mode=\"multiple\" [allowSelectAll]=\"true\"></dxo-selection> -->\n                                    \n                                    <dxi-column dataField=\"PickingLine.Product.ProductId\" caption=\"Product id\" hidingPriority=\"100\" [allowEditing]=\"false\" i18n-caption=\"@@GridColumn-ProductId\" dataType=\"string\" [fixed]=\"true\" fixedPosition=\"left\"></dxi-column>\n                                    <dxi-column dataField=\"ParcelLine.Quantity\" caption=\"Quantity\" [allowEditing]=\"true\" hidingPriority=\"90\" i18n-caption=\"@@GridColumn-Quantity\" dataType=\"number\" format=\"#\" [editorOptions]=\"{ format: '#' }\" [fixed]=\"true\" fixedPosition=\"right\"></dxi-column>\n\n                                  </dx-data-grid>\n                                </fieldset>        \n                            </div>\n\n                            <dxi-column dataField=\"Quantity\" [visible]=\"!internationalShipping\" [showInColumnChooser]=\"!internationalShipping\" caption=\"Quantity\" hidingPriority=\"100\" i18n-caption=\"@@GridColumn-Quantity\" dataType=\"number\" format=\"#\" [editorOptions]=\"{ format: '#' }\" [fixed]=\"true\" fixedPosition=\"left\"></dxi-column>\n                            <dxi-column dataField=\"BoxType\" [setCellValue]=\"setCellValue_BoxType\" caption=\"Box type\" hidingPriority=\"90\" i18n-caption=\"@@GridColumn-BoxType\" dataType=\"string\" [fixed]=\"true\" fixedPosition=\"left\">\n                                <dxo-lookup\n                                    [dataSource]=\"packagingBoxType_ds\"\n                                    displayExpr=\"text\"\n                                    valueExpr=\"value\">\n                                </dxo-lookup>          \n                                <dxo-header-filter\n                                      [dataSource]=\"packagingBoxType_ds\">\n                                </dxo-header-filter>    \n                                <dxi-validation-rule type=\"required\" message=\"Box type is required\" i18n-message=\"@@ValidationText-BoxType-Required\"></dxi-validation-rule>  \n                            </dxi-column>                            \n                            <dxi-column dataField=\"Length_InCm\" hidingPriority=\"80\" i18n-caption=\"@@GridColumn-Length_CM\" caption=\"Length (cm)\" dataType=\"number\" format=\"#\" [editorOptions]=\"{ format: '#' }\">\n                                <dxi-validation-rule type=\"required\" message=\"Length is required\" i18n-message=\"@@ValidationText-Length-Required\"></dxi-validation-rule>\n                            </dxi-column>\n                            <dxi-column dataField=\"Width_InCm\" hidingPriority=\"70\" i18n-caption=\"@@GridColumn-Width_CM\" caption=\"Width (cm)\" dataType=\"number\" format=\"#\" [editorOptions]=\"{ format: '#' }\">\n                                <dxi-validation-rule type=\"required\" message=\"Width is required\" i18n-message=\"@@ValidationText-Width-Required\"></dxi-validation-rule>\n                            </dxi-column>\n                            <dxi-column dataField=\"Height_InCm\" hidingPriority=\"60\" i18n-caption=\"@@GridColumn-Height_CM\" caption=\"Height (cm)\" dataType=\"number\" format=\"#\" [editorOptions]=\"{ format: '#' }\"></dxi-column>\n                            <dxi-column dataField=\"Weight_InKg\" hidingPriority=\"50\" i18n-caption=\"@@GridColumn-Weight_KG\" caption=\"Weight (kg)\" dataType=\"number\" format=\"#\" [editorOptions]=\"{ format: '#' }\">\n                                <dxi-validation-rule type=\"required\" message=\"Weight is required\" i18n-message=\"@@ValidationText-Weight-Required\"></dxi-validation-rule>\n                            </dxi-column>\n                            \n                        </dx-data-grid>                       \n                    </div> \n                </div>\n                <div fxLayout=\"row\" class=\"dialog-button-row\">\n                    <button mat-flat-button matStepperPrevious color=\"accent\" class=\"button1\" i18n=\"@@Button-Back\">Back</button>\n                    <button mat-flat-button color=\"primary\" (click)=\"onClick_Packages()\" class=\"button2\" i18n=\"@@Button-Next\">Next</button>                        \n                </div>                 \n            </mat-step>                          \n            <mat-step label=\"Carrier\" i18n-label=\"@@CaptionHeader-Carrier\" [optional]=\"false\" [editable]=\"!createCompleted\">\n                <div fxLayout=\"column\" class=\"dialog-form-content\">   \n                    <div fxLayout=\"column\" class=\"dialog-tab-input-container\">\n\n                        <div class=\"carrier-info\" *ngIf=\"shipmentProviderType == 'Webshipper'\">\n                            <div class=\"carrier\">\n                                <dx-select-box id=\"carrierSelectbox\" [dataSource]=\"shipmentCarriers\" label=\"Carrier\" i18n-label=\"@@FieldCaption-Carrier\" labelMode=\"static\" displayExpr=\"name\" valueExpr=\"id\" [(value)]=\"selectedCarrierId\" (onSelectionChanged)=\"onCarrierSelectionChanged($event)\">\n                                    <div *dxTemplate=\"let data of 'item'\">\n                                        <div class=\"carrier-item\">\n                                            <div class=\"carrier-name\">\n                                                {{data?.name}}\n                                            </div>\n                                        </div>\n                                    </div>                                        \n                                </dx-select-box> \n                            </div>                            \n                        </div>                        \n\n                        <div fxLayout=\"row\" class=\"shipment-products-container\">\n                            <fieldset [ngClass]=\"{'shipment-fieldset-default shipment-fieldset-shipment-products':!servicePointRequired, 'shipment-fieldset-default shipment-fieldset-shipment-products-withservice':servicePointRequired}\">\n                                <legend class=\"shipment-legend-default\" i18n=\"@@FieldCaption-CarrierProducts\">Carrier products</legend>\n                                <dx-validation-summary validationGroup=\"ProductCode\"></dx-validation-summary>\n                                <dx-list #shipmentProducList keyExpr=\"product_code\" [dataSource]=\"shipmentProducts\" selectionMode=\"single\" showScrollbar=\"always\" [showSelectionControls]=\"true\" [(selectedItemKeys)]=\"selectedShipmentProducts\" (onSelectionChanged)=\"onShipmentProductSelectionChanged($event)\">\n                                    <div *dxTemplate=\"let item of 'item'\">\n                                        <div class=\"shipment-product-item\">                                  \n                                            <div class=\"shipment-product-item-name\">{{ item.name }}</div>\n                                            <div class=\"shipment-product-item-info\">\n                                                <div class=\"shipment-product-item-price\">\n                                                    <!-- <span class=\"item-caption\">Price</span><span class=\"item-caption-colon\">:</span><div class=\"item-value\">{{item.price_amount | currency:item.price_currency:\"symbol\"}}</div> -->\n                                                    <span class=\"item-caption\">Price</span><span class=\"item-caption-colon\">:</span><div class=\"item-value\">{{item.price_currency}} {{item.price_amount}}</div>\n                                                </div>\n                                                <div class=\"shipment-product-item-transit\">\n                                                    <span class=\"item-caption\">Transit time</span><span class=\"item-caption-colon\">:</span><span class=\"item-value\">{{ item.transit_time }}</span>                                                    \n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <dx-validator [adapter]=\"validationConfig_ProductCode\" validationGroup=\"ProductCode\">\n                                        <dxi-validation-rule type=\"required\" message=\"Carrier product is required\" i18n-message=\"@@ValidationText-CarrierProduct-Required\"></dxi-validation-rule>\n                                    </dx-validator>\n                                </dx-list>                                 \n                            </fieldset>\n                            <fieldset class=\"shipment-fieldset-default shipment-fieldset-shipment-servicepoint\" *ngIf=\"selectedShippingProduct?.service_point_required\">\n                                <legend class=\"shipment-legend-default\" i18n=\"@@FieldCaption-ParcelShop\">Parcel shop</legend>\n                                    <dx-validation-summary validationGroup=\"ServicePoint\"></dx-validation-summary>\n                                    <dx-select-box id=\"servicePointsSelectbox\" [dataSource]=\"servicePoints\" displayExpr=\"name\" [(value)]=\"selectedServicePoint\" (onSelectionChanged)=\"onServicePointSelectionChanged($event)\">\n                                        <div *dxTemplate=\"let data of 'item'\">\n                                            <div class=\"servicepoint-item\">\n                                                <div class=\"servicepoint-name\">\n                                                {{ data.name }} <span>{{data.id ? ('(' + data.id + ') ') : ':'}} {{(data.distance | meterToKilometer) | number : '1.0-1'}}</span><span> km</span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <dx-validator [adapter]=\"validationConfig_ServicePoint\" validationGroup=\"ServicePoint\">\n                                            <dxi-validation-rule type=\"required\" message=\"Parcel shop is required for this carrier product\" i18n-message=\"@@ValidationText-ParcelShop-Required\"></dxi-validation-rule>\n                                        </dx-validator>                                        \n                                    </dx-select-box>                                      \n                                    <div class=\"dx-fieldset selected-service-point\">\n                                        <div class=\"field\">\n                                            <!-- <div class=\"field-label\" i18n=\"@@FieldCaption-Name\">Name:</div> -->\n                                            <div class=\"field-value\">\n                                            {{selectedServicePoint?.name}} {{selectedServicePoint?.id ? ('(' + selectedServicePoint?.id + ')') : ''}}\n                                            </div>\n                                        </div>\n                                        <div class=\"field\">\n                                            <!-- <div class=\"field-label\" i18n=\"@@FieldCaption-Address\">Address:</div> -->\n                                            <div class=\"field-value\">\n                                            {{selectedServicePoint?.address_line}}\n                                            </div>\n                                        </div> \n                                        <div class=\"field\">\n                                            <!-- <div class=\"field-label\" i18n=\"@@FieldCaption-ZipCode\">Zip code:</div> -->\n                                            <div class=\"field-value\">\n                                            {{selectedServicePoint?.zip_code}} {{selectedServicePoint?.city}}\n                                            </div>\n                                        </div>    \n                                        <!-- <div class=\"field\">\n                                            <div class=\"field-label\" i18n=\"@@FieldCaption-City\">City:</div>\n                                            <div class=\"field-value\">\n                                            {{selectedServicePoint?.city}}\n                                            </div>\n                                        </div>                                                                       -->\n                                        <div class=\"field\">\n                                            <!-- <div class=\"field-label\" i18n=\"@@FieldCaption-Country\">Country:</div> -->\n                                            <div class=\"field-value\">\n                                            {{selectedServicePoint?.country_code | countryCodeToName}}\n                                            </div>\n                                        </div>  \n                                        <div class=\"field\">\n                                            <!-- <div class=\"field-label\" i18n=\"@@FieldCaption-Distance\">Distance:</div> -->\n                                            <div class=\"field-value\">\n                                                <span *ngIf=\"selectedServicePoint?.distance\">{{(selectedServicePoint?.distance | meterToKilometer) | number : '1.0-1'}}</span><span *ngIf=\"selectedServicePoint?.distance\"> km</span>\n                                            </div>\n                                        </div>                                                                                                          \n                                    </div>                              \n                            </fieldset>\n                        </div> \n                        <fieldset class=\"shipment-fieldset-default shipment-fieldset-shipment-info\">\n                            <legend class=\"shipment-legend-default\" i18n=\"@@FieldCaption-ShippingInfo\">Shipping information</legend>\n                            <dx-form #form_ShippingInfo id=\"form_ShippingInfo\" [colCount]=\"1\" [formData]=\"formInstanceShipment\" validationGroup=\"formShippingInfo\" [showColonAfterLabel]=\"false\" labelMode=\"static\" labelLocation=\"top\" [showValidationSummary]=\"false\" [showRequiredMark] = \"false\">\n                    \n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"2\">\n                                    <dxi-item dataField=\"ShippingDate\" editorType=\"dxDateBox\">                        \n                                        <dxo-label text=\"Shipping date\" i18n-text=\"@@FieldCaption-ShippingDate\"></dxo-label>\n                                        <dxi-validation-rule type=\"required\" message=\"Shipping date is required\" i18n-text=\"@@ValidationText-ShippingDate-Required\"></dxi-validation-rule>                \n                                    </dxi-item> \n                                    <dxi-item dataField=\"Reference\">\n                                        <dxo-label text=\"Reference\" i18n-text=\"@@FieldCaption-Reference\"></dxo-label> \n                                    </dxi-item>                                                                                                                     \n                                </dxi-item>                                                                 \n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"2\">                                    \n                                    <dxi-item dataField=\"Remarks\" [colSpan]=\"1\">\n                                        <dxo-label text=\"Remarks\" i18n-text=\"@@FieldCaption-Remarks\"></dxo-label> \n                                    </dxi-item>   \n                                    <dxi-item [colSpan]=\"1\">\n                                        <div *dxTemplate=\"let data of 'content'\">\n                                            <dx-select-box id=\"printerSelectbox\" [dataSource]=\"printer_store\" label=\"Printer\" i18n-label=\"@@FieldCaption-Printer\" labelMode=\"static\" displayExpr=\"PrinterName\" valueExpr=\"Id\" [(value)]=\"selectedPrinterId\">\n                                                <div *dxTemplate=\"let data of 'item'\">\n                                                    <div class=\"printer-item\">\n                                                        <div class=\"printer-name\">\n                                                            {{data?.PrinterName}} {{ data?.GatewayInstallationName ? ('(' + data.GatewayInstallationName + ')') : ('') }}\n                                                        </div>\n                                                    </div>\n                                                </div>                                        \n                                            </dx-select-box> \n                                        </div>\n                                    </dxi-item>                                                                                                                    \n                                </dxi-item>\n                            </dx-form>                             \n                        </fieldset>\n                    </div>                                                                    \n                </div>\n                <div fxLayout=\"row\" fxFlex=\"100\" fxLayoutAlign=\"stretch\" fxLayoutAlign=\"end end\">\n                    <div fxLayout=\"row\" class=\"dialog-button-row\" fxFlex=\"100\" fxLayoutAlign=\"end center\">\n                        <button mat-flat-button matStepperPrevious color=\"accent\" class=\"button1\" i18n=\"@@Button-Back\">Back</button>\n                        <button mat-flat-button color=\"primary\" (click)=\"onCreateShipmentClick()\" class=\"button2\" i18n=\"@@Button-CreateShipment\">Create shipment</button>                            \n                    </div>                                   \n                </div>                 \n            </mat-step>\n            <mat-step state=\"\">\n                <div fxLayout=\"column\" class=\"dialog-form-content\">\n                    <div fxLayout=\"column\" class=\"dialog-tab-input-container\">\n                        <div class=\"dialog-loading-shade\" *ngIf=\"isLoadingData\">\n                            <mat-spinner  diameter=\"50\" *ngIf=\"isLoadingData\"></mat-spinner>            \n                        </div>\n                        <div class=\"dialog-loading-spinner-text\" *ngIf=\"isLoadingData\">{{loadingText}}</div>\n                        <div class=\"dialog-complete-text\" *ngIf=\"!isLoadingData && createCompleted && !createError\">{{createCompletedText}}</div>\n                        <div class=\"dialog-error-caption\" *ngIf=\"!isLoadingData && createError\" i18n=\"@@ShipmentCreateFailed-Text\">Shipment create failed</div>\n                        <div class=\"dialog-error-text\" *ngIf=\"!isLoadingData && createError\">{{createErrorText}}</div>\n                    </div>                     \n                </div>\n                <div fxLayout=\"row\" fxFlex=\"100\" fxLayoutAlign=\"stretch\" fxLayoutAlign=\"end end\">\n                    <div fxLayout=\"row\" class=\"dialog-button-row\" fxFlex=\"100\" fxLayoutAlign=\"end center\">                            \n                        <button mat-flat-button matStepperPrevious color=\"accent\" class=\"button1\" [disabled]=\"isLoadingData || createCompleted\" i18n=\"@@Button-Back\">Back</button>\n                        <button mat-flat-button matStepperNext color=\"warn\" class=\"button2\" *ngIf=\"!isLoadingData && createError\" [disabled]=\"isLoadingData\" (click)=\"onCreateShipmentClick()\" i18n=\"@@Button-Retry\">Retry</button>\n                        <button mat-flat-button matStepperNext color=\"primary\" class=\"button2\" [disabled]=\"isLoadingData\" (click)=\"onClose()\" i18n=\"@@Button-Close\">Close</button>                            \n                    </div>                                   \n                </div>                 \n            </mat-step>                        \n        </mat-horizontal-stepper>        \n    </div>    \n  </div>\n\n  <dx-load-panel\n    #loadPanelMainContent\n    container=\"#shipment_dialog_container\"\n    [position]=\"{ of: '#shipment_dialog_container' }\"\n    [(visible)]=\"showLoadIndicator\"\n    [showIndicator]=\"true\"\n    [showPane]=\"true\"\n    [shading]=\"true\"    \n    [closeOnOutsideClick]=\"false\"></dx-load-panel>",
                     styles: ["::ng-deep .mat-card-header{margin-left:-32px!important}.toolbar-header-text-container{display:flex}.toolbar-header-text{margin-top:5px;margin-left:8px}.dialog-caption-icon{pointer-events:none;fill:var(--default-toolbar-iconcolor);width:22px;height:22px;margin-top:10px}.dialog-form-content{min-height:506px!important}.dialog-form-content-address{margin-top:0!important}.shipment-fieldset-default{border:1px solid var(--default-datagrid-border-color);border-radius:7px;height:calc(100% - 280px);background-color:var(--default-groupbox-content-background);padding-top:5px}.shipment-legend-default{padding:.2em .5em;color:var(--default-textcolor-dark);font-weight:600;font-size:90%}.invalid-message-Lines{color:var(--default-textcolor-error);font-size:.85em}.shipment-fieldset-address{margin-bottom:20px}.sender-selectbox{margin-bottom:10px}.shipment-fieldset-shipment-products{border:1px solid var(--default-datagrid-border-color);border-radius:7px;width:100%;height:212px}.shipment-fieldset-shipment-products-withservice,.shipment-fieldset-shipment-servicepoint{width:50%;height:212px}.shipment-products-container .dx-list-item-content{font-size:12px;padding-top:0!important;padding-bottom:10px!important}.shipment-product-item-info{display:flex;font-style:italic}.shipment-product-item-price{display:flex}.shipment-product-item-price .item-value{margin-left:5px}.shipment-product-item-transit .item-caption{margin-left:20px}.shipment-product-item-transit .item-value{margin-left:5px}.shipment-fieldset-shipment-info{margin-top:5px;width:auto}.selected-service-point .field{display:flex;font-weight:400;font-size:12px;margin-bottom:6px}.selected-service-point .field-label{color:var(--default-textcolor-field-label);width:56px}.selected-service-point .field-value{margin-left:5px}.printer-info{display:flex;margin-top:30px;width:100%}.printer-info .print-labels{margin-right:20px;width:180px;padding-left:20px;padding-top:3px}.printer-info .printer{width:100%}.carrier-info{display:flex;margin-bottom:5px;width:100%}.carrier-info .carrier{width:100%}"]
                 },] }
     ];