@things-factory/reference-app 7.0.0-y.0 → 7.0.0

package/client/pages/data-set/data-set-list-page.js

@@ -5,7 +5,7 @@ import '../data-entry/data-entry-mockup-form.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
-import moment from 'moment-timezone'
+import moment from '@operato/moment-timezone-es'
 import { connect } from 'pwa-helpers/connect-mixin'
 
 import { getEditor, getRenderer } from '@operato/data-grist'
@@ -177,12 +177,7 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
     const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID')
 
     return html`
-      <ox-grist
-        .mode=${mode}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-        ?url-params-sensitive=${this.active}
-      >
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${this.active}>
         <div slot="headroom">
           <div id="filters">
             <ox-filters-form autofocus></ox-filters-form>
@@ -190,7 +185,7 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.renderRoot.querySelector('#sorter-control').open({
@@ -198,7 +193,7 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -206,9 +201,10 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
+          </div>
           </div>
         </div>
       </ox-grist>
@@ -255,16 +251,11 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
           title: 'data entry mockup form',
           handlers: {
             click: (columns, data, column, record, rowIndex) => {
-              openPopup(
-                html`
-                  <data-entry-mockup-form .dataSet=${record} style="background-color: white;"></data-entry-mockup-form>
-                `,
-                {
-                  backdrop: true,
-                  size: 'large',
-                  title: i18next.t('title.data-entry-form')
-                }
-              )
+              openPopup(html` <data-entry-mockup-form .dataSet=${record} style="background-color: white;"></data-entry-mockup-form> `, {
+                backdrop: true,
+                size: 'large',
+                title: i18next.t('title.data-entry-form')
+              })
             }
           }
         },
@@ -745,9 +736,7 @@ export class DataSetListPage extends connect(store)(localize(i18next)(PageView))
         ...this.grist._config.columns
           .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
           .reduce((record, column) => {
-            record[column.imex.key] = column.imex.key
-              .split('.')
-              .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+            record[column.imex.key] = column.imex.key.split('.').reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
             return record
           }, {})
       }

package/client/pages/direct-print.js

@@ -2,7 +2,7 @@ import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { DirectPrinter } from '@things-factory/barcode-base'
-import { PageView, store } from '@things-factory/shell'
+import { PageView, store } from '@operato/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
 
 import { ReferencePageStyles } from './reference-page-styles'

package/client/pages/ghost-print-page.js

@@ -2,7 +2,7 @@ import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { GhostPrint } from '@operato/ghost-print'
-import { PageView, store } from '@things-factory/shell'
+import { PageView, store } from '@operato/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
 
 import { ReferencePageStyles } from './reference-page-styles'

package/client/pages/grist-colorizing.js

@@ -1,9 +1,10 @@
 import { css, html } from 'lit'
+
+import { PageView } from '@operato/shell'
+import { i18next, localize } from '@operato/i18n'
 import { getEditor, getRenderer } from '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { isMobileDevice } from '@operato/utils'
 
-import { PageView } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
 import { ReferencePageStyles } from './reference-page-styles'
 
 class GristColorizing extends localize(i18next)(PageView) {

package/client/pages/grist-filters.ts

@@ -67,7 +67,7 @@ class GristFilters extends localize(i18next)(PageView) {
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.sorterControl.open({
@@ -75,7 +75,7 @@ class GristFilters extends localize(i18next)(PageView) {
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -83,8 +83,8 @@ class GristFilters extends localize(i18next)(PageView) {
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
         </div>
       </ox-grist>
@@ -126,8 +126,7 @@ class GristFilters extends localize(i18next)(PageView) {
             rate: Math.round(Math.random() * 100),
             dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],
             dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],
-            homepage:
-              idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,
+            homepage: idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,
             createdAt: Date.now(),
             updatedAt: Date.now()
           }

package/client/pages/grist-fulltext-search.ts

@@ -298,7 +298,7 @@ class GristFulltextSearch extends localize(i18next)(PageView) {
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.sorterControl.open({
@@ -306,7 +306,7 @@ class GristFulltextSearch extends localize(i18next)(PageView) {
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -314,8 +314,8 @@ class GristFulltextSearch extends localize(i18next)(PageView) {
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
         </div>
       </ox-grist>
@@ -357,8 +357,7 @@ class GristFulltextSearch extends localize(i18next)(PageView) {
             rate: Math.round(Math.random() * 100),
             dynamicType: ['text', 'email', 'checkbox', 'color', 'progress', 'barcode'][idx % 5],
             dynamicValue: ['abcdefghijkl', 'heartyoh@hatiolab.com', 'true', 'orange', '50', '1234567890'][idx % 5],
-            homepage:
-              idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,
+            homepage: idx % 2 ? `http://hatiolab.com/${start + idx + 1}` : `http://deadpool.hatiolab.com/${start + idx + 1}`,
             createdAt: Date.now(),
             updatedAt: Date.now()
           }

