mobicloud-core 1.0.87 → 1.0.88

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

@@ -3938,6 +3938,7 @@
             this.allowSelectPickingLines = false;
             this.packagingBoxes = [];
             this.selectedBoxes = [];
+            this.shipmentCarriers = [];
             this.shipmentProducts = [];
             this.selectedShipmentProducts = [];
             this.servicePointRequired = false;
@@ -3993,26 +3994,36 @@
             this.createCompanyStore();
             this.createPickingListStore();
             this.company_store.load().then(function (companies) {
+                var _a;
                 _this.company = companies[0];
-                _this.pickingList_store.load().then(function (pickingLists) {
-                    var picking_list = pickingLists[0];
-                    if (picking_list) {
-                        _this.initializePickingList(picking_list);
-                    }
-                    else {
+                if ((_a = _this.company) === null || _a === void 0 ? void 0 : _a.ShipmentVendor) {
+                    _this.shipmentProviderType = _this.company.ShipmentVendor.ShipmentProvider;
+                    _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$a || (templateObject_10$a = __makeTemplateObject([":@@Failed-Text-InvalidPickingList:Invalid picking list"], [":@@Failed-Text-InvalidPickingList:Invalid picking list"]))), message: $localize(templateObject_11$9 || (templateObject_11$9 = __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$a || (templateObject_10$a = __makeTemplateObject([":@@Failed-Text-InvalidPickingList:Invalid picking list"], [":@@Failed-Text-InvalidPickingList:Invalid picking list"]))), message: $localize(templateObject_11$9 || (templateObject_11$9 = __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) {
+                        console.log(error);
+                        MessageBox.showError({ title: $localize(templateObject_12$9 || (templateObject_12$9 = __makeTemplateObject([":@@Failed-Text-InvalidPickingList:Invalid picking list"], [":@@Failed-Text-InvalidPickingList:Invalid picking list"]))), message: error }, _this.matDialog);
+                        _this.onCancel();
+                    });
+                }
+                else {
                     _this.showLoadIndicator = false;
-                    console.log(error);
-                    MessageBox.showError({ title: $localize(templateObject_12$9 || (templateObject_12$9 = __makeTemplateObject([":@@Failed-Text-InvalidPickingList:Invalid picking list"], [":@@Failed-Text-InvalidPickingList:Invalid picking list"]))), message: error }, _this.matDialog);
+                    console.log("Shipment vendor is not found/configured in company", _this.company);
+                    MessageBox.showError({ title: $localize(templateObject_13$6 || (templateObject_13$6 = __makeTemplateObject([":@@CaptionHeader-Error:Error"], [":@@CaptionHeader-Error:Error"]))), message: $localize(templateObject_14$6 || (templateObject_14$6 = __makeTemplateObject([":@@Failed-Text-ShipmentVendorNotFoundInCompany:Shipment vendor is not found/configured in company"], [":@@Failed-Text-ShipmentVendorNotFoundInCompany:Shipment vendor is not found/configured in company"]))) }, _this.matDialog);
                     _this.onCancel();
-                });
+                }
             }, function (error) {
                 _this.showLoadIndicator = false;
                 console.log(error);
-                MessageBox.showError({ title: $localize(templateObject_13$6 || (templateObject_13$6 = __makeTemplateObject([":@@Failed-Text-CouldNotLoadCompany:Could not load company"], [":@@Failed-Text-CouldNotLoadCompany:Could not load company"]))), message: error }, _this.matDialog);
+                MessageBox.showError({ title: $localize(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject([":@@Failed-Text-CouldNotLoadCompany:Could not load company"], [":@@Failed-Text-CouldNotLoadCompany:Could not load company"]))), message: error }, _this.matDialog);
                 _this.onCancel();
             });
         };
