mobicloud-core 1.0.44 → 1.0.48

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

@@ -3366,20 +3366,29 @@
         }
         PickinglistAddNewShipment.prototype.ngOnInit = function () {
             var _this = this;
+            this.createCompanyStore();
             this.createPickingListStore();
-            this.pickingList_store.load().then(function (pickingLists) {
-                var picking_list = pickingLists[0];
-                if (picking_list) {
-                    _this.initializePickingList(picking_list);
-                }
-                else {
+            this.company_store.load().then(function (companies) {
+                _this.company = companies[0];
+                _this.pickingList_store.load().then(function (pickingLists) {
+                    var picking_list = pickingLists[0];
+                    if (picking_list) {
+                        _this.initializePickingList(picking_list);
+                    }
+                    else {
+                        _this.showLoadIndicator = false;
+                        MessageBox.showError({ title: $localize(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject([":@@Failed-Text-InvalidPickingList:Invalid picking list"], [":@@Failed-Text-InvalidPickingList:Invalid picking list"]))), message: $localize(templateObject_11$7 || (templateObject_11$7 = __makeTemplateObject([":@@Failed-Text-InvalidPickingListForShipment:Picking list is not valid for shipment"], [":@@Failed-Text-InvalidPickingListForShipment:Picking list is not valid for shipment"]))) }, _this.matDialog);
+                    }
+                }, function (error) {
                     _this.showLoadIndicator = false;
-                    MessageBox.showError({ title: $localize(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject([":@@Failed-Text-InvalidPickingList:Invalid picking list"], [":@@Failed-Text-InvalidPickingList:Invalid picking list"]))), message: $localize(templateObject_11$7 || (templateObject_11$7 = __makeTemplateObject([":@@Failed-Text-InvalidPickingListForShipment:Picking list is not valid for shipment"], [":@@Failed-Text-InvalidPickingListForShipment:Picking list is not valid for shipment"]))) }, _this.matDialog);
-                }
+                    console.log(error);
+                    MessageBox.showError({ title: $localize(templateObject_12$7 || (templateObject_12$7 = __makeTemplateObject([":@@Failed-Text-InvalidPickingList:Invalid picking list"], [":@@Failed-Text-InvalidPickingList:Invalid picking list"]))), message: error }, _this.matDialog);
+                    _this.onCancel();
+                });
             }, function (error) {
                 _this.showLoadIndicator = false;
                 console.log(error);
-                MessageBox.showError({ title: $localize(templateObject_12$7 || (templateObject_12$7 = __makeTemplateObject([":@@Failed-Text-InvalidPickingList:Invalid picking list"], [":@@Failed-Text-InvalidPickingList:Invalid picking list"]))), message: error }, _this.matDialog);
+                MessageBox.showError({ title: $localize(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([":@@Failed-Text-CouldNotLoadCompany:Could not load company"], [":@@Failed-Text-CouldNotLoadCompany:Could not load company"]))), message: error }, _this.matDialog);
                 _this.onCancel();
             });
         };
@@ -3387,7 +3396,7 @@
             var _a, _b;
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_33) {
+                return __generator(this, function (_0) {
                     this.pickingList = picking_list;
                     if ((_a = this.pickingList.SalesOrder) === null || _a === void 0 ? void 0 : _a.SalesId) {
                         this.formInstanceShipment.Reference = (_b = this.pickingList.SalesOrder) === null || _b === void 0 ? void 0 : _b.SalesId;
@@ -3408,14 +3417,14 @@
                             _this.onPickingListInitialized();
                         }
                         else {
-                            MessageBox.showError({ title: $localize(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([":@@Failed-Text-NoPickingLines:No picking lines"], [":@@Failed-Text-NoPickingLines:No picking lines"]))), message: $localize(templateObject_14$5 || (templateObject_14$5 = __makeTemplateObject([":@@Failed-Text-NoPickingLinesOnPickingList:No shipable picking lines were found on picking list"], [":@@Failed-Text-NoPickingLinesOnPickingList:No shipable picking lines were found on picking list"]))) }, _this.matDialog);
+                            MessageBox.showError({ title: $localize(templateObject_14$5 || (templateObject_14$5 = __makeTemplateObject([":@@Failed-Text-NoPickingLines:No picking lines"], [":@@Failed-Text-NoPickingLines:No picking lines"]))), message: $localize(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject([":@@Failed-Text-NoPickingLinesOnPickingList:No shipable picking lines were found on picking list"], [":@@Failed-Text-NoPickingLinesOnPickingList:No shipable picking lines were found on picking list"]))) }, _this.matDialog);
                             _this.onCancel();
                         }
                     }, function (error) {
                         _this.showLoadIndicator = false;
                         _this.pickingLines = undefined;
                         console.log(error);
-                        MessageBox.showError({ title: $localize(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject([":@@Failed-Text-InvalidPickingLines:Not able to load picking lines"], [":@@Failed-Text-InvalidPickingLines:Not able to load picking lines"]))), message: error }, _this.matDialog);
+                        MessageBox.showError({ title: $localize(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject([":@@Failed-Text-InvalidPickingLines:Not able to load picking lines"], [":@@Failed-Text-InvalidPickingLines:Not able to load picking lines"]))), message: error }, _this.matDialog);
                         _this.onCancel();
                     });
                     return [2 /*return*/];
