@things-factory/operato-wms 7.0.0-alpha.9 → 7.0.0

package/client/pages/order/vas-order/popup/vas-create-popup.js

@@ -9,8 +9,8 @@ import './vas-create-product-type-form'
 import { css, html, LitElement } from 'lit'
 
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { isMobileDevice } from '@things-factory/utils'
+import { i18next, localize } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
 
 import {
   VAS_BATCH_AND_PRODUCT_TYPE,
@@ -30,7 +30,7 @@ export class VasCreatePopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow: hidden;
-          background-color: white;
+          background-color: var(--md-sys-color-surface);
         }
         .grist {
           display: flex;
@@ -71,7 +71,7 @@ export class VasCreatePopup extends localize(i18next)(LitElement) {
           margin: var(--button-container-button-margin);
 
           padding: var(--button-padding);
-          color: var(--theme-white-color);
+          color: var(--md-sys-color-on-primary);
           font: var(--button-font);
           text-transform: var(--button-text-transform);
         }
@@ -204,40 +204,40 @@ export class VasCreatePopup extends localize(i18next)(LitElement) {
             ></vas-create-batch-type-form>
           `
         : this.selectedTargetType === VAS_PRODUCT_TYPE
-        ? html`
-            <vas-create-product-type-form
-              class="vas-create-form"
-              .targetList="${this.targetList}"
-              .vasList="${this.vasList}"
-              .record="${this.record}"
-              @form-change="${this.resetVasTemplates}"
-            ></vas-create-product-type-form>
-          `
-        : this.selectedTargetType === VAS_BATCH_AND_PRODUCT_TYPE || this.selectedTargetType === VAS_SPECIAL_TYPE
-        ? html`
-            <div class="vas-grist-container">
-              <div class="grist">
-                <h2>${i18next.t('title.target_product')}</h2>
-                <ox-grist
-                  id="target-grist"
-                  .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-                  .config=${this.targetGristConfig}
-                  .data="${this.targetData}"
-                  @field-change="${this._calculateData.bind(this)}"
-                  @select-record-change="${this._setOperationGuideFilter.bind(this)}"
-                ></ox-grist>
-              </div>
-            </div>
-          `
-        : this.selectedTargetType === VAS_ETC_TYPE
-        ? html`
-            <vas-create-etc-type-form
-              class="vas-create-form"
-              .record="${this.record}"
-              @form-change="${this.resetVasTemplates}"
-            ></vas-create-etc-type-form>
-          `
-        : ''}
+          ? html`
+              <vas-create-product-type-form
+                class="vas-create-form"
+                .targetList="${this.targetList}"
+                .vasList="${this.vasList}"
+                .record="${this.record}"
+                @form-change="${this.resetVasTemplates}"
+              ></vas-create-product-type-form>
+            `
+          : this.selectedTargetType === VAS_BATCH_AND_PRODUCT_TYPE || this.selectedTargetType === VAS_SPECIAL_TYPE
+            ? html`
+                <div class="vas-grist-container">
+                  <div class="grist">
+                    <h2>${i18next.t('title.target_product')}</h2>
+                    <ox-grist
+                      id="target-grist"
+                      .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+                      .config=${this.targetGristConfig}
+                      .data="${this.targetData}"
+                      @field-change="${this._calculateData.bind(this)}"
+                      @select-record-change="${this._setOperationGuideFilter.bind(this)}"
+                    ></ox-grist>
+                  </div>
+                </div>
+              `
+            : this.selectedTargetType === VAS_ETC_TYPE
+              ? html`
+                  <vas-create-etc-type-form
+                    class="vas-create-form"
+                    .record="${this.record}"
+                    @form-change="${this.resetVasTemplates}"
+                  ></vas-create-etc-type-form>
+                `
+              : ''}
       ${this.selectedTargetType
         ? html`
             <div class="vas-container">

package/client/pages/order/vas-order/popup/vas-create-product-type-form.js

@@ -1,4 +1,4 @@
-import { i18next } from '@things-factory/i18n-base'
+import { i18next } from '@operato/i18n'
 import { html } from 'lit'
 import { VAS_PRODUCT_TYPE } from '../../../constants'
 import { AbstractVasCreateForm } from './abastract-vas-create-form'
@@ -24,12 +24,11 @@ export class VasCreateProductTypeForm extends AbstractVasCreateForm {
           >
             <option></option>
             ${this.targetProductList.map(
-              product =>
-                html`
-                  <option value="${product.id}" ?selected="${this.record && this.record.target === product.id}">
-                    ${product.name} ${product.description ? `- ${product.description}` : ''}
-                  </option>
-                `
+              product => html`
+                <option value="${product.id}" ?selected="${this.record && this.record.target === product.id}">
+                  ${product.name} ${product.description ? `- ${product.description}` : ''}
+                </option>
+              `
             )}
           </select>
 

package/client/pages/order/vas-order/receive-vas-order.js

@@ -1,10 +1,10 @@
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 import '@operato/data-grist'
 import { getRenderer } from '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert, navigate, PageView } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 import { CommonButtonStyles } from '@things-factory/styles'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -32,7 +32,7 @@ class ReceiveVasOrder extends localize(i18next)(PageView) {
           overflow-x: auto;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -56,7 +56,7 @@ class ReceiveVasOrder extends localize(i18next)(PageView) {
           margin: var(--grist-title-margin);
           border: var(--grist-title-border);
           font: var(--grist-title-font);
-          color: var(--secondary-color);
+          color: var(--md-sys-color-secondary);
         }
 
         .grist h2 mwc-icon {

package/client/pages/order/vas-order/vas-order-detail.js

@@ -1,9 +1,9 @@
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 import '@operato/data-grist'
 import { getRenderer } from '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, CustomAlert, navigate, PageView } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 import { CommonButtonStyles } from '@things-factory/styles'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -36,7 +36,7 @@ class VasOrderDetail extends localize(i18next)(PageView) {
           overflow-x: auto;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -56,7 +56,7 @@ class VasOrderDetail extends localize(i18next)(PageView) {
           margin: var(--grist-title-margin);
           border: var(--grist-title-border);
           font: var(--grist-title-font);
-          color: var(--secondary-color);
+          color: var(--md-sys-color-secondary);
         }
 
         .grist h2 mwc-icon {

package/client/pages/order/vas-order/vas-order-list.js

@@ -1,8 +1,8 @@
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, navigate, PageView } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { isMobileDevice } from '@operato/utils'
+import { ScrollbarStyles } from '@operato/styles'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { ORDER_STATUS } from '../../constants'

package/client/pages/order/vas-order/vas-order-requests.js

@@ -1,9 +1,9 @@
 import '@things-factory/form-ui'
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, navigate, PageView } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { isMobileDevice } from '@operato/utils'
+import { ScrollbarStyles } from '@operato/styles'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { ORDER_STATUS } from '../../constants'

package/client/pages/outbound/generate-worksheet-popup.js

@@ -1,9 +1,9 @@
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { css, html, LitElement } from 'lit'
 import { SingleColumnFormStyles, MultiColumnFormStyles } from '@things-factory/form-ui'
 import { client, navigate } from '@things-factory/shell'
 import gql from 'graphql-tag'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 import { fetchSettingRule } from '../../fetch-setting-value'
 import { ORDER_STATUS } from '../constants'
 import { sleep } from '@things-factory/utils'
@@ -30,7 +30,7 @@ class GenerateWorksheetPopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow-x: overlay;
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
         }
         .container {
           display: flex;

package/client/pages/outbound/inventory-assign-popup.js

@@ -5,9 +5,9 @@ import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { client } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import { isMobileDevice } from '@operato/utils'
 
 import { fetchLocationSortingRule } from '../../fetch-location-sorting-rule'
 import { LOCATION_SORTING_RULE, ORDER_TYPES, WORKSHEET_TYPE } from '../constants'
@@ -48,10 +48,10 @@ class InventoryAssignPopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow-x: overlay;
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;

package/client/pages/outbound/inventory-auto-assign-popup.js

@@ -5,9 +5,9 @@ import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, CustomAlert } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 import { WORKSHEET_TYPE } from '../constants'
 
@@ -32,10 +32,10 @@ class InventoryAutoAssignPopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow-x: overlay;
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;

package/client/pages/outbound/inventory-reassign-popup.js

@@ -5,9 +5,9 @@ import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
 import { sleep } from '@operato/utils'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { client } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import { isMobileDevice } from '@operato/utils'
 
 import { fetchLocationSortingRule } from '../../fetch-location-sorting-rule'
 import { INVENTORY_STATUS, LOCATION_SORTING_RULE, ORDER_TYPES } from '../constants'
@@ -37,7 +37,7 @@ class InventoryReassignPopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow: hidden;
-          background-color: white;
+          background-color: var(--md-sys-color-surface);
         }
         .grist {
           flex: 1;
@@ -65,7 +65,7 @@ class InventoryReassignPopup extends localize(i18next)(LitElement) {
           margin: var(--grist-title-margin);
           border: var(--grist-title-border);
           font: var(--grist-title-font);
-          color: var(--secondary-color);
+          color: var(--md-sys-color-secondary);
         }
         .grist h2 mwc-icon {
           vertical-align: middle;

package/client/pages/outbound/loading-product.js

@@ -9,11 +9,11 @@ import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { sleep } from '@operato/utils'
 import { MultiColumnFormStyles, SingleColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert, PageView, store } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 import { fetchSettingRule } from '../../fetch-setting-value'
 import { WORKSHEET_STATUS } from '../constants'
@@ -44,7 +44,7 @@ class LoadingProduct extends connect(store)(localize(i18next)(PageView)) {
           flex-direction: column;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           overflow: auto;
           flex: 1;
@@ -74,7 +74,7 @@ class LoadingProduct extends connect(store)(localize(i18next)(PageView)) {
           margin: var(--grist-title-margin);
           border: var(--grist-title-border);
           font: var(--grist-title-font);
-          color: var(--secondary-color);
+          color: var(--md-sys-color-secondary);
         }
         .grist h2 mwc-icon {
           vertical-align: middle;

package/client/pages/outbound/logistics-init/branch-logistics-popup.js

@@ -1,9 +1,9 @@
 import '@things-factory/form-ui'
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { client } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import { ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
@@ -25,7 +25,7 @@ class BranchLogisticsPopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow: hidden;
-          background-color: white;
+          background-color: var(--md-sys-color-surface);
         }
         .grist {
           display: flex;

package/client/pages/outbound/logistics-init/logistics-init-popup.js

@@ -1,7 +1,7 @@
 import { getCodeByName } from '@things-factory/code-base'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert } from '@things-factory/shell'
 import gql from 'graphql-tag'
@@ -48,10 +48,10 @@ class LogisticsInitPopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow-x: overlay;
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;

package/client/pages/outbound/logistics-init/pickup-logistics-popup.js

@@ -1,9 +1,9 @@
 import '@things-factory/form-ui'
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { client } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import { ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
@@ -28,7 +28,7 @@ class PickupLogisticsPopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow: hidden;
-          background-color: white;
+          background-color: var(--md-sys-color-surface);
         }
         .grist {
           display: flex;

package/client/pages/outbound/merged-outbound-worksheet.js

@@ -7,10 +7,10 @@ import gql from 'graphql-tag'
 import { css, html } from 'lit'
 
 import { getCodeByName } from '@things-factory/code-base'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, navigate, PageView } from '@things-factory/shell'
 import { ScrollbarStyles, CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 import { openPopup } from '@operato/layout'
 
 import { fetchSettingRule } from '../../fetch-setting-value'

package/client/pages/outbound/order-remark-popup.js

@@ -4,8 +4,8 @@ import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
 import { SingleColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { client } from '@things-factory/shell'
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
 
 class OrderRemarkPopup extends localize(i18next)(LitElement) {
   static get properties() {
@@ -25,7 +25,7 @@ class OrderRemarkPopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow-x: overlay;
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
         }
         .button-container {
           padding: var(--button-container-padding);
@@ -42,7 +42,7 @@ class OrderRemarkPopup extends localize(i18next)(LitElement) {
           margin: var(--button-container-button-margin);
 
           padding: var(--button-padding);
-          color: var(--theme-white-color);
+          color: var(--md-sys-color-on-primary);
           font: var(--button-font);
           text-transform: var(--button-text-transform);
         }

package/client/pages/outbound/outbound-reusable-pallet.js

@@ -1,9 +1,9 @@
 import '@things-factory/barcode-ui'
 import { MultiColumnFormStyles, SingleColumnFormStyles } from '@things-factory/form-ui'
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { client } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import { isMobileDevice } from '@operato/utils'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import '../components/popup-note'
@@ -18,7 +18,7 @@ export class OutboundReusablePallet extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow: hidden;
-          background-color: white;
+          background-color: var(--md-sys-color-surface);
         }
         .info-form {
           overflow: visible;

package/client/pages/outbound/packing-product.js

@@ -11,11 +11,11 @@ import { connect } from 'pwa-helpers/connect-mixin.js'
 import { GhostPrint } from '@operato/ghost-print'
 import { sleep } from '@operato/utils'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert, PageView, store } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 import { fetchSettingRule } from '../../fetch-setting-value'
 import { ORDER_SOURCES, PLATFORM, WORKSHEET_STATUS } from '../constants'
@@ -254,11 +254,11 @@ class PackingProduct extends connect(store)(localize(i18next)(PageView)) {
             ? html` <label>${i18next.t('label.product_barcode')}</label>
                 <barcode-scanable-input name="productBarcode" custom-input></barcode-scanable-input>`
             : this._isRequireSerialNumberScanningOutbound && this._isBatchPicking
-            ? ``
-            : html`
-                <label>${i18next.t('label.packed_qty')}</label>
-                <input type="number" min="1" name="packedQty" />
-              `}
+              ? ``
+              : html`
+                  <label>${i18next.t('label.packed_qty')}</label>
+                  <input type="number" min="1" name="packedQty" />
+                `}
           ${this._isRequireSerialNumberScanningOutbound && this._isBatchPicking
             ? html`
                 <label>${i18next.t('label.serial_number')}</label>

package/client/pages/outbound/packing-worksheet-list.js

@@ -5,10 +5,10 @@ import gql from 'graphql-tag'
 import { css, html } from 'lit'
 
 import { getCodeByName } from '@things-factory/code-base'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, navigate, PageView, CustomAlert } from '@things-factory/shell'
 import { ScrollbarStyles, CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 import { WORKSHEET_TYPE } from '../constants'
 

package/client/pages/outbound/picking-product.js

@@ -13,11 +13,11 @@ import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { sleep } from '@operato/utils'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert, gqlContext, PageView, store } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 import { fetchLocationSortingRule } from '../../fetch-location-sorting-rule'
 import { fetchSettingRule } from '../../fetch-setting-value'
@@ -303,15 +303,14 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
           <label>${i18next.t('label.picking_type')}</label>
           <select name="pickingType" @change="${e => this.pickingTypeChangeHandler(e.currentTarget.value)}">
             ${Object.keys(PICKING_TYPES).map(
-              key =>
-                html`
-                  <option
-                    value="${PICKING_TYPES[key].value}"
-                    ?selected=${this.refPickingType === PICKING_TYPES[key].value}
-                  >
-                    ${i18next.t(`label.${PICKING_TYPES[key].name}`)}
-                  </option>
-                `
+              key => html`
+                <option
+                  value="${PICKING_TYPES[key].value}"
+                  ?selected=${this.refPickingType === PICKING_TYPES[key].value}
+                >
+                  ${i18next.t(`label.${PICKING_TYPES[key].name}`)}
+                </option>
+              `
             )}
           </select>
 
@@ -433,13 +432,12 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                       >
                         <option value="">-- ${i18next.t('text.please_select_the_location')} --</option>
                         ${(this.locations || []).map(
-                          location =>
-                            html`
-                              <option value="${location && location.name}">
-                                ${location && location.name}
-                                ${location && location.status ? ` (${location && location.status})` : ''}
-                              </option>
-                            `
+                          location => html`
+                            <option value="${location && location.name}">
+                              ${location && location.name}
+                              ${location && location.status ? ` (${location && location.status})` : ''}
+                            </option>
+                          `
                         )}
                       </select>
                     `}

package/client/pages/outbound/picking-replacement-popup.js

@@ -5,9 +5,9 @@ import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
 import { MultiColumnFormStyles, SingleColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { client } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import { isMobileDevice } from '@operato/utils'
 
 class PickingReplacementPopup extends localize(i18next)(LitElement) {
   static get styles() {
@@ -20,10 +20,10 @@ class PickingReplacementPopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow-x: overlay;
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -48,7 +48,7 @@ class PickingReplacementPopup extends localize(i18next)(LitElement) {
           margin: var(--button-container-button-margin);
 
           padding: var(--button-padding);
-          color: var(--theme-white-color);
+          color: var(--md-sys-color-on-primary);
           font: var(--button-font);
           text-transform: var(--button-text-transform);
         }