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

package/stories/accumulator.stories.ts

@@ -3,7 +3,7 @@ import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
 import '../src/record-view/record-creator.js'
 import '@operato/popup/ox-popup-list.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
@@ -202,7 +202,19 @@ interface ArgTypes {
 }
 
 const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>
-  html` <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  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" />
@@ -220,11 +232,11 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
         background-color: var(--theme-white-color);
         box-shadow: var(--box-shadow);
 
-        --mdc-icon-size: 24px;
+        --md-icon-size: 24px;
       }
-      #sorters mwc-icon,
-      #modes mwc-icon {
-        --mdc-icon-size: 18px;
+      #sorters md-icon,
+      #modes md-icon {
+        --md-icon-size: 18px;
       }
       #sorters {
         margin-left: auto;
@@ -249,7 +261,7 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
         cursor: pointer;
       }
 
-      #modes > mwc-icon[active] {
+      #modes > md-icon[active] {
         border-radius: 9px;
         background-color: rgba(var(--primary-color-rgb), 0.05);
         opacity: 1;
@@ -257,7 +269,7 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
         cursor: default;
       }
 
-      #modes > mwc-icon:hover {
+      #modes > md-icon:hover {
         opacity: 1;
         color: var(--secondary-text-color);
       }
@@ -282,7 +294,7 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
         box-shadow: var(--box-shadow);
       }
 
-      #add button mwc-icon {
+      #add button md-icon {
         font-size: 2em;
         color: var(--theme-white-color);
       }
@@ -321,7 +333,7 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
         </div>
 
         <ox-record-creator id="add" light-popup>
-          <button><mwc-icon>add</mwc-icon></button>
+          <button><md-icon>add</md-icon></button>
         </ox-record-creator>
       </div>
     </ox-grist>`

package/stories/barcode-input-filter.stories.ts

@@ -2,7 +2,7 @@ import '../src/index.js'
 import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
 import '@operato/popup/ox-popup-list.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
@@ -135,95 +135,104 @@ interface ArgTypes {
   headerFilter: boolean
 }
 
-const Template: Story<ArgTypes> = ({ englishOnly, selectAfterChange, headerFilter }: 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;
-    }
-
-    #filters {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+const Template: Story<ArgTypes> = ({ englishOnly, selectAfterChange, headerFilter }: 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;
+      }
 
-    #filters * {
-      margin-right: var(--margin-default);
-    }
+      #sorters > * {
+        padding: var(--padding-narrow);
+        vertical-align: middle;
+      }
 
-    @media only screen and (max-width: 460px) {
       #filters {
-        flex-direction: column;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
-      #modes {
-        display: none;
+      #filters * {
+        margin-right: var(--margin-default);
       }
-    }
-  </style>
-
-  <ox-grist
-    .config=${buildConfig({ englishOnly, selectAfterChange, headerFilter })}
-    mode="GRID"
-    .fetchHandler=${fetchHandler}
-    @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
-  >
-    <div slot="headroom">
-      <div id="filters">
-        <ox-filters-form></ox-filters-form>
-      </div>
 
-      <div id="sorters">
-        Sort
-        <mwc-icon
-          @click=${(e: Event) => {
-            const target = e.currentTarget as HTMLElement
-            ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
-              right: 0,
-              top: target.offsetTop + target.offsetHeight
-            })
-          }}
-          >expand_more</mwc-icon
-        >
-        <ox-popup id="sorter-control">
-          <ox-sorters-control> </ox-sorters-control>
-        </ox-popup>
+      @media only screen and (max-width: 460px) {
+        #filters {
+          flex-direction: column;
+        }
+
+        #modes {
+          display: none;
+        }
+      }
+    </style>
+
+    <ox-grist
+      .config=${buildConfig({ englishOnly, selectAfterChange, headerFilter })}
+      mode="GRID"
+      .fetchHandler=${fetchHandler}
+      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
+    >
+      <div slot="headroom">
+        <div id="filters">
+          <ox-filters-form></ox-filters-form>
+        </div>
+
+        <div id="sorters">
+          Sort
+          <md-icon
+            @click=${(e: Event) => {
+              const target = e.currentTarget as HTMLElement
+              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
+                right: 0,
+                top: target.offsetTop + target.offsetHeight
+              })
+            }}
+            >expand_more</md-icon
+          >
+          <ox-popup id="sorter-control">
+            <ox-sorters-control> </ox-sorters-control>
+          </ox-popup>
+        </div>
       </div>