@@ -4041,14 +4052,14 @@
                             _this.onPickingListInitialized();
                         }
                         else {
-                            MessageBox.showError({ title: $localize(templateObject_14$6 || (templateObject_14$6 = __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);
+                            MessageBox.showError({ title: $localize(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject([":@@Failed-Text-NoPickingLines:No picking lines"], [":@@Failed-Text-NoPickingLines:No picking lines"]))), message: $localize(templateObject_17$2 || (templateObject_17$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_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);
+                        MessageBox.showError({ title: $localize(templateObject_18$1 || (templateObject_18$1 = __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*/];
@@ -4202,23 +4213,68 @@
             }
         };
         PickinglistAddNewShipment.prototype.onClick_Packages = function () {
-            var _this = this;
             this.selectedBoxesList.instance.saveEditData();
             this.boxesSelectionValid = this.selectedBoxes.length > 0;
             if (this.boxesSelectionValid) {
-                this.showLoadIndicator = true;
-                this.loadShipmentProducts()
-                    .then(function (response) {
-                    response.subscribe(function (shipment_products) {
-                        _this.shipmentProducts = shipment_products;
-                        _this.stepper.next();
-                        _this.showLoadIndicator = false;
-                    }, function (error) {
-                        _this.showLoadIndicator = false;
-                        console.log(error);
-                        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);
+                if (this.shipmentProviderType == api.ShipmentProviderType.Webshipper) {
+                    this.onClick_Packages_Webshipper();
+                }
+                else {
+                    this.onClick_Packages_Default();
+                }
+            }
+        };
+        PickinglistAddNewShipment.prototype.onClick_Packages_Default = function () {
+            var _this = this;
+            this.fetchShipmentProducts().then(function () {
+                _this.stepper.next();
+            });
+        };
+        PickinglistAddNewShipment.prototype.fetchShipmentProducts = function () {
+            var _this = this;
+            this.showLoadIndicator = true;
+            return this.loadShipmentProducts()
+                .then(function (response) {
+                response.subscribe(function (shipment_products) {
+                    _this.shipmentProducts = shipment_products.map(function (val) {
+                        var shipment_product = Object.assign(new Shipping_CarrierProduct(), val);
+                        if (!shipment_product.transit_time && shipment_product.estimated_delivery_date_to) {
+                            shipment_product.transit_time = new Date(shipment_product.estimated_delivery_date_to).toDateString();
+                        }
+                        return shipment_product;
                     });
+                    _this.showLoadIndicator = false;
+                }, function (error) {
+                    _this.showLoadIndicator = false;
+                    console.log(error);
+                    MessageBox.showError({ title: $localize(templateObject_19 || (templateObject_19 = __makeTemplateObject([":@@Failed-Text-Error-LoadingShipmentProducts:Error loading shipment products"], [":@@Failed-Text-Error-LoadingShipmentProducts:Error loading shipment products"]))), message: error }, _this.matDialog);
+                });
+            });
+        };
+        PickinglistAddNewShipment.prototype.onClick_Packages_Webshipper = function () {
+            var _this = this;
+            this.showLoadIndicator = true;
+            this.loadShipmentCarriers()
+                .then(function (response) {
+                response.subscribe(function (shipment_carriers) {
+                    var _a;
+                    _this.shipmentCarriers = shipment_carriers;
+                    if (!_this.selectedCarrierId && ((_a = _this.shipmentCarriers) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                        _this.selectedCarrierId = _this.shipmentCarriers[0].id;
+                    }
+                    _this.stepper.next();
+                    _this.showLoadIndicator = false;
+                }, function (error) {
+                    _this.showLoadIndicator = false;
+                    console.log(error);
+                    MessageBox.showError({ title: $localize(templateObject_20 || (templateObject_20 = __makeTemplateObject([":@@Failed-Text-Error-LoadingShipmentCarriers:Error loading shipment carriers"], [":@@Failed-Text-Error-LoadingShipmentCarriers:Error loading shipment carriers"]))), message: error }, _this.matDialog);
                 });
+            });
+        };
+        PickinglistAddNewShipment.prototype.onCarrierSelectionChanged = function (e) {
+            if (e.selectedItem) {
+                this.selectedCarrierId = e.selectedItem.id;
+                this.fetchShipmentProducts();
             }
         };
         PickinglistAddNewShipment.prototype.onAddBoxButtonClick = function (e) {
@@ -4332,14 +4388,20 @@
                 });
             });
         };
+        PickinglistAddNewShipment.prototype.loadShipmentCarriers = function () {
+            var url = "" + this.cloudDataService.getMobiManagementApiUrl('ShippingApi/Carriers');
+            return this.cloudDataService.getAll(url);
+        };
         PickinglistAddNewShipment.prototype.loadShipmentProducts = function () {
             var url = "" + this.cloudDataService.getMobiManagementApiUrl('ShippingApi/ProcuctPrices');
             var body = Object.assign(new ShipmentPriceRequest(), {});
+            if (this.shipmentProviderType == api.ShipmentProviderType.Webshipper) {
+                body.Carrier_Id = this.selectedCarrierId;
+            }
             body.Sender = this.create_Shipment_Sender();
             body.Receiver = this.create_Shipment_Receiver();
             body.Packages = this.create_Shipping_Parcels();
             return this.cloudDataService.post(url, body);
-            ;
         };
         PickinglistAddNewShipment.prototype.create_Shipment_Sender = function () {
             var sender = Object.assign(new Shipment_Sender(), {});
@@ -4409,7 +4471,7 @@
                     }, function (error) {
                         _this.showLoadIndicator = false;
                         console.log(error);
-                        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);
+                        MessageBox.showError({ title: $localize(templateObject_21 || (templateObject_21 = __makeTemplateObject([":@@Failed-Text-Error loadingServicePoints:Error loading service points"], [":@@Failed-Text-Error loadingServicePoints:Error loading service points"]))), message: error }, _this.matDialog);
                     });
                 });
             }
@@ -4423,6 +4485,9 @@
             var country = (_d = this.formInstanceShipment.Receiver_CountryCode) !== null && _d !== void 0 ? _d : '';
             var max = 20;
             var urlQuerystring = "?productCode=" + ((_e = this.selectedShippingProduct) === null || _e === void 0 ? void 0 : _e.product_code) + "&addressLine=" + address + "&zipcode=" + zipcode + "&city=" + city + "&countryCode=" + country + "&quantity=" + max;
+            if (this.shipmentProviderType == api.ShipmentProviderType.Webshipper) {
+                urlQuerystring += "&carrierCode=" + this.selectedCarrierId;
+            }
             var url = "" + this.cloudDataService.getMobiManagementApiUrl('ShippingApi/ServicePoints') + urlQuerystring;
             return this.cloudDataService.getAll(url);
         };
@@ -4506,6 +4571,9 @@
                     request.Packages.push(parcel);
                 }
             }
