@operato/grist-editor 2.0.0-alpha.64 → 2.0.0-alpha.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/grist-editor",
-  "version": "2.0.0-alpha.64",
+  "version": "2.0.0-alpha.68",
   "description": "Webcomponent for grist-editor following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -95,16 +95,14 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@material/mwc-button": "^0.27.0",
-    "@material/mwc-icon": "^0.27.0",
-    "@material/mwc-icon-button": "^0.27.0",
-    "@operato/data-grist": "^2.0.0-alpha.64",
-    "@operato/help": "^2.0.0-alpha.64",
+    "@material/web": "^1.4.0",
+    "@operato/data-grist": "^2.0.0-alpha.68",
+    "@operato/help": "^2.0.0-alpha.68",
     "@operato/i18n": "^2.0.0-alpha.59",
-    "@operato/input": "^2.0.0-alpha.64",
-    "@operato/popup": "^2.0.0-alpha.62",
-    "@operato/property-editor": "^2.0.0-alpha.64",
-    "@operato/styles": "^2.0.0-alpha.62",
+    "@operato/input": "^2.0.0-alpha.68",
+    "@operato/popup": "^2.0.0-alpha.68",
+    "@operato/property-editor": "^2.0.0-alpha.68",
+    "@operato/styles": "^2.0.0-alpha.68",
     "cronstrue": "^2.2.0",
     "cross-fetch": "^3.1.5",
     "lit": "^3.1.2",
@@ -113,8 +111,6 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.2",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@material/mwc-fab": "^0.27.0",
-    "@material/mwc-icon": "^0.27.0",
     "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^3.1.6",
     "@types/lodash-es": "^4.17.5",
@@ -146,5 +142,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "51399aac2553f6a1c2c242295ba9e996f3562067"
+  "gitHead": "147f2ca9e09180c6851dccacf340fc660e7548ab"
 }

package/src/ox-grist-editor-partition-keys.ts