-    </div>
-  </ox-grist>`
+    </ox-grist>`
 
 export const Regular = Template.bind({})
 Regular.args = {

package/stories/default-filters.stories.ts

@@ -2,7 +2,7 @@ import '../src/index.js'
 import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
 import '@operato/popup/ox-popup-list.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
@@ -118,95 +118,104 @@ interface ArgTypes {
   headerFilter: boolean
 }
 
-const Template: Story<ArgTypes> = ({ headerFilter }: 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;
-    }
-
-    #filters {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+const Template: Story<ArgTypes> = ({ headerFilter }: 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;
+      }
 
-    #filters * {
-      margin-right: var(--margin-default);
-    }
+      #sorters > * {
+        padding: var(--padding-narrow);
+        vertical-align: middle;
+      }
 
-    @media only screen and (max-width: 460px) {
       #filters {
-        flex-direction: column;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
-      #modes {
-        display: none;
+      #filters * {
+        margin-right: var(--margin-default);
       }
-    }
-  </style>
-
-  <ox-grist
-    .config=${buildConfig({ headerFilter })}
-    mode="GRID"
-    .fetchHandler=${fetchHandler}
-    @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
-  >
-    <div slot="headroom">
-      <div id="filters">
-        <ox-filters-form></ox-filters-form>
-      </div>
 
-      <div id="sorters">
-        Sort
-        <mwc-icon
-          @click=${(e: Event) => {
-            const target = e.currentTarget as HTMLElement
-            ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
-              right: 0,
-              top: target.offsetTop + target.offsetHeight
-            })
-          }}
-          >expand_more</mwc-icon
-        >
-        <ox-popup id="sorter-control">
-          <ox-sorters-control> </ox-sorters-control>
-        </ox-popup>
+      @media only screen and (max-width: 460px) {
+        #filters {
+          flex-direction: column;
+        }
+
+        #modes {
+          display: none;
+        }
+      }
+    </style>
+
+    <ox-grist
+      .config=${buildConfig({ headerFilter })}
+      mode="GRID"
+      .fetchHandler=${fetchHandler}
+      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
+    >
+      <div slot="headroom">
+        <div id="filters">
+          <ox-filters-form></ox-filters-form>
+        </div>
+
+        <div id="sorters">
+          Sort
+          <md-icon
+            @click=${(e: Event) => {
+              const target = e.currentTarget as HTMLElement
+              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
+                right: 0,
+                top: target.offsetTop + target.offsetHeight
+              })
+            }}
+            >expand_more</md-icon
+          >
+          <ox-popup id="sorter-control">
+            <ox-sorters-control> </ox-sorters-control>
+          </ox-popup>
+        </div>
       </div>
-    </div>
-  </ox-grist>`
+    </ox-grist>`
 
 export const Regular = Template.bind({})
 Regular.args = {

package/stories/dynamic-editable.stories.ts

@@ -2,7 +2,7 @@ import '../src/index.js'
 import '../src/filters/filters-form.js'
 import '../src/sorters/sorters-control.js'
 import '@operato/popup/ox-popup-list.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
 
@@ -194,7 +194,19 @@ interface ArgTypes {
 }
 
 const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
-  html` <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  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" />
@@ -208,11 +220,11 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
         background-color: var(--theme-white-color);
         box-shadow: var(--box-shadow);
 
-        --mdc-icon-size: 24px;
+        --md-icon-size: 24px;
       }
-      #sorters mwc-icon,
-      #modes mwc-icon {
-        --mdc-icon-size: 18px;
+      #sorters md-icon,
+      #modes md-icon {
+        --md-icon-size: 18px;
       }
       #sorters {
         margin-left: auto;
@@ -268,7 +280,7 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
 
         <div id="sorters">
           Sort
-          <mwc-icon
+          <md-icon
             @click=${(e: Event) => {
               const target = e.currentTarget as HTMLElement
               ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
@@ -276,7 +288,7 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
                 top: target.offsetTop + target.offsetHeight
               })
             }}
-            >expand_more</mwc-icon
+            >expand_more</md-icon
           >
           <ox-popup id="sorter-control">
             <ox-sorters-control> </ox-sorters-control>
@@ -284,7 +296,7 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
         </div>
 
         <ox-record-creator id="add" light-popup>
-          <button><mwc-icon>add</mwc-icon></button>
+          <button><md-icon>add</md-icon></button>
         </ox-record-creator>
       </div>
     </ox-grist>`