+            if (this.selectedCarrierId) {
+                request.CarrierCode = this.selectedCarrierId;
+            }
             if (((_a = this.selectedShipmentProducts) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                 request.ProductCode = this.selectedShipmentProducts[0];
             }
@@ -4541,6 +4609,15 @@
         PickinglistAddNewShipment.prototype.createCompanyStore = function () {
             this.company_store = new ODataStore__default['default']({
                 url: this.cloudDataService.getMobiManagementODataUrl("companyinfo/main()"),
+                beforeSend: function (e) {
+                    var _a;
+                    if (((_a = e.method) === null || _a === void 0 ? void 0 : _a.toUpperCase()) == "GET") {
+                        var expandValues = ['ShipmentVendor($select=Name,ShipmentProvider)'];
+                        if ((expandValues === null || expandValues === void 0 ? void 0 : expandValues.length) > 0) {
+                            e.params.$expand = expandValues.toString();
+                        }
+                    }
+                },
                 withCredentials: true,
                 key: "Id",
                 keyType: "Guid",
@@ -4787,8 +4864,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\" [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%}"]
+                    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\" [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\n                        <div class=\"carrier-info\" *ngIf=\"shipmentProviderType == 'Webshipper'\">\n                            <div class=\"carrier\">\n                                <dx-select-box id=\"carrierSelectbox\" [dataSource]=\"shipmentCarriers\" label=\"Carrier\" i18n-label=\"@@FieldCaption-Carrier\" labelMode=\"static\" displayExpr=\"name\" valueExpr=\"id\" [(value)]=\"selectedCarrierId\" (onSelectionChanged)=\"onCarrierSelectionChanged($event)\">\n                                    <div *dxTemplate=\"let data of 'item'\">\n                                        <div class=\"carrier-item\">\n                                            <div class=\"carrier-name\">\n                                                {{data?.name}}\n                                            </div>\n                                        </div>\n                                    </div>                                        \n                                </dx-select-box> \n                            </div>                            \n                        </div>                        \n\n                        <div fxLayout=\"row\" class=\"shipment-products-container\">\n                            <fieldset [ngClass]=\"{'shipment-fieldset-default shipment-fieldset-shipment-products':!servicePointRequired, 'shipment-fieldset-default shipment-fieldset-shipment-products-withservice':servicePointRequired}\">\n                                <legend class=\"shipment-legend-default\" i18n=\"@@FieldCaption-CarrierProducts\">Carrier products</legend>\n                                <dx-validation-summary validationGroup=\"ProductCode\"></dx-validation-summary>\n                                <dx-list #shipmentProducList keyExpr=\"product_code\" [dataSource]=\"shipmentProducts\" selectionMode=\"single\" showScrollbar=\"always\" [showSelectionControls]=\"true\" [(selectedItemKeys)]=\"selectedShipmentProducts\" (onSelectionChanged)=\"onShipmentProductSelectionChanged($event)\">\n                                    <div *dxTemplate=\"let item of 'item'\">\n                                        <div class=\"shipment-product-item\">                                  \n                                            <div class=\"shipment-product-item-name\">{{ item.name }}</div>\n                                            <div class=\"shipment-product-item-info\">\n                                                <div class=\"shipment-product-item-price\">\n                                                    <!-- <span class=\"item-caption\">Price</span><span class=\"item-caption-colon\">:</span><div class=\"item-value\">{{item.price_amount | currency:item.price_currency:\"symbol\"}}</div> -->\n                                                    <span class=\"item-caption\">Price</span><span class=\"item-caption-colon\">:</span><div class=\"item-value\">{{item.price_currency}} {{item.price_amount}}</div>\n                                                </div>\n                                                <div class=\"shipment-product-item-transit\">\n                                                    <span class=\"item-caption\">Transit time</span><span class=\"item-caption-colon\">:</span><span class=\"item-value\">{{ item.transit_time }}</span>                                                    \n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <dx-validator [adapter]=\"validationConfig_ProductCode\" validationGroup=\"ProductCode\">\n                                        <dxi-validation-rule type=\"required\" message=\"Carrier product is required\" i18n-message=\"@@ValidationText-CarrierProduct-Required\"></dxi-validation-rule>\n                                    </dx-validator>\n                                </dx-list>                                 \n                            </fieldset>\n                            <fieldset class=\"shipment-fieldset-default shipment-fieldset-shipment-servicepoint\" *ngIf=\"selectedShippingProduct?.service_point_required\">\n                                <legend class=\"shipment-legend-default\" i18n=\"@@FieldCaption-ParcelShop\">Parcel shop</legend>\n                                    <dx-validation-summary validationGroup=\"ServicePoint\"></dx-validation-summary>\n                                    <dx-select-box id=\"servicePointsSelectbox\" [dataSource]=\"servicePoints\" displayExpr=\"name\" [(value)]=\"selectedServicePoint\" (onSelectionChanged)=\"onServicePointSelectionChanged($event)\">\n                                        <div *dxTemplate=\"let data of 'item'\">\n                                            <div class=\"servicepoint-item\">\n                                                <div class=\"servicepoint-name\">\n                                                {{ data.name }} <span>{{data.id ? ('(' + data.id + ') ') : ':'}} {{(data.distance | meterToKilometer) | number : '1.0-1'}}</span><span> km</span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <dx-validator [adapter]=\"validationConfig_ServicePoint\" validationGroup=\"ServicePoint\">\n                                            <dxi-validation-rule type=\"required\" message=\"Parcel shop is required for this carrier product\" i18n-message=\"@@ValidationText-ParcelShop-Required\"></dxi-validation-rule>\n                                        </dx-validator>                                        \n                                    </dx-select-box>                                      \n                                    <div class=\"dx-fieldset selected-service-point\">\n                                        <div class=\"field\">\n                                            <div class=\"field-label\" i18n=\"@@FieldCaption-Name\">Name:</div>\n                                            <div class=\"field-value\">\n                                            {{selectedServicePoint?.name}} {{selectedServicePoint?.id ? ('(' + selectedServicePoint?.id + ')') : ''}}\n                                            </div>\n                                        </div>\n                                        <div class=\"field\">\n                                            <div class=\"field-label\" i18n=\"@@FieldCaption-Address\">Address:</div>\n                                            <div class=\"field-value\">\n                                            {{selectedServicePoint?.address_line}}\n                                            </div>\n                                        </div> \n                                        <div class=\"field\">\n                                            <div class=\"field-label\" i18n=\"@@FieldCaption-ZipCode\">Zip code:</div>\n                                            <div class=\"field-value\">\n                                            {{selectedServicePoint?.zip_code}}\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:604px!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:240px}.shipment-fieldset-shipment-products-withservice,.shipment-fieldset-shipment-servicepoint{width:50%;height:240px}.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%}.carrier-info{display:flex;margin-bottom:5px;width:100%}.carrier-info .carrier{width:100%}"]
                 },] }
     ];
     PickinglistAddNewShipment.ctorParameters = function () { return [
@@ -4817,6 +4894,11 @@
         }
         return PackagingBoxEntry;
     }(api.PackagingBox));