@@ -3430,7 +3439,7 @@
         PickinglistAddNewShipment.prototype.onPickingListInitialized = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_33) {
+                return __generator(this, function (_0) {
                     this.createLocationStore();
                     this.createInventLocationStore();
                     this.createCountryDataSource();
@@ -3459,30 +3468,66 @@
             this.updateSenderFields(e.value);
         };
         PickinglistAddNewShipment.prototype.updateSenderFields = function (inventLoc) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-            this.formInstanceShipment.Sender_Name = (_a = inventLoc === null || inventLoc === void 0 ? void 0 : inventLoc.Location) === null || _a === void 0 ? void 0 : _a.Name;
-            this.formInstanceShipment.Sender_Address1 = (_c = (_b = inventLoc === null || inventLoc === void 0 ? void 0 : inventLoc.Location) === null || _b === void 0 ? void 0 : _b.Address) === null || _c === void 0 ? void 0 : _c.Street;
-            this.formInstanceShipment.Sender_Zipcode = (_e = (_d = inventLoc === null || inventLoc === void 0 ? void 0 : inventLoc.Location) === null || _d === void 0 ? void 0 : _d.Address) === null || _e === void 0 ? void 0 : _e.ZipCode;
-            this.formInstanceShipment.Sender_City = (_g = (_f = inventLoc === null || inventLoc === void 0 ? void 0 : inventLoc.Location) === null || _f === void 0 ? void 0 : _f.Address) === null || _g === void 0 ? void 0 : _g.City;
-            this.formInstanceShipment.Sender_CountryCode = (_j = (_h = inventLoc === null || inventLoc === void 0 ? void 0 : inventLoc.Location) === null || _h === void 0 ? void 0 : _h.Address) === null || _j === void 0 ? void 0 : _j.Country;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            if ((_a = this.company) === null || _a === void 0 ? void 0 : _a.Name) {
+                this.formInstanceShipment.Sender_Name = this.company.Name;
+                this.formInstanceShipment.Sender_Attention = (_b = inventLoc === null || inventLoc === void 0 ? void 0 : inventLoc.Location) === null || _b === void 0 ? void 0 : _b.Name;
+            }
+            else {
+                this.formInstanceShipment.Sender_Name = (_c = inventLoc === null || inventLoc === void 0 ? void 0 : inventLoc.Location) === null || _c === void 0 ? void 0 : _c.Name;
+            }
+            this.formInstanceShipment.Sender_Address1 = (_e = (_d = inventLoc === null || inventLoc === void 0 ? void 0 : inventLoc.Location) === null || _d === void 0 ? void 0 : _d.Address) === null || _e === void 0 ? void 0 : _e.Street;
+            this.formInstanceShipment.Sender_Zipcode = (_g = (_f = inventLoc === null || inventLoc === void 0 ? void 0 : inventLoc.Location) === null || _f === void 0 ? void 0 : _f.Address) === null || _g === void 0 ? void 0 : _g.ZipCode;
+            this.formInstanceShipment.Sender_City = (_j = (_h = inventLoc === null || inventLoc === void 0 ? void 0 : inventLoc.Location) === null || _h === void 0 ? void 0 : _h.Address) === null || _j === void 0 ? void 0 : _j.City;
+            this.formInstanceShipment.Sender_CountryCode = (_l = (_k = inventLoc === null || inventLoc === void 0 ? void 0 : inventLoc.Location) === null || _k === void 0 ? void 0 : _k.Address) === null || _l === void 0 ? void 0 : _l.Country;
             this._senderCountryId = this.formInstanceShipment.Sender_CountryCode;
-            this.formInstanceShipment.Sender_Email = (_k = inventLoc === null || inventLoc === void 0 ? void 0 : inventLoc.Location) === null || _k === void 0 ? void 0 : _k.Email;
-            this.formInstanceShipment.Sender_Telephone = (_l = inventLoc === null || inventLoc === void 0 ? void 0 : inventLoc.Location) === null || _l === void 0 ? void 0 : _l.Phone;
+            this.formInstanceShipment.Sender_Email = (_m = inventLoc === null || inventLoc === void 0 ? void 0 : inventLoc.Location) === null || _m === void 0 ? void 0 : _m.Email;
+            this.formInstanceShipment.Sender_Telephone = (_o = inventLoc === null || inventLoc === void 0 ? void 0 : inventLoc.Location) === null || _o === void 0 ? void 0 : _o.Phone;
             this.formInstanceShipment.Sender_Mobile = undefined;
         };
         PickinglistAddNewShipment.prototype.updateReceiverFields = function () {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
             this.formInstanceShipment.Receiver_Name = (_b = (_a = this.pickingList.SalesOrder) === null || _a === void 0 ? void 0 : _a.Customer) === null || _b === void 0 ? void 0 : _b.Name;
-            this.formInstanceShipment.Receiver_Attention = (_f = (_e = (_d = (_c = this.pickingList.SalesOrder) === null || _c === void 0 ? void 0 : _c.Customer) === null || _d === void 0 ? void 0 : _d.ContactPerson) === null || _e === void 0 ? void 0 : _e.Name) !== null && _f !== void 0 ? _f : ((_j = (_h = (_g = this.pickingList.SalesOrder) === null || _g === void 0 ? void 0 : _g.Customer) === null || _h === void 0 ? void 0 : _h.DeliveryAddress) === null || _j === void 0 ? void 0 : _j.Name);
-            this.formInstanceShipment.Receiver_Address1 = (_m = (_l = (_k = this.pickingList.SalesOrder) === null || _k === void 0 ? void 0 : _k.DeliveryAddress) === null || _l === void 0 ? void 0 : _l.Street) !== null && _m !== void 0 ? _m : ((_r = (_q = (_p = (_o = this.pickingList.SalesOrder) === null || _o === void 0 ? void 0 : _o.Customer) === null || _p === void 0 ? void 0 : _p.DeliveryAddress) === null || _q === void 0 ? void 0 : _q.Street) !== null && _r !== void 0 ? _r : (_u = (_t = (_s = this.pickingList.SalesOrder) === null || _s === void 0 ? void 0 : _s.Customer) === null || _t === void 0 ? void 0 : _t.Address) === null || _u === void 0 ? void 0 : _u.Street);
-            this.formInstanceShipment.Receiver_Zipcode = (_x = (_w = (_v = this.pickingList.SalesOrder) === null || _v === void 0 ? void 0 : _v.DeliveryAddress) === null || _w === void 0 ? void 0 : _w.ZipCode) !== null && _x !== void 0 ? _x : ((_1 = (_0 = (_z = (_y = this.pickingList.SalesOrder) === null || _y === void 0 ? void 0 : _y.Customer) === null || _z === void 0 ? void 0 : _z.DeliveryAddress) === null || _0 === void 0 ? void 0 : _0.ZipCode) !== null && _1 !== void 0 ? _1 : (_4 = (_3 = (_2 = this.pickingList.SalesOrder) === null || _2 === void 0 ? void 0 : _2.Customer) === null || _3 === void 0 ? void 0 : _3.Address) === null || _4 === void 0 ? void 0 : _4.ZipCode);
-            this.formInstanceShipment.Receiver_City = (_7 = (_6 = (_5 = this.pickingList.SalesOrder) === null || _5 === void 0 ? void 0 : _5.DeliveryAddress) === null || _6 === void 0 ? void 0 : _6.City) !== null && _7 !== void 0 ? _7 : ((_11 = (_10 = (_9 = (_8 = this.pickingList.SalesOrder) === null || _8 === void 0 ? void 0 : _8.Customer) === null || _9 === void 0 ? void 0 : _9.DeliveryAddress) === null || _10 === void 0 ? void 0 : _10.City) !== null && _11 !== void 0 ? _11 : (_14 = (_13 = (_12 = this.pickingList.SalesOrder) === null || _12 === void 0 ? void 0 : _12.Customer) === null || _13 === void 0 ? void 0 : _13.Address) === null || _14 === void 0 ? void 0 : _14.City);
-            ;
-            this.formInstanceShipment.Receiver_CountryCode = (_17 = (_16 = (_15 = this.pickingList.SalesOrder) === null || _15 === void 0 ? void 0 : _15.DeliveryAddress) === null || _16 === void 0 ? void 0 : _16.Country) !== null && _17 !== void 0 ? _17 : ((_21 = (_20 = (_19 = (_18 = this.pickingList.SalesOrder) === null || _18 === void 0 ? void 0 : _18.Customer) === null || _19 === void 0 ? void 0 : _19.DeliveryAddress) === null || _20 === void 0 ? void 0 : _20.Country) !== null && _21 !== void 0 ? _21 : (_24 = (_23 = (_22 = this.pickingList.SalesOrder) === null || _22 === void 0 ? void 0 : _22.Customer) === null || _23 === void 0 ? void 0 : _23.Address) === null || _24 === void 0 ? void 0 : _24.Country);
-            this._receiverCountryId = this.formInstanceShipment.Receiver_CountryCode;
-            this.formInstanceShipment.Receiver_Email = (_26 = (_25 = this.pickingList.SalesOrder) === null || _25 === void 0 ? void 0 : _25.Customer) === null || _26 === void 0 ? void 0 : _26.Email;
-            this.formInstanceShipment.Receiver_Telephone = (_30 = (_29 = (_28 = (_27 = this.pickingList.SalesOrder) === null || _27 === void 0 ? void 0 : _27.Customer) === null || _28 === void 0 ? void 0 : _28.ContactPerson) === null || _29 === void 0 ? void 0 : _29.Email) !== null && _30 !== void 0 ? _30 : (_32 = (_31 = this.pickingList.SalesOrder) === null || _31 === void 0 ? void 0 : _31.Customer) === null || _32 === void 0 ? void 0 : _32.Email;
-            this.formInstanceShipment.Receiver_Mobile = undefined;
+            if ((_d = (_c = this.pickingList.SalesOrder) === null || _c === void 0 ? void 0 : _c.DeliveryAddress) === null || _d === void 0 ? void 0 : _d.Street) {
+                this.formInstanceShipment.Receiver_Address1 = this.pickingList.SalesOrder.DeliveryAddress.Street;
+                this.formInstanceShipment.Receiver_Zipcode = this.pickingList.SalesOrder.DeliveryAddress.ZipCode;
+                this.formInstanceShipment.Receiver_City = this.pickingList.SalesOrder.DeliveryAddress.City;
+                this.formInstanceShipment.Receiver_CountryCode = this.pickingList.SalesOrder.DeliveryAddress.Country;
+                this._receiverCountryId = this.formInstanceShipment.Receiver_CountryCode;
+            }
+            else {
+                this.formInstanceShipment.Receiver_Address1 = (_g = (_f = (_e = this.pickingList.SalesOrder) === null || _e === void 0 ? void 0 : _e.Customer) === null || _f === void 0 ? void 0 : _f.Address) === null || _g === void 0 ? void 0 : _g.Street;
+                this.formInstanceShipment.Receiver_Zipcode = (_k = (_j = (_h = this.pickingList.SalesOrder) === null || _h === void 0 ? void 0 : _h.Customer) === null || _j === void 0 ? void 0 : _j.Address) === null || _k === void 0 ? void 0 : _k.ZipCode;
+                this.formInstanceShipment.Receiver_City = (_o = (_m = (_l = this.pickingList.SalesOrder) === null || _l === void 0 ? void 0 : _l.Customer) === null || _m === void 0 ? void 0 : _m.Address) === null || _o === void 0 ? void 0 : _o.City;
+                this.formInstanceShipment.Receiver_CountryCode = (_r = (_q = (_p = this.pickingList.SalesOrder) === null || _p === void 0 ? void 0 : _p.Customer) === null || _q === void 0 ? void 0 : _q.Address) === null || _r === void 0 ? void 0 : _r.Country;
+                this._receiverCountryId = this.formInstanceShipment.Receiver_CountryCode;
+            }
+            var attention_name;
+            if ((_t = (_s = this.pickingList.SalesOrder) === null || _s === void 0 ? void 0 : _s.ContactPerson) === null || _t === void 0 ? void 0 : _t.Name) {
+                attention_name = this.pickingList.SalesOrder.ContactPerson.Name;
+                this.formInstanceShipment.Receiver_Email = this.pickingList.SalesOrder.ContactPerson.Email;
+                this.formInstanceShipment.Receiver_Mobile = this.pickingList.SalesOrder.ContactPerson.CellPhone;
+            }
+            else if ((_w = (_v = (_u = this.pickingList.SalesOrder) === null || _u === void 0 ? void 0 : _u.Customer) === null || _v === void 0 ? void 0 : _v.ContactPerson) === null || _w === void 0 ? void 0 : _w.Name) {
+                attention_name = (_z = (_y = (_x = this.pickingList.SalesOrder) === null || _x === void 0 ? void 0 : _x.Customer) === null || _y === void 0 ? void 0 : _y.ContactPerson) === null || _z === void 0 ? void 0 : _z.Name;
+                this.formInstanceShipment.Receiver_Email = this.pickingList.SalesOrder.Customer.Email;
+                this.formInstanceShipment.Receiver_Mobile = this.pickingList.SalesOrder.Customer.Phone;
+            }
+            if (attention_name) {
+                var attention_names = attention_name.split(" ");
+                if (attention_names.length > 1) {
+                    this.formInstanceShipment.Receiver_Attention = attention_names[0];
+                    this.formInstanceShipment.Receiver_Telephone = attention_names.slice(1).join(" ");
+                }
+                else {
+                    this.formInstanceShipment.Receiver_Attention = attention_name;
+                    this.formInstanceShipment.Receiver_Telephone = undefined;
+                }
+            }
+            else {
+                this.formInstanceShipment.Receiver_Attention = undefined;
+                this.formInstanceShipment.Receiver_Telephone = undefined;
+            }
         };
         PickinglistAddNewShipment.prototype.setFocus = function () {
             var _a, _b, _c, _d;
@@ -3526,6 +3571,7 @@
         };
         PickinglistAddNewShipment.prototype.onClick_Receiver = function () {
             var validateResult = validationEngine__default['default'].validateGroup("formReceiver");
+            console.log(this.formInstanceShipment.Receiver_Attention, this.formInstanceShipment.Receiver_Telephone);
             if (validateResult === null || validateResult === void 0 ? void 0 : validateResult.isValid) {
                 this.stepper.next();
             }
@@ -3545,7 +3591,7 @@
                     }, function (error) {
                         _this.showLoadIndicator = false;
                         console.log(error);
-                        MessageBox.showError({ title: $localize(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject([":@@Failed-Text-Error-LoadingShipmentProducts:Error loading shipment products"], [":@@Failed-Text-Error-LoadingShipmentProducts:Error loading shipment products"]))), message: error }, _this.matDialog);
+                        MessageBox.showError({ title: $localize(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject([":@@Failed-Text-Error-LoadingShipmentProducts:Error loading shipment products"], [":@@Failed-Text-Error-LoadingShipmentProducts:Error loading shipment products"]))), message: error }, _this.matDialog);
                     });
                 });
             }