package/client/pages/grist-mode-page.js

@@ -1,10 +1,11 @@
+import '@material/web/icon/icon.js'
 import '@operato/popup/ox-popup-list.js'
 import '@operato/data-grist'
 
 import { css, html } from 'lit'
 
-import { i18next, localize } from '@things-factory/i18n-base'
-import { PageView } from '@things-factory/shell'
+import { i18next, localize } from '@operato/i18n'
+import { PageView } from '@operato/shell'
 
 class GristModePage extends localize(i18next)(PageView) {
   static get styles() {
@@ -29,20 +30,20 @@ class GristModePage extends localize(i18next)(PageView) {
       #headroom {
         display: flex;
         flex-direction: column;
-        background-color: var(--primary-color);
+        background-color: var(--md-sys-color-primary);
         height: 200px;
         align-items: center;
         justify-content: center;
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary);
       }
 
       #modes > * {
-        padding: var(--padding-narrow);
+        padding: var(--spacing-small);
         font-size: 1.5em;
         opacity: 0.7;
       }
 
-      #modes > mwc-icon[active] {
+      #modes > md-icon[active] {
         border: 1px solid var(--status-warning-color);
         border-radius: 9px;
         background-color: rgba(0, 0, 0, 0.3);
@@ -85,9 +86,9 @@ class GristModePage extends localize(i18next)(PageView) {
         <div slot="headroom" id="headroom">
           <h1>HEAD ROOM AREA</h1>
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>view_list</md-icon>
+            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>menu</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
           <div id="tailer">
             <span
@@ -108,7 +109,7 @@ class GristModePage extends localize(i18next)(PageView) {
           </div>
 
           <div id="filters">
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.renderRoot.querySelector('ox-popup-list').open({
@@ -116,9 +117,9 @@ class GristModePage extends localize(i18next)(PageView) {
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >sort</mwc-icon
+              >sort</md-icon
             >
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.renderRoot.querySelector('ox-popup-list').open({
@@ -126,9 +127,9 @@ class GristModePage extends localize(i18next)(PageView) {
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >more_horiz</mwc-icon
+              >more_horiz</md-icon
             >
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.renderRoot.querySelector('ox-popup-list').open({
@@ -136,28 +137,28 @@ class GristModePage extends localize(i18next)(PageView) {
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >sort</mwc-icon
+              >sort</md-icon
             >
 
             <ox-popup-list alive-on-select>
               <div
                 option
                 @click=${function (e) {
-                  const icon = e.currentTarget.querySelector('mwc-icon')
+                  const icon = e.currentTarget.querySelector('md-icon')
                   icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
                 }}
               >
-                <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
+                <md-icon slot="icon" style="width: 20px;height: 20px;"></md-icon>
                 <span>click me to toggle</span>
               </div>
               <div
                 option
                 @click=${function (e) {
-                  const icon = e.currentTarget.querySelector('mwc-icon')
+                  const icon = e.currentTarget.querySelector('md-icon')
                   icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check'
                 }}
               >
-                <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
+                <md-icon slot="icon" style="width: 20px;height: 20px;"></md-icon>
                 <span>click me to toggle</span>
               </div>
             </ox-popup-list>
@@ -201,10 +202,10 @@ class GristModePage extends localize(i18next)(PageView) {
               idx % 4 === 0
                 ? '' /* no source */
                 : idx % 4 === 1
-                ? `http://www.hatiolab.com/assets/img/operato-biz3.png`
-                : idx % 4 === 2
-                ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`
-                : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,
+                  ? `http://www.hatiolab.com/assets/img/operato-biz3.png`
+                  : idx % 4 === 2
+                    ? `http://www.hatiolab.com/assets/img/thingsboard-30.png`
+                    : `http://www.hatiolab.com/wrong-url.png` /* wrong source */,
             role: ['admin', 'worker', 'tester'][idx % 3],
             color: idx % 2 ? `#87f018` : `#180f87`,
             rate: Math.round(Math.random() * 100),

package/client/pages/grist-page.js

@@ -1,9 +1,9 @@
 import { css, html } from 'lit'
 import { getEditor, getRenderer } from '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 
-import { PageView } from '@things-factory/shell'
-import { isMobileDevice } from '@things-factory/utils'
+import { PageView } from '@operato/shell'
+import { isMobileDevice } from '@operato/utils'
 
 class GristPage extends localize(i18next)(PageView) {
   static get styles() {

package/client/pages/label-scan-page.js

@@ -5,7 +5,7 @@ import '@operato/barcode/ox-barcode.js'
 import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
-import { PageView, store } from '@things-factory/shell'
+import { PageView, store } from '@operato/shell'
 
 import { ReferencePageStyles } from './reference-page-styles'
 

package/client/pages/layout-group-page.js

@@ -1,7 +1,7 @@
 import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
-import { PageView, store } from '@things-factory/shell'
+import { PageView, store } from '@operato/shell'
 
 class LayoutGroupPage extends connect(store)(PageView) {
   static get styles() {

package/client/pages/main.js

@@ -1,7 +1,7 @@
 import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
-import { PageView, store } from '@things-factory/shell'
+import { PageView, store } from '@operato/shell'
 
 import logo from '../../assets/images/hatiolab-logo.png'
 

package/client/pages/menu-page.js

@@ -1,4 +1,4 @@
-import '@things-factory/auth-ui' /* for domain-switch */
+import '@things-factory/auth-ui/dist-client' /* for domain-switch */
 import '@material/mwc-checkbox'
 import '@material/mwc-formfield'
 import '@operato/help/ox-help-icon.js'
@@ -83,7 +83,7 @@ class MenuPage extends connect(store)(PageView) {
     setupMenuPart({
       hovering: hovering.checked,
       position: landscape.checked ? VIEWPART_POSITION.HEADERBAR : VIEWPART_POSITION.NAVBAR,
-      portraitSlotTemplate: html` <domain-switch slot="tail"></domain-switch> `
+      portraitSlotTemplate: html` <domain-switch attrname="description" slot="tail"></domain-switch> `
     })
   }
 }

package/client/pages/operation/operation-master.js

@@ -1,4 +1,6 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
+import '@material/web/button/elevated-button.js'
+
 import '@things-factory/import-ui'
 import '@operato/data-grist/ox-grist.js'
 import '@operato/data-grist/ox-filters-form.js'
@@ -11,7 +13,7 @@ import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { CommonButtonStyles, CommonGristStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
-import { CustomAlert, PageView } from '@things-factory/shell'
+import { CustomAlert, PageView } from '@operato/shell'
 
 import { createOperation, deleteOperations, fetchOperations, saveOperations } from './operation-api'
 
@@ -46,6 +48,7 @@ class OperationMaster extends localize(i18next)(PageView) {
   constructor() {
     super()
     this.mode = isMobileDevice() ? 'CARD' : 'GRID'
+    this.importHandler = this.defaultImportHandler
   }
 
   render() {
@@ -60,7 +63,7 @@ class OperationMaster extends localize(i18next)(PageView) {
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.renderRoot.querySelector('#sorter-control').open({
@@ -68,7 +71,7 @@ class OperationMaster extends localize(i18next)(PageView) {
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -76,12 +79,12 @@ class OperationMaster extends localize(i18next)(PageView) {
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
 
           <ox-record-creator id="add" .callback=${this.operationCreationCallback.bind(this)}>
-            <button><mwc-icon>add</mwc-icon></button>
+            <md-elevated-button><md-icon slot="icon">add</md-icon></md-elevated-button>
           </ox-record-creator>
         </div>
       </ox-grist>
@@ -292,7 +295,7 @@ class OperationMaster extends localize(i18next)(PageView) {
     }
   }
 
-  async importHandler(patches) {
+  async defaultImportHandler(patches) {
     const response = await saveOperations(patches)
 
     if (!response.errors) {

package/client/pages/pending-job-page.js

@@ -1,5 +1,6 @@
 import '@material/mwc-linear-progress'
 import '@operato/help/ox-help-icon.js'
+import '@operato/oops/ox-oops-progress.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -48,19 +49,19 @@ class PendingJobPage extends connect(store)(PageView) {
 
     return html`
       <p>
-        오래걸리는 서버작업을 수행할 때는 진행과정을 표현해주는 것이 사용자 경험에 도움을 준다. 이를 위해 Things Factory
-        프레임워크에서는 oops-progress<ox-help-icon topic="components/oops-progress"></ox-help-icon> 라는 컴포넌트를
-        제공한다.
+        오래걸리는 서버작업을 수행할 때는 진행과정을 표현해주는 것이 사용자 경험에 도움을 준다. 이를 위해 Things Factory 프레임워크에서는 ox-oops-progress<ox-help-icon
+          topic="components/ox-oops-progress"
+        ></ox-help-icon>
+        라는 컴포넌트를 제공한다.
       </p>
       <p>
-        아래 'Start' 버튼을 클릭하면, 서버에 작업을 요청하고 그 진행율이 화면에 표현된다. 진행중에는 버튼은 'Stop'
-        버튼으로 변경되면, 진행중에 버튼을 누르면 진행율 표현이 멈추게 된다. 진행이 완료되면, 'Start' 버튼으로 변경된다.
-        주의할 점은, 'Stop' 버튼으로 서버의 작업을 변경하는 것은 아니고, 진행율 구독만을 정지한다는 것이다. 서버
+        아래 'Start' 버튼을 클릭하면, 서버에 작업을 요청하고 그 진행율이 화면에 표현된다. 진행중에는 버튼은 'Stop' 버튼으로 변경되면, 진행중에 버튼을 누르면 진행율 표현이
+        멈추게 된다. 진행이 완료되면, 'Start' 버튼으로 변경된다. 주의할 점은, 'Stop' 버튼으로 서버의 작업을 변경하는 것은 아니고, 진행율 구독만을 정지한다는 것이다. 서버
         작업까지 정지하고자하면, 별도의 mutation을 구현해서 Stop시에 호출해주어야 한다.
       </p>
 
       <section>
-        <oops-progress
+        <ox-oops-progress
           @progress=${e => {
             this.progress = e.detail
           }}
@@ -73,14 +74,14 @@ class PendingJobPage extends connect(store)(PageView) {
             <mwc-linear-progress .progress=${progress / 100}></mwc-linear-progress>
             <span>Progress : ${progress} % (${message})</span>
           </div>
-        </oops-progress>
+        </ox-oops-progress>
         <div id="result"></div>
       </section>
     `
   }
 
   get oopsProgress() {
-    return this.shadowRoot.querySelector('oops-progress')
+    return this.shadowRoot.querySelector('ox-oops-progress')
   }
 
   updated(changes) {

package/client/pages/product/product-master.js

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@things-factory/form-ui'
 import '@things-factory/import-ui'
 import '@operato/data-grist/ox-grist.js'
@@ -38,6 +38,7 @@ class ProductMaster extends localize(i18next)(PageView) {
   constructor() {
     super()
     this.mode = isMobileDevice() ? 'LIST' : 'GRID'
+    this.importHandler = this.defaultImportHandler
   }
 
   static get properties() {
@@ -61,7 +62,7 @@ class ProductMaster extends localize(i18next)(PageView) {
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.renderRoot.querySelector('#sorter-control').open({
@@ -69,7 +70,7 @@ class ProductMaster extends localize(i18next)(PageView) {
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -77,12 +78,12 @@ class ProductMaster extends localize(i18next)(PageView) {
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
 
           <ox-record-creator id="add" .callback=${this.productCreationCallback.bind(this)}>
-            <button><mwc-icon>add</mwc-icon></button>
+            <button><md-icon>add</md-icon></button>
           </ox-record-creator>
         </div>
       </ox-grist>
@@ -725,7 +726,7 @@ class ProductMaster extends localize(i18next)(PageView) {
     }
   }
 
-  async importHandler(patches) {
+  async defaultImportHandler(patches) {
     const response = await saveProducts(patches)
 
     if (!response.errors) {

package/client/pages/product-combinations-popup.js

@@ -30,7 +30,7 @@ class ProductCombinationsPopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow: hidden;
-          background-color: white;
+          background-color: var(--md-sys-color-surface);
         }
         search-form {
           overflow: visible;
@@ -40,7 +40,7 @@ class ProductCombinationsPopup extends localize(i18next)(LitElement) {
           flex: 1;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: row;
           flex: 1;

package/client/pages/product-details-popup.js

@@ -23,7 +23,7 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow: hidden;
-          background-color: white;
+          background-color: var(--md-sys-color-surface);
 
           --grid-record-emphasized-background-color: #ffdbdb;
           --grid-record-emphasized-color: #703f3f;

package/client/pages/reference-page-styles.js

@@ -3,23 +3,23 @@ import { css } from 'lit'
 export const ReferencePageStyles = css`
   :host {
     display: block;
-    background-color: var(--main-section-background-color);
-    padding: var(--padding-wide);
+    background-color: var(--md-sys-color-background);
+    padding: var(--spacing-large);
     overflow: auto;
   }
   p {
-    color: var(--secondary-color);
+    color: var(--md-sys-color-secondary);
     font-size: 1em;
   }
   h2,
   h3 {
-    margin-bottom: var(--margin-narrow);
+    margin-bottom: var(--spacing-small);
     color: var(--secondary-text-color);
   }
   fieldset {
-    background-color: var(--theme-white-color);
-    margin-top: var(--margin-wide);
-    border: var(--border-dark-color);
+    background-color: var(--md-sys-color-surface);
+    margin-top: var(--spacing-large);
+    border: var(--border-dim-color);
   }
   fieldset > * {
     min-width: 10%;

package/client/pages/report-page.js

@@ -1,9 +1,9 @@
 import '@operato/data-grist'
 
 import { css, html } from 'lit'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 
-import { PageView } from '@things-factory/shell'
+import { PageView } from '@operato/shell'
 
 class ReportPage extends localize(i18next)(PageView) {
   static get styles() {