+    var Shipping_Carrier = /** @class */ (function () {
+        function Shipping_Carrier() {
+        }
+        return Shipping_Carrier;
+    }());
     var Shipping_CarrierProduct = /** @class */ (function () {
         function Shipping_CarrierProduct() {
         }
@@ -4857,7 +4939,7 @@
         }
         return CreateShipmentResponse;
     }());
-    var templateObject_1$g, templateObject_2$d, templateObject_3$d, templateObject_4$d, templateObject_5$d, templateObject_6$d, templateObject_7$d, templateObject_8$d, templateObject_9$a, templateObject_10$a, templateObject_11$9, templateObject_12$9, templateObject_13$6, templateObject_14$6, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$1;
+    var templateObject_1$g, templateObject_2$d, templateObject_3$d, templateObject_4$d, templateObject_5$d, templateObject_6$d, templateObject_7$d, templateObject_8$d, templateObject_9$a, templateObject_10$a, templateObject_11$9, templateObject_12$9, templateObject_13$6, templateObject_14$6, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$1, templateObject_19, templateObject_20, templateObject_21;
 
     var PrintDialogShipment = /** @class */ (function () {
         function PrintDialogShipment(dialogRef, data, cloudDataService, matDialog) {
@@ -5509,6 +5591,7 @@
     exports.ShipmentPriceRequest = ShipmentPriceRequest;
     exports.Shipment_Receiver = Shipment_Receiver;
     exports.Shipment_Sender = Shipment_Sender;
+    exports.Shipping_Carrier = Shipping_Carrier;
     exports.Shipping_CarrierProduct = Shipping_CarrierProduct;
     exports.Shipping_Parcel = Shipping_Parcel;
     exports.Shipping_ServicePoint = Shipping_ServicePoint;