@@ -3556,7 +3602,7 @@
         };
         PickinglistAddNewShipment.prototype.onInitNewRow_Boxes = function (e) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_33) {
+                return __generator(this, function (_0) {
                     e.data = Object.assign(new PackagingBoxEntry(), e.data);
                     e.data.Id = new Guid__default['default']();
                     e.data.Quantity = 1;
@@ -3581,7 +3627,7 @@
         PickinglistAddNewShipment.prototype.setCellValue_BoxType = function (newData, value, currentRowData) {
             return __awaiter(this, void 0, void 0, function () {
                 var packagingType;
-                return __generator(this, function (_33) {
+                return __generator(this, function (_0) {
                     newData.BoxType = value;
                     packagingType = value;
                     console.log(packagingType);
@@ -3686,7 +3732,7 @@
         PickinglistAddNewShipment.prototype.create_Shipment_Receiver = function () {
             var receiver = Object.assign(new Shipment_Receiver(), {});
             receiver.address1 = this.formInstanceShipment.Receiver_Address1;
-            receiver.attention = this.formInstanceShipment.Receiver_Attention;
+            receiver.attention = this.formInstanceShipment.Receiver_Attention + ' ' + this.formInstanceShipment.Receiver_Telephone;
             receiver.city = this.formInstanceShipment.Receiver_City;
             receiver.country_code = this.formInstanceShipment.Receiver_CountryCode;
             receiver.email = this.formInstanceShipment.Receiver_Email;
@@ -3739,7 +3785,7 @@
                     }, function (error) {
                         _this.showLoadIndicator = false;
                         console.log(error);
-                        MessageBox.showError({ title: $localize(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject([":@@Failed-Text-Error loadingServicePoints:Error loading service points"], [":@@Failed-Text-Error loadingServicePoints:Error loading service points"]))), message: error }, _this.matDialog);
+                        MessageBox.showError({ title: $localize(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject([":@@Failed-Text-Error loadingServicePoints:Error loading service points"], [":@@Failed-Text-Error loadingServicePoints:Error loading service points"]))), message: error }, _this.matDialog);
                     });
                 });
             }
@@ -3815,7 +3861,7 @@
             request.Sender.mobile_phone = this.formInstanceShipment.Sender_Mobile;
             request.Receiver = Object.assign(new Shipment_Receiver(), {});
             request.Receiver.name = this.formInstanceShipment.Receiver_Name;
-            request.Receiver.attention = this.formInstanceShipment.Receiver_Attention;
+            request.Receiver.attention = this.formInstanceShipment.Receiver_Attention + ' ' + this.formInstanceShipment.Receiver_Telephone;
             request.Receiver.address1 = this.formInstanceShipment.Receiver_Address1;
             request.Receiver.zipcode = this.formInstanceShipment.Receiver_Zipcode;
             request.Receiver.city = this.formInstanceShipment.Receiver_City;
@@ -3871,6 +3917,15 @@
                 });
             });
         };