@@ -18,7 +18,7 @@ export class OxGristEditorPartitionKeys extends OxGristEditor {
 
   get editorTemplate() {
     return this.value && this.value instanceof Array && this.value.length > 0
-      ? html`<mwc-icon style="--mdc-icon-size:1.3em">key</mwc-icon>`
+      ? html`<md-icon style="--md-icon-size:1.3em">key</md-icon>`
       : html``
   }
 

package/src/ox-grist-renderer-partition-keys.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import { html } from 'lit'
 import { FieldRenderer } from '@operato/data-grist'
 
@@ -15,11 +15,11 @@ function onmouseout(e: MouseEvent) {
 
 export const OxGristRendererPartitionKeys: FieldRenderer = (value, column, record, rowIndex, field) => {
   return value && value instanceof Array && value.length > 0
-    ? html`<mwc-icon
-        style="--mdc-icon-size:1.3em"
+    ? html`<md-icon
+        style="--md-icon-size:1.3em"
         @mouseover=${(e: MouseEvent) => onmouseover(e, value)}
         @mouseout=${onmouseout}
-        >key</mwc-icon
+        >key</md-icon
       >`
     : html``
 }

package/src/ox-popup-crontab-input.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/input/ox-input-crontab.js'
 
 import { css, html, LitElement } from 'lit'
@@ -52,8 +53,8 @@ export class OxPopupCrontabInput extends LitElement {
       <ox-input-crontab .value=${this.value} @change=${this.onChange.bind(this)}> </ox-input-crontab>
 
       <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>
+        <md-elevated-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</md-elevated-button>
+        <md-elevated-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</md-elevated-button>
       </div>
     `
   }

package/src/ox-popup-duration-input.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/input/ox-input-duration.js'
 
 import { css, html, LitElement } from 'lit'
@@ -42,8 +43,8 @@ export class OxPopupDurationInput extends LitElement {
       <ox-input-duration .value=${this.value} @change=${this.onChange.bind(this)}> </ox-input-duration>
 
       <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>
+        <md-elevated-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</md-elevated-button>
+        <md-elevated-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</md-elevated-button>
       </div>
     `
   }

package/src/ox-popup-hashtags-input.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/input/ox-input-hashtags.js'
 
 import { css, html, LitElement } from 'lit'
@@ -42,8 +43,8 @@ export class OxPopupHashtagsInput extends LitElement {
       <ox-input-hashtags .value=${this.value} @change=${this.onChange.bind(this)}> </ox-input-hashtags>
 
       <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>
+        <md-elevated-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</md-elevated-button>
+        <md-elevated-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</md-elevated-button>
       </div>
     `
   }

package/src/ox-popup-i18n-label-input.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/input/ox-input-i18n-label.js'
 
 import { css, html, LitElement } from 'lit'
@@ -55,8 +56,8 @@ export class OxPopupValueMapInput extends LitElement {
       </ox-input-i18n-label>
 
       <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>
+        <md-elevated-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</md-elevated-button>
+        <md-elevated-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</md-elevated-button>
       </div>
     `
   }

package/src/ox-popup-parameters-builder.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/i18n/ox-i18n.js'
 
 import { css, html, LitElement } from 'lit'
@@ -68,8 +69,8 @@ export class OxPopupParametersBuilder extends LitElement {
         : html` <span><ox-i18n msgid="text.no properties to set"></ox-i18n></span> `}
 
       <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>
+        <md-elevated-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</md-elevated-button>
+        <md-elevated-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</md-elevated-button>
       </div>
     `
   }

package/src/ox-popup-partition-keys-input.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/input/ox-input-partition-keys.js'
 
 import { css, html, LitElement } from 'lit'
@@ -54,8 +55,8 @@ export class OxPopupPartitionKeysInput extends LitElement {
       <ox-input-partition-keys .value=${this.value} @change=${this.onChange.bind(this)}> </ox-input-partition-keys>
 
       <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>
+        <md-elevated-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</md-elevated-button>
+        <md-elevated-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</md-elevated-button>
       </div>
     `
   }

package/src/ox-popup-value-map-input.ts

@@ -1,3 +1,5 @@
+import '@material/web/button/elevated-button.js'
+
 import '@operato/input/ox-input-value-map.js'
 
 import { css, html, LitElement } from 'lit'
@@ -61,8 +63,8 @@ export class OxPopupValueMapInput extends LitElement {
       </ox-input-value-map>
 
       <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>
+        <md-elevated-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</md-elevated-button>
+        <md-elevated-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</md-elevated-button>
       </div>
     `
   }

package/src/ox-popup-value-ranges-input.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/input/ox-input-value-ranges.js'
 
 import { css, html, LitElement } from 'lit'
@@ -61,8 +62,8 @@ export class OxPopupValueRangesInput extends LitElement {
       </ox-input-value-ranges>
 
       <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>
+        <md-elevated-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</md-elevated-button>
+        <md-elevated-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</md-elevated-button>
       </div>
     `
   }

package/stories/ox-grist-editor-crontab.stories.ts

@@ -6,7 +6,7 @@ import '@operato/property-editor/ox-properties-dynamic-view.js'
 import '@operato/data-grist'
 import '@operato/data-grist/ox-filters-form.js'
 import '@operato/data-grist/ox-sorters-control.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 /* set grist-editors */
 import { css, html, LitElement, TemplateResult } from 'lit'
@@ -348,9 +348,9 @@ class GristDemo extends LitElement {
 
         <div slot="headroom" id="headroom">
           <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>
       </ox-grist>
@@ -374,67 +374,78 @@ interface Story<T> {
 
 interface ArgTypes {}
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) =>
-  html`
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="/themes/oops-theme.css" rel="stylesheet" />
-    <link href="/themes/grist-theme.css" rel="stylesheet" />
-
-    <style>
-      [slot='headroom'] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding: var(--padding-default) var(--padding-wide);
-        background-color: var(--theme-white-color);
-        box-shadow: var(--box-shadow);
-
-        --mdc-icon-size: 24px;
-      }
-      #sorters mwc-icon,
-      #modes mwc-icon {
-        --mdc-icon-size: 18px;
-      }
-      #sorters {
-        margin-left: auto;
-        margin-right: var(--margin-default);
-        padding-left: var(--padding-narrow);
-        border-bottom: var(--border-dark-color);
-        position: relative;
-        color: var(--secondary-color);
-        font-size: var(--fontsize-default);
-        user-select: none;
-      }
-
-      #sorters > * {
-        padding: var(--padding-narrow);
-        vertical-align: middle;
-      }
-
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/oops-theme.css" rel="stylesheet" />
+  <link href="/themes/grist-theme.css" rel="stylesheet" />
+
+  <style>
+    [slot='headroom'] {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: var(--padding-default) var(--padding-wide);
+      background-color: var(--theme-white-color);
+      box-shadow: var(--box-shadow);
+
+      --md-icon-size: 24px;
+    }
+    #sorters md-icon,
+    #modes md-icon {
+      --md-icon-size: 18px;
+    }
+    #sorters {
+      margin-left: auto;
+      margin-right: var(--margin-default);
+      padding-left: var(--padding-narrow);
+      border-bottom: var(--border-dark-color);
+      position: relative;
+      color: var(--secondary-color);
+      font-size: var(--fontsize-default);
+      user-select: none;
+    }
+
+    #sorters > * {
+      padding: var(--padding-narrow);
+      vertical-align: middle;
+    }
+
+    #filters {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    #filters * {
+      margin-right: var(--margin-default);
+    }
+
+    @media only screen and (max-width: 460px) {
       #filters {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      #filters * {
-        margin-right: var(--margin-default);
+        flex-direction: column;
       }
 
-      @media only screen and (max-width: 460px) {
-        #filters {
-          flex-direction: column;
-        }
-
-        #modes {
-          display: none;
-        }
+      #modes {
+        display: none;
       }
-    </style>
+    }
+  </style>
 
-    <ox-grist-demo mode="LIST"></ox-grist-demo>
-  `
+  <ox-grist-demo mode="LIST"></ox-grist-demo>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}