@operato/process 2.0.0-alpha.13 → 2.0.0-alpha.131

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/process",
-  "version": "2.0.0-alpha.13",
+  "version": "2.0.0-alpha.131",
   "description": "Webcomponent for business process modeling following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -68,50 +68,50 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^2.1.3",
-    "@operato/app": "^2.0.0-alpha.13",
-    "@operato/board": "^2.0.0-alpha.13",
-    "@operato/data-grist": "^2.0.0-alpha.13",
-    "@operato/font": "^2.0.0-alpha.13",
-    "@operato/graphql": "^2.0.0-alpha.0",
-    "@operato/i18n": "^2.0.0-alpha.0",
-    "@operato/input": "^2.0.0-alpha.13",
-    "@operato/markdown": "^2.0.0-alpha.0",
-    "@operato/popup": "^2.0.0-alpha.9",
-    "@operato/property-editor": "^2.0.0-alpha.13",
-    "@operato/styles": "^2.0.0-alpha.0",
-    "@operato/utils": "^2.0.0-alpha.8",
+    "@operato/app": "^2.0.0-alpha.131",
+    "@operato/board": "^2.0.0-alpha.131",
+    "@operato/data-grist": "^2.0.0-alpha.131",
+    "@operato/font": "^2.0.0-alpha.131",
+    "@operato/graphql": "^2.0.0-alpha.111",
+    "@operato/i18n": "^2.0.0-alpha.111",
+    "@operato/input": "^2.0.0-alpha.129",
+    "@operato/markdown": "^2.0.0-alpha.129",
+    "@operato/popup": "^2.0.0-alpha.129",
+    "@operato/property-editor": "^2.0.0-alpha.131",
+    "@operato/styles": "^2.0.0-alpha.129",
+    "@operato/utils": "^2.0.0-alpha.122",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
     "dexie": "^3.2.2",
     "file-saver": "^2.0.5",
-    "lit": "^2.5.0",
+    "lit": "^3.1.2",
     "lodash-es": "^4.17.21",
-    "sortablejs": "^1.14.0"
+    "sortablejs": "^1.15.2"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.8.1",
+    "@custom-elements-manifest/analyzer": "^0.9.2",
     "@hatiolab/prettier-config": "^1.0.0",
     "@hatiolab/things-scene": "^3.2.0",
-    "@material/mwc-fab": "^0.27.0",
-    "@material/mwc-icon": "^0.27.0",
-    "@open-wc/eslint-config": "^10.0.0",
+    "@material/web": "^1.4.0",
+    "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^3.1.6",
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^4.1.0",
     "@types/lodash-es": "^4.17.6",
     "@types/w3c-web-usb": "^1.0.5",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "@web/dev-server": "^0.3.0",
-    "@web/dev-server-storybook": "^0.7.4",
-    "@web/test-runner": "^0.17.0",
+    "@web/dev-server-storybook": "^2.0.1",
+    "@web/test-runner": "^0.18.0",
+    "@webcomponents/scoped-custom-element-registry": "^0.0.9",
     "concurrently": "^8.0.1",
     "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^9.1.0",
     "husky": "^7.0.2",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.4.1",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "tslib": "^2.3.1",
     "typescript": "^5.0.4"
   },
@@ -128,5 +128,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "112ec6a672e96837e01ffe55048f543fffa19e02"
+  "gitHead": "48271ff32be26111347ce27d120b238ae14e15ae"
 }

package/src/modeller/component-toolbar/component-menu.ts

@@ -4,6 +4,7 @@ import { property, query, state } from 'lit/decorators.js'
 import { Scene } from '@hatiolab/things-scene'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 import { ScrollbarStyles } from '@operato/styles'
+import { i18next } from '@operato/i18n'
 
 import { Pallet, PalletItem } from '../../types'
 import { ComponentDetail } from './component-detail'
