@things-factory/integration-ui 7.0.1-alpha.26 → 7.0.1-alpha.29

package/client/bootstrap.ts

@@ -1,14 +1,9 @@
-import '@material/mwc-icon'
 import './editors/entity-editor'
 import './editors/property-editor'
 
 import { OxGristEditorJson } from '@operato/app/grist-editor/ox-grist-editor-json.js'
 import { OxGristRendererCrontab } from '@operato/app/grist-editor/ox-grist-renderer-crontab.js'
-import {
-  registerEditor as registerGristEditor,
-  registerRenderer as registerGristRenderer,
-  OxGristRendererJson5
-} from '@operato/data-grist'
+import { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer, OxGristRendererJson5 } from '@operato/data-grist'
 import { OxGristEditorCrontab } from '@operato/grist-editor/ox-grist-editor-crontab.js'
 import { OxGristEditorPrivilege } from '@operato/app/grist-editor/ox-grist-editor-privilege.js'
 import { OxGristEditorParameters } from '@operato/grist-editor/ox-grist-editor-parameters.js'

package/client/editors/entity-selector.ts

@@ -8,11 +8,13 @@ import { DataGrist } from '@operato/data-grist/ox-grist.js'
 import { buildArgs, client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
-import { MultiColumnFormStyles } from '@things-factory/form-ui'
+import { MultiColumnFormStyles } from '@operato/form'
+import { ButtonContainerStyles } from '@operato/styles'
 
 @customElement('entity-selector')
 export class EntitySelector extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     MultiColumnFormStyles,
     css`
       :host {
@@ -26,11 +28,6 @@ export class EntitySelector extends LitElement {
         flex: 1;
       }
 
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
-
       form {
         position: relative;
       }
@@ -68,16 +65,11 @@ export class EntitySelector extends LitElement {
         .fields="${this.searchFields}"
       ></search-form>
 
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.config}
-        .data=${this.data}
-        .fetchHandler="${this.fetchHandler.bind(this)}"
-      ></ox-grist>
+      <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.config} .data=${this.data} .fetchHandler="${this.fetchHandler.bind(this)}"></ox-grist>
 
       <div class="button-container">
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>check</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }
@@ -168,21 +160,9 @@ export class EntitySelector extends LitElement {
         return {
           label: selectField.header || i18next.t(`field.${selectField.name}`),
           name: selectField.name,
-          type:
-            fieldType === 'string'
-              ? 'text'
-              : numberTypes.indexOf(fieldType) >= 0
-              ? 'number'
-              : fieldType === 'boolean'
-              ? 'checkbox'
-              : fieldType,
+          type: fieldType === 'string' ? 'text' : numberTypes.indexOf(fieldType) >= 0 ? 'number' : fieldType === 'boolean' ? 'checkbox' : fieldType,
           queryName: selectField.queryName,
-          props:
-            fieldType === 'string'
-              ? { searchOper: 'i_like' }
-              : fieldType === 'object'
-              ? { searchOper: 'in' }
-              : { searchOper: 'eq' },
+          props: fieldType === 'string' ? { searchOper: 'i_like' } : fieldType === 'object' ? { searchOper: 'in' } : { searchOper: 'eq' },
           attrs: fieldType === 'boolean' ? ['indeterminated'] : []
         }
       })
@@ -273,11 +253,7 @@ export class EntitySelector extends LitElement {
       return `items {
         ${this.select.map(selectField => {
           return selectField.type === 'object'
-            ? `${selectField.name} { ${
-                selectField.subFields && selectField.subFields.length > 0
-                  ? selectField.subFields.join(' ')
-                  : `id name description`
-              } }`
+            ? `${selectField.name} { ${selectField.subFields && selectField.subFields.length > 0 ? selectField.subFields.join(' ') : `id name description`} }`
             : `${selectField.name}`
         })}
       }

package/client/editors/things-editor-entity-selector.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './entity-selector'
 
 import { css, html, LitElement } from 'lit'
@@ -26,7 +26,7 @@ export default class ThingsEditorEntitySelector extends LitElement {
         height: 100%;
       }
 
-      mwc-icon {
+      md-icon {
         position: absolute;
         top: 0;
         right: 0;
@@ -50,7 +50,7 @@ export default class ThingsEditorEntitySelector extends LitElement {
     return html`
       <input id="text" type="text" .value=${this.value || ''} @change=${e => this._onInputChanged(e)} />
 
-      <mwc-icon @click=${e => this.openSelector()}>dashboard</mwc-icon>
+      <md-icon @click=${e => this.openSelector()}>dashboard</md-icon>
     `
   }
 

package/client/editors/things-editor-oracle-procedure.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import '@operato/i18n/ox-i18n.js'
 import { css, html } from 'lit'
@@ -82,8 +82,8 @@ export class ThingsEditorProcedureParameters extends OxFormField {
         margin-left: -5px;
       }
 
-      button mwc-icon {
-        font-size: var(--fontsize-default);
+      button md-icon {
+        --md-icon-size: var(--fontsize-default);
       }
 
       button:focus,
@@ -194,13 +194,13 @@ export class ThingsEditorProcedureParameters extends OxFormField {
             <input type="number" data-max-size placeholder="max-size" .value=${String(item.maxSize)} />
 
             <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">
-              <mwc-icon>remove</mwc-icon>
+              <md-icon>remove</md-icon>
             </button>
             <button class="record-action" @click=${(e: MouseEvent) => this._up(e)} tabindex="-1">
-              <mwc-icon>arrow_upward</mwc-icon>
+              <md-icon>arrow_upward</md-icon>
             </button>
             <button class="record-action" @click=${(e: MouseEvent) => this._down(e)} tabindex="-1">
-              <mwc-icon>arrow_downward</mwc-icon>
+              <md-icon>arrow_downward</md-icon>
             </button>
           </div>
         `
@@ -231,10 +231,10 @@ export class ThingsEditorProcedureParameters extends OxFormField {
         <input type="number" data-max-size placeholder="max-size" value="" />
 
         <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-          <mwc-icon>add</mwc-icon>
+          <md-icon>add</md-icon>
         </button>
-        <button class="hidden"><mwc-icon>add</mwc-icon></button>
-        <button class="hidden"><mwc-icon>add</mwc-icon></button>
+        <button class="hidden"><md-icon>add</md-icon></button>
+        <button class="hidden"><md-icon>add</md-icon></button>
       </div>
 
       <datalist id="step-list">${steps.map(id => html` <option value=${id}></option> `)}</datalist>

package/client/grist/connection-selector.ts

@@ -1,5 +1,3 @@
-import '@material/mwc-icon'
-
 import gql from 'graphql-tag'
 import { customElement } from 'lit/decorators.js'
 

package/client/grist/connector-selector.ts

@@ -1,5 +1,3 @@
-import '@material/mwc-icon'
-
 import gql from 'graphql-tag'
 import { customElement } from 'lit/decorators.js'
 

package/client/grist/dynamic-selector.ts

@@ -1,5 +1,3 @@
-import '@material/mwc-icon'
-
 import { OxGristEditor } from '@operato/data-grist'
 import { html } from 'lit'
 
@@ -35,9 +33,7 @@ export class DynamicSelector extends OxGristEditor {
 
     return html`
       <select>
-        ${options.map(
-          option => html` <option ?selected=${option.name == this.value} value=${option.name}>${option.name}</option> `
-        )}
+        ${options.map(option => html` <option ?selected=${option.name == this.value} value=${option.name}>${option.name}</option> `)}
       </select>
     `
   }

package/client/pages/connection-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -7,11 +8,12 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
-import { CommonGristStyles } from '@operato/styles'
+import { ButtonContainerStyles, CommonGristStyles } from '@operato/styles'
 
 @customElement('connection-importer')
 export class ConnectionImporter extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     CommonGristStyles,
     css`
       :host {
@@ -20,17 +22,10 @@ export class ConnectionImporter extends LitElement {
 
         background-color: #fff;
       }
+
       ox-grist {
         flex: 1;
       }
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -68,14 +63,10 @@ export class ConnectionImporter extends LitElement {
 
   render() {
     return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.columns}
-        .data=${{ records: this.connections }}
-      ></ox-grist>
+      <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.columns} .data=${{ records: this.connections }}></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click=${this.save.bind(this)}>${i18next.t('button.save')}</mwc-button>
+        <button @click=${this.save.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

package/client/pages/scenario-detail.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist/ox-grist.js'
 
 import gql from 'graphql-tag'
@@ -9,12 +10,14 @@ import { client } from '@operato/graphql'
 import { HelpDecoratedRenderer } from '@operato/help/help-decorated-renderer.js'
 import { i18next, localize } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
+import { ButtonContainerStyles } from '@operato/styles'
 
 const SelectFields = ['name', 'description', 'sequence', 'task', 'connection', 'params', 'result', 'skip', 'log']
 
 @customElement('scenario-detail')
 class ScenarioDetail extends localize(i18next)(LitElement) {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
@@ -26,22 +29,6 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      form {
-        position: relative;
-      }
-      [danger] {
-        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-      }
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -53,14 +40,10 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
 
   render() {
     return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-      ></ox-grist>
+      <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>
       <div class="button-container">
-        <mwc-button raised danger @click=${this._deleteSteps.bind(this)}>${i18next.t('button.delete')}</mwc-button>
-        <mwc-button raised @click=${this._updateSteps.bind(this)}>${i18next.t('button.save')}</mwc-button>
+        <button danger @click=${this._deleteSteps.bind(this)}><md-icon>delete</md-icon>${i18next.t('button.delete')}</button>
+        <button @click=${this._updateSteps.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

package/client/pages/scenario-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -7,11 +8,12 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
-import { CommonGristStyles } from '@operato/styles'
+import { ButtonContainerStyles, CommonGristStyles } from '@operato/styles'
 
 @customElement('scenario-importer')
 export class ScenarioImporter extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     CommonGristStyles,
     css`
       :host {
@@ -20,17 +22,10 @@ export class ScenarioImporter extends LitElement {
 
         background-color: #fff;
       }
+
       ox-grist {
         flex: 1;
       }
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -74,14 +69,10 @@ export class ScenarioImporter extends LitElement {
 
   render() {
     return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.columns}
-        .data=${{ records: this.scenarios }}
-      ></ox-grist>
+      <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.columns} .data=${{ records: this.scenarios }}></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click=${this.save.bind(this)}>${i18next.t('button.save')}</mwc-button>
+        <button @click=${this.save.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

package/client/viewparts/connections-monitor.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon-button'
+import '@material/web/icon/icon.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
@@ -67,21 +67,24 @@ export class ConnectionsMonitor extends LitElement {
         background-color: var(--primary-color);
         margin-left: var(--margin-narrow);
       }
+
       [buttons] {
-        --mdc-icon-button-size: 20px;
-        --mdc-icon-size: 20px;
+        --md-icon-size: 20px;
         border-top: 1px dashed rgba(0, 0, 0, 0.1);
         margin: var(--margin-narrow) 0 0 0;
         padding: var(--padding-narrow) 0 0 0;
         text-align: right;
       }
-      [buttons] mwc-icon-button {
+
+      [buttons] md-icon {
         color: rgba(var(--secondary-color-rgb), 0.8);
       }
+
       @media screen and (max-width: 480px) {
         h2 {
           padding: var(--padding-narrow);
         }
+
         [card] span {
           display: none;
         }
@@ -113,11 +116,9 @@ export class ConnectionsMonitor extends LitElement {
         <span>${description}</span>
         <span>Type : ${type}</span>
         <div buttons>
-          <mwc-icon-button
-            @click=${e => (connected ? this.disconnect(connection) : this.connect(connection))}
-            .icon=${connected ? 'link_off' : 'link'}
-            label=${connected ? 'disconnect' : 'connect'}
-          ></mwc-icon-button>
+          <md-icon @click=${e => (connected ? this.disconnect(connection) : this.connect(connection))} title=${connected ? 'disconnect' : 'connect'}
+            >${connected ? 'link_off' : 'link'}</md-icon
+          >
         </div>
       </div>
     `

package/client/viewparts/monitoring-summary.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import { css, html, LitElement } from 'lit'
@@ -56,8 +57,8 @@ export class IntegrationMonitoringSummary extends localize(i18next)(LitElement)
         [card]:nth-child(4) {
           border-right: none;
         }
-        mwc-icon {
-          font-size: var(--fontsize-large);
+        md-icon {
+          --md-icon-size: var(--fontsize-large);
         }
         span {
           line-height: 1;
@@ -124,7 +125,7 @@ export class IntegrationMonitoringSummary extends localize(i18next)(LitElement)
     return html`
       <div card>
         <span>${title}</span>
-        <mwc-icon>${icon}</mwc-icon>
+        <md-icon>${icon}</md-icon>
         <strong> ${value}</strong>
       </div>
     `

package/client/viewparts/pending-q-monitor.ts

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { asyncReplace } from 'lit/directives/async-replace.js'
@@ -23,9 +25,9 @@ export class PendingQMonitor extends LitElement {
         display: flex;
         align-items: center;
       }
-      [tags] mwc-icon {
+      [tags] md-icon {
+        --md-icon-size: var(--fontsize-large);
         margin: 0 var(--margin-narrow) 0 0;
-        font-size: var(--fontsize-large);
       }
 
       select {
@@ -123,7 +125,7 @@ export class PendingQMonitor extends LitElement {
 
     return html`
       <div tags>
-        <mwc-icon>bookmark_border</mwc-icon>
+        <md-icon>bookmark_border</md-icon>
         <select @change=${e => (this.tag = e.target.value)} .value=${tag}>
           <option value="(*)">*</option>
           ${Object.keys(this.tags || {})

package/client/viewparts/scenario-instance-monitor.ts

@@ -1,5 +1,5 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
-import '@material/mwc-icon'
 import './scenario-instance-view'
 
 import gql from 'graphql-tag'
@@ -59,6 +59,7 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
       [running] [progress] {
         background-color: var(--theme-white-color);
       }
+
       [steps] {
         padding: 0 0 0 var(--padding-narrow);
       }
@@ -69,14 +70,16 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
         border-radius: 5px;
         animation: width 1s linear ease-out;
       }
+
       [buttons] {
-        --mdc-icon-button-size: 18px;
-        --mdc-icon-size: 18px;
+        --md-icon-size: 18px;
+
         border-top: var(--border-dark-color);
         padding: var(--padding-narrow) 0 0 0;
         text-align: right;
       }
-      [buttons] mwc-icon-button {
+
+      [buttons] md-icon {
         color: var(--primary-color);
       }
 
@@ -111,8 +114,8 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
       </div>
       <div buttons>
         <span><strong>${rounds}</strong> round</span>
-        <mwc-icon-button @click=${e => this.showInstanceDetail()} icon="wysiwyg"></mwc-icon-button>
-        <mwc-icon-button @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))} icon=${running ? 'pause' : 'play_arrow'}></mwc-icon-button>
+        <md-icon @click=${e => this.showInstanceDetail()}>wysiwyg</md-icon>
+        <md-icon @click=${e => (running ? this.stopScenario(instance) : this.startScenario(instance))}>${running ? 'pause' : 'play_arrow'}</md-icon>
       </div>
     `
   }

package/client/viewparts/scenario-monitor.ts

@@ -1,5 +1,6 @@
+import '@material/web/icon/icon.js'
+
 import '@operato/data-grist'
-import '@material/mwc-icon-button'
 import './scenario-instance-monitor'
 
 import gql from 'graphql-tag'
@@ -86,15 +87,20 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
         line-height: 8px;
       }
 
+      [desc] md-icon {
+        --md-icon-size: 18px;
+        border-radius: 50%;
+        color: var(--theme-white-color);
+      }
+
       [buttons] {
-        --mdc-icon-button-size: 24px;
-        --mdc-icon-size: 24px;
         border-top: var(--border-dark-color);
         padding: var(--padding-narrow) 0 0 0;
         text-align: right;
       }
 
-      [buttons] mwc-icon-button {
+      [buttons] md-icon {
+        --md-icon-size: 22px;
         color: var(--primary-color);
       }
 
@@ -104,12 +110,6 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
         margin-bottom: auto;
       }
 
-      [desc] mwc-icon {
-        border-radius: 50%;
-        color: var(--theme-white-color);
-        font-size: 18px;
-      }
-
       :host([mode='detail']) [schedule] {
         margin: var(--margin-default) 0 0 0;
       }
@@ -194,7 +194,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
           <span>${instances.length}</span>
         </div>
         <div schedule>
-          <mwc-icon .style="background-color: ${color};">schedule</mwc-icon>
+          <md-icon .style="background-color: ${color};">schedule</md-icon>
           <pre>${schedule}</pre>
         </div>
         ${this.renderButtons(scenario)}
@@ -224,10 +224,10 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
 
     return html`
       <div buttons ?detail=${this.mode == 'detail'}>
-        <mwc-icon-button @click=${e => this.popupLogView(scenario)} icon="text_snippet"></mwc-icon-button>
+        <md-icon @click=${e => this.popupLogView(scenario)}>text_snippet</md-icon>
         ${!scenarioInstance
-          ? html` <mwc-icon-button icon="play_circle_outline" @click=${e => this.startScenario(scenario)}></mwc-icon-button>`
-          : html` <mwc-icon-button icon="pause_circle_outline" @click=${e => this.stopScenario(scenario)} stop></mwc-icon-button> `}
+          ? html` <md-icon @click=${e => this.startScenario(scenario)}>play_circle</md-icon>`
+          : html` <md-icon @click=${e => this.stopScenario(scenario)} stop>pause_circle</md-icon> `}
       </div>
     `
   }

package/client/viewparts/scenarios-monitor.ts

@@ -1,5 +1,6 @@
+import '@material/web/icon/icon.js'
+
 import '@operato/data-grist'
-import '@material/mwc-icon-button'
 import './scenario-monitor'
 
 import { css, html, LitElement } from 'lit'
@@ -38,6 +39,7 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
       [info] > span {
         display: flex;
         margin-left: auto;
+        align-items: center;
       }
       [info] input {
         margin: var(--input-margin);
@@ -46,13 +48,13 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
         border-radius: var(--border-radius);
         font: var(--input-font);
       }
-      [info] mwc-icon {
+      [info] md-icon {
         margin-left: var(--margin-narrow);
         color: rgba(var(--secondary-color-rgb), 0.6);
         line-height: 34px;
         cursor: pointer;
       }
-      [info] mwc-icon[active] {
+      [info] md-icon[active] {
         color: var(--primary-color);
       }
 
@@ -123,8 +125,8 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
         <h2>scenarios</h2>
         <span>
           <input .value=${filter} @change=${e => (this.filter = e.target.value)} placeholder="search" />
-          <mwc-icon @click=${e => (this.mode = 'brief')} ?active=${mode == 'brief'}>view_comfy</mwc-icon>
-          <mwc-icon @click=${e => (this.mode = 'detail')} ?active=${mode == 'detail'}>dehaze</mwc-icon>
+          <md-icon @click=${e => (this.mode = 'brief')} ?active=${mode == 'brief'}>view_comfy</md-icon>
+          <md-icon @click=${e => (this.mode = 'detail')} ?active=${mode == 'detail'}>dehaze</md-icon>
         </span>
       </div>
 

package/dist-client/bootstrap.d.ts

@@ -1,4 +1,3 @@
-import '@material/mwc-icon';
 import './editors/entity-editor';
 import './editors/property-editor';
 export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -1,4 +1,3 @@
-import '@material/mwc-icon';
 import './editors/entity-editor';
 import './editors/property-editor';
 import { OxGristEditorJson } from '@operato/app/grist-editor/ox-grist-editor-json.js';