+        PickinglistAddNewShipment.prototype.createCompanyStore = function () {
+            this.company_store = new ODataStore__default['default']({
+                url: this.cloudDataService.getMobiManagementODataUrl("companyinfo/main()"),
+                withCredentials: true,
+                key: "Id",
+                keyType: "Guid",
+                version: 4
+            });
+        };
         PickinglistAddNewShipment.prototype.applyPickingListStoreFilter = function () {
             this.odatastore_pickingList_filter = "Id  eq " + this.pickingListId;
         };
@@ -3937,7 +3992,7 @@
         PickinglistAddNewShipment.prototype.createLocationStore = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_33) {
+                return __generator(this, function (_0) {
                     this.location_store = new ODataStore__default['default']({
                         url: this.cloudDataService.getMobiManagementODataUrl("Location"),
                         beforeSend: function (e) {
@@ -3965,7 +4020,7 @@
         };
         PickinglistAddNewShipment.prototype.getLocation = function () {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_33) {
+                return __generator(this, function (_0) {
                     if (this.location_store) {
                         this.location_store.load().then(function (locations) {
                             var location = locations[0];
@@ -3989,7 +4044,7 @@
         PickinglistAddNewShipment.prototype.createInventLocationStore = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_33) {
+                return __generator(this, function (_0) {
                     this.inventLocation_store = new ODataStore__default['default']({
                         url: this.cloudDataService.getMobiManagementODataUrl("InventLocation"),
                         beforeSend: function (e) {
@@ -4042,7 +4097,7 @@
         };
         PickinglistAddNewShipment.prototype.createPrinterStore = function () {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_33) {
+                return __generator(this, function (_0) {
                     this.printer_store = new ODataStore__default['default']({
                         url: this.cloudDataService.getMobiManagementODataUrl("GatewayPrinter"),
                         withCredentials: true,
@@ -4057,7 +4112,7 @@
         PickinglistAddNewShipment.prototype.createPackagingBoxStore = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_33) {
+                return __generator(this, function (_0) {
                     this.packagingBox_store = new ODataStore__default['default']({
                         url: this.cloudDataService.getMobiManagementODataUrl("PackagingBox"),
                         beforeSend: function (e) {
@@ -4112,8 +4167,8 @@
     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\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                            <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=\"98\" [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\" [width]=\"100\" [visible]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-QtyPick\" caption=\"Quantity pick\" dataType=\"number\" [fixed]=\"true\" fixedPosition=\"right\"></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\" [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-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-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\" [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=\"Receiver_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=\"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-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-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                        <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=\"batch\" [allowUpdating]=\"true\" [allowAdding]=\"true\" [allowDeleting]=\"true\" [selectTextOnEditStart]=\"true\">\n                            </dxo-editing>\n\n                            <dxi-column dataField=\"Quantity\" caption=\"Quantity\" i18n-caption=\"@@GridColumn-Quantity\" dataType=\"number\" [fixed]=\"true\" fixedPosition=\"left\"></dxi-column>\n                            <dxi-column dataField=\"BoxType\" [setCellValue]=\"setCellValue_BoxType\" caption=\"Box type\" 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-text=\"@@ValidationText-BoxType-Required\"></dxi-validation-rule>  \n                            </dxi-column>                            \n                            <dxi-column dataField=\"Length_InCm\" i18n-caption=\"@@GridColumn-Length_CM\" caption=\"Length (cm)\" dataType=\"number\" [fixed]=\"true\" fixedPosition=\"left\">\n                                <dxi-validation-rule type=\"required\" message=\"Length is required\" i18n-text=\"@@ValidationText-Length-Required\"></dxi-validation-rule>\n                            </dxi-column>\n                            <dxi-column dataField=\"Width_InCm\" i18n-caption=\"@@GridColumn-Width_CM\" caption=\"Width (cm)\" dataType=\"number\" [fixed]=\"true\" fixedPosition=\"left\">\n                                <dxi-validation-rule type=\"required\" message=\"Width is required\" i18n-text=\"@@ValidationText-Width-Required\"></dxi-validation-rule>\n                            </dxi-column>\n                            <dxi-column dataField=\"Height_InCm\" i18n-caption=\"@@GridColumn-Height_CM\" caption=\"Height (cm)\" dataType=\"number\" [fixed]=\"true\" fixedPosition=\"left\"></dxi-column>\n                            <dxi-column dataField=\"Weight_InKg\" i18n-caption=\"@@GridColumn-Weight_KG\" caption=\"Weight (kg)\" dataType=\"number\" [fixed]=\"true\" fixedPosition=\"left\"></dxi-column>\n                            <dxo-toolbar>\n                                <dxi-item location=\"before\">\n                                    <!-- <dx-drop-down-button text=\"Add box\" icon=\"box\" [items]=\"[{text:'A', id:'a'},{text:'B', id:'b'},{text:'C', id:'c'}]\" (onItemClick)=\"onAddBoxButtonClick($event)\"></dx-drop-down-button>   -->\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                                <!-- <dxi-item name=\"delete\" cssClass=\"action-button\"></dxi-item> -->\n                                <!-- <dxi-item location=\"after\">\n                                  <dx-button icon=\"trash\" text=\"Delete Selected Records\"></dx-button>\n                                </dxi-item> -->\n                              </dxo-toolbar>                            \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                        <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}}\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]=\"2\" [formData]=\"formInstanceShipment\" validationGroup=\"formShippingInfo\" [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=\"ShippingDate\" [colSpan]=\"2\" 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>                                                                 \n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"2\" [colSpan]=\"2\">\n                                    <dxi-item dataField=\"Reference\">\n                                        <dxo-label text=\"Reference\" i18n-text=\"@@FieldCaption-Reference\"></dxo-label> \n                                    </dxi-item> \n                                    <dxi-item dataField=\"Remarks\">\n                                        <dxo-label text=\"Remarks\" i18n-text=\"@@FieldCaption-Remarks\"></dxo-label> \n                                    </dxi-item>                                                                                   \n                                </dxi-item>\n                            </dx-form>                             \n                        </fieldset>\n                        <div class=\"printer-info\">\n                            <div class=\"print-labels\">\n                                <dx-check-box [(value)]=\"printLabels\" text=\"Print labels\" i18n-text=\"@@FieldCaption-PrintLabels\" [rtlEnabled]=\"true\"></dx-check-box>\n                            </div>                            \n                            <div class=\"printer\">\n                                <dx-select-box id=\"printerSelectbox\" [dataSource]=\"printer_store\" label=\"Printer\" i18n-label=\"@@FieldCaption-Printer\" labelMode=\"static\" displayExpr=\"PrinterName\" valueExpr=\"Id\" [(value)]=\"selectedPrinterId\" [disabled]=\"!printLabels\">\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                        </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\" 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: [".dialog-form-content{min-height:472px!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:20px}.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:210px}.shipment-fieldset-shipment-products-withservice,.shipment-fieldset-shipment-servicepoint{width:50%;height:210px}.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:20px;width:auto;height:120px}.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:10px}.printer-info{display:flex;margin-top:20px;width:100%}.printer-info .print-labels{margin-right:20px;width:180px;padding-left:20px;padding-top:3px}.printer-info .printer{width:100%}"]
+                    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\">A 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\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                            <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=\"98\" [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\" [width]=\"100\" [visible]=\"true\" [allowHeaderFiltering]=\"false\" i18n-caption=\"@@GridColumn-QtyPick\" caption=\"Quantity pick\" dataType=\"number\" [fixed]=\"true\" fixedPosition=\"right\"></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-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-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-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-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                        <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=\"batch\" [allowUpdating]=\"true\" [allowAdding]=\"true\" [allowDeleting]=\"true\" [selectTextOnEditStart]=\"true\">\n                            </dxo-editing>\n\n                            <dxi-column dataField=\"Quantity\" caption=\"Quantity\" 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\" 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\" i18n-caption=\"@@GridColumn-Length_CM\" caption=\"Length (cm)\" dataType=\"number\" format=\"#\" [editorOptions]=\"{ format: '#' }\" [fixed]=\"true\" fixedPosition=\"left\">\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\" i18n-caption=\"@@GridColumn-Width_CM\" caption=\"Width (cm)\" dataType=\"number\" format=\"#\" [editorOptions]=\"{ format: '#' }\" [fixed]=\"true\" fixedPosition=\"left\">\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\" i18n-caption=\"@@GridColumn-Height_CM\" caption=\"Height (cm)\" dataType=\"number\" format=\"#\" [editorOptions]=\"{ format: '#' }\" [fixed]=\"true\" fixedPosition=\"left\"></dxi-column>\n                            <dxi-column dataField=\"Weight_InKg\" i18n-caption=\"@@GridColumn-Weight_KG\" caption=\"Weight (kg)\" dataType=\"number\" format=\"#\" [editorOptions]=\"{ format: '#' }\" [fixed]=\"true\" fixedPosition=\"left\">\n                                <dxi-validation-rule type=\"required\" message=\"Weight is required\" i18n-message=\"@@ValidationText-Weight-Required\"></dxi-validation-rule>\n                            </dxi-column>\n                            <dxo-toolbar>\n                                <dxi-item location=\"before\">\n                                    <!-- <dx-drop-down-button text=\"Add box\" icon=\"box\" [items]=\"[{text:'A', id:'a'},{text:'B', id:'b'},{text:'C', id:'c'}]\" (onItemClick)=\"onAddBoxButtonClick($event)\"></dx-drop-down-button>   -->\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                                <!-- <dxi-item name=\"delete\" cssClass=\"action-button\"></dxi-item> -->\n                                <!-- <dxi-item location=\"after\">\n                                  <dx-button icon=\"trash\" text=\"Delete Selected Records\"></dx-button>\n                                </dxi-item> -->\n                              </dxo-toolbar>                            \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                        <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}}\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]=\"2\" [formData]=\"formInstanceShipment\" validationGroup=\"formShippingInfo\" [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=\"ShippingDate\" [colSpan]=\"2\" 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>                                                                 \n                                <dxi-item itemType=\"group\" caption=\"\" [colCount]=\"2\" [colSpan]=\"2\">\n                                    <dxi-item dataField=\"Reference\">\n                                        <dxo-label text=\"Reference\" i18n-text=\"@@FieldCaption-Reference\"></dxo-label> \n                                    </dxi-item> \n                                    <dxi-item dataField=\"Remarks\">\n                                        <dxo-label text=\"Remarks\" i18n-text=\"@@FieldCaption-Remarks\"></dxo-label> \n                                    </dxi-item>                                                                                   \n                                </dxi-item>\n                            </dx-form>                             \n                        </fieldset>\n                        <div class=\"printer-info\">\n                            <div class=\"print-labels\">\n                                <dx-check-box [(value)]=\"printLabels\" text=\"Print labels\" i18n-text=\"@@FieldCaption-PrintLabels\" [rtlEnabled]=\"true\"></dx-check-box>\n                            </div>                            \n                            <div class=\"printer\">\n                                <dx-select-box id=\"printerSelectbox\" [dataSource]=\"printer_store\" label=\"Printer\" i18n-label=\"@@FieldCaption-Printer\" labelMode=\"static\" displayExpr=\"PrinterName\" valueExpr=\"Id\" [(value)]=\"selectedPrinterId\" [disabled]=\"!printLabels\">\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                        </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\" 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: [".dialog-form-content{min-height:564px!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:20px}.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:230px}.shipment-fieldset-shipment-products-withservice,.shipment-fieldset-shipment-servicepoint{width:50%;height:230px}.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:20px;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:10px}.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%}"]
                 },] }
     ];
     PickinglistAddNewShipment.ctorParameters = function () { return [
@@ -4182,7 +4237,7 @@
         }
         return CreateShipmentResponse;
     }());
-    var templateObject_1$c, templateObject_2$a, templateObject_3$a, templateObject_4$a, templateObject_5$a, templateObject_6$a, templateObject_7$a, templateObject_8$a, templateObject_9$8, templateObject_10$8, templateObject_11$7, templateObject_12$7, templateObject_13$5, templateObject_14$5, templateObject_15$2, templateObject_16$2, templateObject_17$2;
+    var templateObject_1$c, templateObject_2$a, templateObject_3$a, templateObject_4$a, templateObject_5$a, templateObject_6$a, templateObject_7$a, templateObject_8$a, templateObject_9$8, templateObject_10$8, templateObject_11$7, templateObject_12$7, templateObject_13$5, templateObject_14$5, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$1;
 
     var PrintDialogShipment = /** @class */ (function () {
         function PrintDialogShipment(dialogRef, data, cloudDataService, matDialog) {