@@ -65,6 +66,7 @@ export class ComponentMenu extends ScopedElementsMixin(LitElement) {
         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         font-size: 11px;
         color: var(--component-menu-item-color);
+        text-transform: capitalize;
       }
 
       [template]:hover,
@@ -116,13 +118,15 @@ export class ComponentMenu extends ScopedElementsMixin(LitElement) {
           <h2 @click=${(e: MouseEvent) => e.stopPropagation()}>${this.group} list</h2>
 
           <div templates @mouseover=${(e: MouseEvent) => this.onHoverComponent(e)}>
-            ${(this.templates || []).map(
-              template => html`
-                <div @click=${this.onClickTemplate} data-type=${template.type} template>
-                  <img src=${String(this.templateIcon(template))} />${template.type}
+            ${(this.templates || []).map(template => {
+              const { type } = template
+
+              return html`
+                <div @click=${this.onClickTemplate} data-type=${type} template>
+                  <img src=${String(this.templateIcon(template))} />${i18next.t(`component.${type}`)}
                 </div>
               `
-            )}
+            })}
           </div>
 
           <process-component-detail

package/src/modeller/component-toolbar/component-toolbar.ts

@@ -84,11 +84,14 @@ export class ComponentToolbar extends ScopedElementsMixin(LitElement) {
 
       this.icons = (this.componentGroupList || [])
         .filter(group => group.templates?.length > 0)
-        .reduce((sum, group: ComponentGroup) => {
-          sum[group.name] =
-            'data:image/svg+xml;charset=UTF-8;base64,' + btoa(group.icon.replace(/{{strokeColor}}/g, color))
-          return sum
-        }, {} as { [name: string]: string })
+        .reduce(
+          (sum, group: ComponentGroup) => {
+            sum[group.name] =
+              'data:image/svg+xml;charset=UTF-8;base64,' + btoa(group.icon.replace(/{{strokeColor}}/g, color))
+            return sum
+          },
+          {} as { [name: string]: string }
+        )
 
       this.icons['mode-edit'] =
         'data:image/svg+xml;charset=UTF-8;base64,' + btoa(ICON_EDIT_MODE.replace(/{{strokeColor}}/g, color))

package/src/modeller/edit-toolbar.ts

@@ -190,7 +190,7 @@ export class EditToolbar extends LitElement {
         <span class="vline"></span>
 
         <span button id="font-increase" title="increase font size"></span>
-        <span button id="font-decrease" title="decrease font size"></span>
+        <span button id="font-decrease" title="decrease font size" style="scale: 0.7;"></span>
 
         <span class="vline"></span>
         <span padding></span>

package/src/modeller/property-sidebar/data-binding/data-binding.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/help/ox-title-with-help.js'
 import '@operato/input/ox-buttons-radio.js'
 import '@operato/input/ox-input-data.js'
@@ -54,7 +54,7 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
         justify-content: space-between;
       }
 
-      #tab-header > mwc-icon {
+      #tab-header > md-icon {
         padding: 0;
         margin: 0;
         width: 25px;
@@ -68,7 +68,7 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
         width: 100%;
       }
 
-      fieldset[collapsable] legend mwc-icon {
+      fieldset[collapsable] legend md-icon {
         float: right;
         font-size: medium;
         margin: 0;
@@ -129,20 +129,20 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
         padding: 7px 5px 2px 5px;
       }
 
-      mwc-icon {
+      md-icon {
         margin-left: 5px;
         color: var(--secondary-color);
         opacity: 0.8;
         cursor: pointer;
-        --mdc-icon-size: 18px;
+        --md-icon-size: 18px;
       }
 
-      mwc-icon:hover {
+      md-icon:hover {
         color: var(--primary-color);
         opacity: 1;
       }
 
-      mwc-icon[disabled] {
+      md-icon[disabled] {
         color: rgba(0, 0, 0, 0.1);
       }
 
@@ -158,7 +158,7 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
           font-size: 15px;
           font-weight: 300;
           -webkit-appearance: none;
-        }
+        };
       }
     `
   ]
@@ -251,11 +251,11 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
           <ox-title-with-help topic="board-modeller/initial-data" msgid="label.initial-data"
             >initial value</ox-title-with-help
           >
-          <mwc-icon
+          <md-icon
             @click=${() => {
               this._dataExpanded = !this._dataExpanded
             }}
-            >${this._dataExpanded ? 'expand_less' : 'expand_more'}</mwc-icon
+            >${this._dataExpanded ? 'expand_less' : 'expand_more'}</md-icon
           >
         </legend>
         <ox-input-data value-key="data" .value=${value.data}> </ox-input-data>
@@ -269,13 +269,13 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
         </legend>
 
         <div id="tab-header">
-          <mwc-icon
+          <md-icon
             id="tab-nav-left-button"
             @click=${() => {
               this._onTabScrollNavLeft()
             }}
             disabled
-            >chevron_left</mwc-icon
+            >chevron_left</md-icon
           >
 
           <ox-buttons-radio
@@ -290,23 +290,23 @@ export class PropertyDataBinding extends ScopedElementsMixin(AbstractProperty) {
             <div data-value=${this.mappings.length} data-mapping disabled>${this.mappings.length + 1}</div>
           </ox-buttons-radio>
 
-          <mwc-icon
+          <md-icon
             id="tab-nav-right-button"
             @click=${(e: Event) => {
               this._onTabScrollNavRight()
             }}
             disabled
-            >chevron_right</mwc-icon
+            >chevron_right</md-icon
           >
         </div>
 
         <div binding>
-          <mwc-icon style="font-size:19px" @click=${() => this._clearDataBindingMapper()} title="delete current tab"
-            >delete_forever</mwc-icon
+          <md-icon style="font-size:19px" @click=${() => this._clearDataBindingMapper()} title="delete current tab"
+            >delete_forever</md-icon
           >
-          <mwc-icon @click=${() => this._pasteDataBindingMapper()} title="replace current tab">content_paste</mwc-icon>
-          <mwc-icon style="font-size:17px" @click=${() => this._copyDataBindingMapper()} title="copy current tab"
-            >content_copy</mwc-icon
+          <md-icon @click=${() => this._pasteDataBindingMapper()} title="replace current tab">content_paste</md-icon>
+          <md-icon style="font-size:17px" @click=${() => this._copyDataBindingMapper()} title="copy current tab"
+            >content_copy</md-icon
           >
         </div>
 

package/src/modeller/property-sidebar/inspector/inspector.ts

@@ -391,7 +391,7 @@ export class SceneInspector extends LitElement {
         <span>
           ${depth > 0
             ? html`
-                <mwc-icon class="eye">${component.get('hidden') ? 'visibility_off' : 'visibility'}</mwc-icon>
+                <md-icon class="eye">${component.get('hidden') ? 'visibility_off' : 'visibility'}</md-icon>
                 <pre>${' '.repeat(depth)}</pre>
               `
             : html` <pre>${' '.repeat(depth + 2)}</pre> `}

package/src/modeller/property-sidebar/property-sidebar.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
 import { property } from 'lit/decorators.js'
@@ -41,7 +41,7 @@ export class PropertySidebar extends ScopedElementsMixin(LitElement) {
         opacity: 0.85;
       }
 
-      [tab] mwc-icon {
+      [tab] md-icon {
         flex: 1;
 
         display: flex;
@@ -116,12 +116,12 @@ export class PropertySidebar extends ScopedElementsMixin(LitElement) {
           this.tabName = (e.target as HTMLElement).getAttribute('name')
         }}
       >
-        <mwc-icon name="specific" ?selected=${tabName == 'specific'}>tune</mwc-icon>
-        <mwc-icon name="shape" ?selected=${tabName == 'shape'}>format_shapes</mwc-icon>
-        <mwc-icon name="style" ?selected=${tabName == 'style'}>palette</mwc-icon>
-        <mwc-icon name="effect" ?selected=${tabName == 'effect'}>movie_filter</mwc-icon>
-        <mwc-icon name="data-binding" ?selected=${tabName == 'data-binding'}>share</mwc-icon>
-        <mwc-icon name="inspector" ?selected=${tabName == 'inspector'}>visibility</mwc-icon>
+        <md-icon name="specific" ?selected=${tabName == 'specific'}>tune</md-icon>
+        <md-icon name="shape" ?selected=${tabName == 'shape'}>format_shapes</md-icon>
+        <md-icon name="style" ?selected=${tabName == 'style'}>palette</md-icon>
+        <md-icon name="effect" ?selected=${tabName == 'effect'}>movie_filter</md-icon>
+        <md-icon name="data-binding" ?selected=${tabName == 'data-binding'}>share</md-icon>
+        <md-icon name="inspector" ?selected=${tabName == 'inspector'}>visibility</md-icon>
       </div>
 
       <div content>

package/src/modeller/property-sidebar/shapes/shapes.ts

@@ -4,7 +4,7 @@
 
 import '@operato/input/ox-input-angle.js'
 import '@operato/input/ox-buttons-radio.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/i18n/ox-i18n.js'
 import '@operato/help/ox-title-with-help.js'
 
@@ -28,7 +28,7 @@ export class PropertyShapes extends AbstractProperty {
         width: 100%;
       }
 
-      fieldset[collapsable] legend mwc-icon {
+      fieldset[collapsable] legend md-icon {
         float: right;
         font-size: medium;
         margin: 0;
@@ -223,11 +223,11 @@ export class PropertyShapes extends AbstractProperty {
             <fieldset class="icon-label unit ratio" collapsable ?collapsed=${!this._3dExpanded}>
               <legend>
                 <ox-title-with-help topic="process-modeller/shapes/3dish" msgid="label.3dish">3D</ox-title-with-help>
-                <mwc-icon
+                <md-icon
                   @click=${(e: Event) => {
                     this._3dExpanded = !this._3dExpanded
                   }}
-                  >${this._3dExpanded ? 'expand_less' : 'expand_more'}</mwc-icon
+                  >${this._3dExpanded ? 'expand_less' : 'expand_more'}</md-icon
                 >
               </legend>
 
@@ -279,6 +279,17 @@ export class PropertyShapes extends AbstractProperty {
                   <label for="checkbox-textwrap"> <ox-i18n msgid="label.text-wrap">Text Wrap</ox-i18n> </label>
                 </div>
 
+                ${!value.textWrap
+                  ? html` <label for="checkbox-textOverflow">
+                        <ox-i18n msgid="label.text-overflow">Text Overflow</ox-i18n>
+                      </label>
+                      <select value-key="textOverflow" .value=${value.textOverflow || ''}>
+                        <option value="" selected>none</option>
+                        <option value="ellipsis">ellipsis</option>
+                        <option value="clip">clip</option>
+                      </select>`
+                  : ''}
+
                 <label> <ox-i18n msgid="label.padding">padding</ox-i18n> </label>
                 <table class="box-padding">
                   <tr>

package/src/modeller/property-sidebar/specifics/specifics.ts

@@ -10,6 +10,8 @@ import { property } from 'lit/decorators.js'
 import { Component, Scene } from '@hatiolab/things-scene'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 
+import { i18next } from '@operato/i18n'
+
 import { PropertySharedStyle } from '../property-shared-style'
 import { SpecificPropertiesBuilder } from './specific-properties-builder.js'
 
@@ -58,7 +60,9 @@ export class PropertySpecific extends ScopedElementsMixin(LitElement) {
     const value = this.value || {}
 
     return html`
-      <label>${value.type}<ox-help-icon .topic=${selected?.nature?.help}></ox-help-icon></label>
+      <label
+        >${i18next.t(`component.${value.type}`)}<ox-help-icon .topic=${selected?.nature?.help}></ox-help-icon
+      ></label>
 
       <property-specific-properties-builder .value=${value} .props=${this.props} .propertyEditor=${this.propertyEditor}>
       </property-specific-properties-builder>

package/src/ox-editor-process-selector.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './selector/ox-process-selector'
 
 import { css, html, LitElement } from 'lit'
@@ -28,7 +28,7 @@ export class ProcessSelector extends LitElement {
           border: 1px solid rgba(0, 0, 0, 0.2);
         }
 
-        mwc-icon {
+        md-icon {
           position: absolute;
           top: 0;
           right: 0;
@@ -46,7 +46,7 @@ export class ProcessSelector extends LitElement {
     return html`
       <input id="text" type="text" .value=${this.value || ''} @change=${(e: Event) => this._onInputChanged(e)} />
 
-      <mwc-icon @click=${(e: MouseEvent) => this.openSelector()}>dashboard</mwc-icon>
+      <md-icon @click=${(e: MouseEvent) => this.openSelector()}>dashboard</md-icon>
     `
   }
 

package/src/ox-process-list.ts

@@ -44,7 +44,7 @@ class ProcessList extends LitElement {
 
     #filters {
       flex: 1;
-      --mdc-icon-size: 20px;
+      --md-icon-size: 20px;
     }
     #mode {
       width: 100px;
@@ -62,33 +62,39 @@ class ProcessList extends LitElement {
       cursor: pointer;
     }
 
-    #modes > mwc-icon[active] {
+    #modes > md-icon[active] {
       border-radius: 9px;
       background-color: rgba(var(--primary-color-rgb), 0.05);
       opacity: 1;
       color: var(--secondary-text-color);
       cursor: default;
     }
-    #modes > mwc-icon:hover {
+    #modes > md-icon:hover {
       opacity: 1;
       color: var(--secondary-text-color);
     }
 
     #add button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
       background-color: var(--primary-color);
       border: 0;
       border-radius: 50%;
       padding: 5px;
-      width: 36px;
-      height: 36px;
+      width: 32px;
+      height: 32px;
       cursor: pointer;
     }
+
     #add button:hover {
       background-color: var(--focus-background-color);
       box-shadow: var(--box-shadow);
     }
-    #add button mwc-icon {
-      font-size: 2em;
+
+    #add button md-icon {
+      font-size: 1.5em;
       color: var(--theme-white-color);
     }
 
@@ -105,7 +111,7 @@ class ProcessList extends LitElement {
     #filters [type='text']:focus {
       outline: none;
     }
-    #filters mwc-icon {
+    #filters md-icon {
       position: absolute;
       top: 3px;
       color: var(--secondary-color);
@@ -152,7 +158,7 @@ class ProcessList extends LitElement {
       <ox-grist .config=${this.config} .mode=${mode} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" id="headroom">
           <div id="filters">
-            <mwc-icon>search</mwc-icon>
+            <md-icon>search</md-icon>
             <input type="text" />
 
             <select
@@ -163,22 +169,23 @@ class ProcessList extends LitElement {
             >
               <option value="">*</option>
               ${this.groups.map(
-                group =>
-                  html` <option value=${group.id} ?selected=${group.id === this.groupId}>${group.description}</option> `
+                group => html`
+                  <option value=${group.id} ?selected=${group.id === this.groupId}>${group.description}</option>
+                `
               )}
             </select>
           </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>
 
           ${this.creatable
             ? html`
                 <div id="add">
-                  <button><mwc-icon @click=${() => this.onCreateProcess()}>add</mwc-icon></button>
+                  <button><md-icon @click=${() => this.onCreateProcess()}>add</md-icon></button>
                 </div>
               `
             : undefined}

package/src/ox-process-modeller.ts

@@ -1,4 +1,6 @@
-import '@material/mwc-fab'
+import '@material/web/icon/icon.js'
+import '@material/web/fab/fab.js'
+
 import '@operato/board/ox-scene-handler.js'
 import '@operato/board/ox-scene-layer.js'
 import '@operato/board/ox-scene-property.js'
@@ -84,7 +86,7 @@ export class OxProcessModeller extends ScopedElementsMixin(LitElement) {
         height: 100%;
       }
 
-      mwc-fab {
+      md-fab {
         position: absolute;
         right: 15px;
         bottom: 15px;
@@ -275,7 +277,9 @@ export class OxProcessModeller extends ScopedElementsMixin(LitElement) {
             <ox-scene-handler type="move-handler"></ox-scene-handler>
           </ox-scene-viewer>
 
-          <mwc-fab icon="save" @click=${() => this.onTapSave()} title="save"> </mwc-fab>
+          <md-fab @click=${() => this.onTapSave()} title="save">
+            <md-icon slot="icon">save</md-icon>
+          </md-fab>
         </div>
 
         <process-property-sidebar

package/src/ox-process-viewer.ts

@@ -1,5 +1,5 @@
-import '@material/mwc-fab'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
+import '@material/web/fab/fab.js'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
@@ -37,7 +37,8 @@ export class OxProcessViewer extends LitElement {
       }
 
       /* navigation buttons */
-      mwc-icon {
+      #prev,
+      #next {
         z-index: 10;
         position: absolute;
         top: 45%;
@@ -49,14 +50,14 @@ export class OxProcessViewer extends LitElement {
         color: #fff;
         user-select: none;
 
-        --mdc-icon-size: 3em;
+        --md-icon-size: 3em;
       }
 
-      mwc-icon[hidden] {
+      md-icon[hidden] {
         display: none;
       }
 
-      mwc-icon:hover {
+      md-icon:hover {
         background-color: rgba(0, 0, 0, 0.2);
         border-radius: 50%;
       }
@@ -80,8 +81,8 @@ export class OxProcessViewer extends LitElement {
       }
 
       @media print {
-        mwc-fab,
-        mwc-icon {
+        md-fab,
+        md-icon {
           display: none;
         }
       }
@@ -115,39 +116,40 @@ export class OxProcessViewer extends LitElement {
     var fullscreen =
       !isIOS() && !this.hideFullscreen
         ? html`
-            <mwc-fab
+            <md-fab
               id="fullscreen"
-              .icon=${document.fullscreenElement ? 'fullscreen_exit' : 'fullscreen'}
               @click=${(e: Event) => this.onTapFullscreen()}
               @mouseover=${(e: Event) => this.transientShowButtons(true)}
               @mouseout=${(e: Event) => this.transientShowButtons()}
               title="fullscreen"
-            ></mwc-fab>
+            >
+              <md-icon slot="icon">${document.fullscreenElement ? 'fullscreen_exit' : 'fullscreen'}</md-icon>
+            </md-fab>
           `
         : html``
 
     var prev = !this.hideNavigation
       ? html`
-          <mwc-icon
+          <md-icon
             id="prev"
             @click=${(e: Event) => this.onTapPrev()}
             @mouseover=${(e: Event) => this.transientShowButtons(true)}
             @mouseout=${(e: Event) => this.transientShowButtons()}
             hidden
-            >keyboard_arrow_left</mwc-icon
+            >keyboard_arrow_left</md-icon
           >
         `
       : html``
 
     var next = !this.hideNavigation
       ? html`
-          <mwc-icon
+          <md-icon
             id="next"
             @click=${(e: Event) => this.onTapNext()}
             @mouseover=${(e: Event) => this.transientShowButtons(true)}
             @mouseout=${(e: Event) => this.transientShowButtons()}
             hidden
-            >keyboard_arrow_right</mwc-icon
+            >keyboard_arrow_right</md-icon
           >
         `
       : html``