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

package/src/data-card/data-card.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '../empty-note'
 import './record-card'
 
@@ -42,7 +42,7 @@ export class DataCard extends DataManipulator {
       }
 
       #upward {
-        --mdc-icon-size: 26px;
+        --md-icon-size: 26px;
         position: absolute;
         top: var(--data-card-fab-position-vertical);
         right: var(--data-card-fab-position-horizontal);
@@ -142,7 +142,7 @@ export class DataCard extends DataManipulator {
       ${this.empty ? html` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html``}
       ${this.isTop
         ? html``
-        : html` <mwc-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}
+        : html` <md-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `}
     `
   }
 

package/src/data-card/record-card.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './data-card-field'
 import '../record-view'
 import './data-card-gutter'
@@ -183,7 +183,7 @@ export class RecordCard extends LitElement {
     }
 
     return html`
-      ${dirtyIcon ? html` <mwc-icon dirty>${dirtyIcon}</mwc-icon> ` : html``}
+      ${dirtyIcon ? html` <md-icon dirty>${dirtyIcon}</md-icon> ` : html``}
       ${thumbnailColumn
         ? html` <ox-card-field
             thumbnail
@@ -216,46 +216,44 @@ export class RecordCard extends LitElement {
                 ></ox-card-gutter>
               `
             : gutters.length > 2
-            ? html`
-                <ox-card-gutter-menu
-                  .gutters=${gutters}
-                  .rowIndex=${rowIndex}
-                  .record=${record}
-                  .clickHandler=${this.clickHandler}
-                  .dblclickHandler=${this.dblclickHandler}
-                ></ox-card-gutter-menu>
-              `
-            : html``}
+              ? html`
+                  <ox-card-gutter-menu
+                    .gutters=${gutters}
+                    .rowIndex=${rowIndex}
+                    .record=${record}
+                    .clickHandler=${this.clickHandler}
+                    .dblclickHandler=${this.dblclickHandler}
+                  ></ox-card-gutter-menu>
+                `
+              : html``}
         </div>
 
         <div brief>
           ${briefFields.map(
-            (column, idx) =>
-              html`
-                <ox-card-field
-                  .rowIndex=${rowIndex}
-                  .column=${column}
-                  .record=${record}
-                  .value=${record[column?.name || '']}
-                  ?name=${idx == 0}
-                  ?desc=${idx == 1}
-                ></ox-card-field>
-              `
+            (column, idx) => html`
+              <ox-card-field
+                .rowIndex=${rowIndex}
+                .column=${column}
+                .record=${record}
+                .value=${record[column?.name || '']}
+                ?name=${idx == 0}
+                ?desc=${idx == 1}
+              ></ox-card-field>
+            `
           )}
         </div>
         ${detailFields.length > 0
           ? html`
               <div detail>
                 ${detailFields.map(
-                  (column, idx) =>
-                    html`
-                      <ox-card-field
-                        .rowIndex=${rowIndex}
-                        .column=${column}
-                        .record=${record}
-                        .value=${record[column?.name || '']}
-                      ></ox-card-field>
-                    `
+                  (column, idx) => html`
+                    <ox-card-field
+                      .rowIndex=${rowIndex}
+                      .column=${column}
+                      .record=${record}
+                      .value=${record[column?.name || '']}
+                    ></ox-card-field>
+                  `
                 )}
               </div>
             `

package/src/data-grid/data-grid-accum-field.ts

@@ -47,6 +47,10 @@ export class DataGridAccumField extends LitElement {
         flex: none;
         margin: 0 auto;
       }
+
+      md-icon {
+        font-size: 1.5em;
+      }
     `
   ]
 
@@ -62,7 +66,7 @@ export class DataGridAccumField extends LitElement {
 
   render(): TemplateResult {
     if (!this.column || !this.column.accumulator) {
-      return this.columnIndex == 0 ? html`<mwc-icon>functions</mwc-icon>` : html`${nothing}`
+      return this.columnIndex == 0 ? html`<md-icon>functions</md-icon>` : html`${nothing}`
     }
 
     var { value, column, record, rowIndex } = this

package/src/data-grid/data-grid-footer.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -14,17 +14,18 @@ export class DataGridFooter extends LitElement {
       :host {
         display: flex;
         flex-direction: row;
+        gap: 4px;
         overflow: hidden;
 
         padding: var(--grid-footer-padding);
         background-color: var(--grid-footer-background-color);
         font-size: var(--grid-footer-font-size);
+        align-items: center;
       }
 
       :host * {
         white-space: nowrap;
         overflow: hidden;
-        padding: 0 2px;
 
         text-overflow: ellipsis;
         text-align: center;
@@ -35,11 +36,18 @@ export class DataGridFooter extends LitElement {
         flex: 1;
       }
 
-      mwc-icon {
+      md-icon {
         font-size: 1.5em;
         vertical-align: middle;
       }
 
+      .limit {
+        display: flex;
+        flex-direction: row;
+        gap: 6px;
+        align-items: center;
+      }
+
       .limit a {
         color: var(--grid-footer-limit-color);
       }
@@ -82,20 +90,19 @@ export class DataGridFooter extends LitElement {
     var totalPage = Math.max(1, Math.ceil(total / limit))
 
     return html`
-      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(1)}><mwc-icon>skip_previous</mwc-icon></a>
-      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(page - 1)}><mwc-icon>navigate_before</mwc-icon></a>
+      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(1)}><md-icon>skip_previous</md-icon></a>
+      <a ?inactive=${page <= 1} @click=${() => this._gotoPage(page - 1)}><md-icon>navigate_before</md-icon></a>
       <span>page <strong>${page}</strong>&nbsp;/&nbsp;${totalPage}</span>
-      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(page + 1)}><mwc-icon>navigate_next</mwc-icon></a>
-      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(totalPage)}><mwc-icon>skip_next</mwc-icon></a>
+      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(page + 1)}><md-icon>navigate_next</md-icon></a>
+      <a ?inactive=${page >= totalPage} @click=${() => this._gotoPage(totalPage)}><md-icon>skip_next</md-icon></a>
 
       <span class="filler"></span>
 
       <span class="limit">
         ${pages.map(
-          size =>
-            html`
-              <a ?selected=${limit == size} @click=${() => this._changeLimit(size)}>${stringifyBigNumber(size)}</a>
-            `
+          size => html`
+            <a ?selected=${limit == size} @click=${() => this._changeLimit(size)}>${stringifyBigNumber(size)}</a>
+          `
         )}
         records
       </span>

package/src/data-grid/data-grid-header.ts

@@ -1,5 +1,5 @@
 import '@operato/popup/ox-popup.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement, PropertyValues, nothing, TemplateResult } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -62,7 +62,7 @@ export class DataGridHeader extends LitElement {
         align-self: center;
       }
 
-      span[for-title] mwc-icon {
+      span[for-title] md-icon {
         font-size: var(--grid-record-fontsize);
       }
 
@@ -75,11 +75,11 @@ export class DataGridHeader extends LitElement {
         border: 0;
       }
 
-      span[sorter] mwc-icon {
+      span[sorter] md-icon {
         font-size: var(--grid-header-sorter-size);
       }
 
-      span[filter] > mwc-icon {
+      span[filter] > md-icon {
         font-size: var(--fontsize-default);
         line-height: 20px;
       }
@@ -104,7 +104,7 @@ export class DataGridHeader extends LitElement {
         vertical-align: middle;
       }
 
-      [filter-title] mwc-icon {
+      [filter-title] md-icon {
         opacity: 0.7;
         color: var(--grid-header-filter-title-icon-color);
       }
@@ -363,12 +363,10 @@ export class DataGridHeader extends LitElement {
     if (sorters.length > 1) {
       var rank = sorters.indexOf(sorter) + 1
       return sorter.desc
-        ? html` <mwc-icon>keyboard_arrow_down</mwc-icon><sub>${rank}</sub> `
-        : html` <mwc-icon>keyboard_arrow_up</mwc-icon><sub>${rank}</sub> `
+        ? html` <md-icon>keyboard_arrow_down</md-icon><sub>${rank}</sub> `
+        : html` <md-icon>keyboard_arrow_up</md-icon><sub>${rank}</sub> `
     } else {
-      return sorter.desc
-        ? html` <mwc-icon>keyboard_arrow_down</mwc-icon> `
-        : html` <mwc-icon>keyboard_arrow_up</mwc-icon> `
+      return sorter.desc ? html` <md-icon>keyboard_arrow_down</md-icon> ` : html` <md-icon>keyboard_arrow_up</md-icon> `
     }
   }
 
@@ -381,7 +379,7 @@ export class DataGridHeader extends LitElement {
     const renderer = getFilterRenderer(type)[idx]
 
     return html`
-      <mwc-icon
+      <md-icon
         @click=${(e: Event) => {
           const parent = (e.target as HTMLElement).closest('[column]') as HTMLElement
           const popup = parent.querySelector('ox-popup, ox-popup-list') as OxPopup | null
@@ -398,14 +396,14 @@ export class DataGridHeader extends LitElement {
             top
           })
         }}
-        >filter_alt</mwc-icon
+        >filter_alt</md-icon
       >
 
       ${!renderer
         ? html``
         : type !== 'select'
           ? html` <ox-popup
-              ><div filter-title><mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong></div>
+              ><div filter-title><md-icon>filter_alt</md-icon> filter by <strong>${column.name}</strong></div>
               ${renderer(column, value, this)}</ox-popup
             >`
           : filter!.operator === 'in'
@@ -431,7 +429,7 @@ export class DataGridHeader extends LitElement {
                     })
                   )}
                 ><div filter-title slot="header">
-                  <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>
+                  <md-icon>filter_alt</md-icon> filter by <strong>${column.name}</strong>
                 </div>
                 ${renderer(column, value, this)}</ox-popup-list
               >`
@@ -451,7 +449,7 @@ export class DataGridHeader extends LitElement {
                     })
                   )}
                 ><div filter-title slot="header">
-                  <mwc-icon>filter_alt</mwc-icon> filter by <strong>${column.name}</strong>
+                  <md-icon>filter_alt</md-icon> filter by <strong>${column.name}</strong>
                 </div>
                 ${renderer(column, value, this)}</ox-popup-list
               >`}

package/src/data-grist.ts

@@ -59,7 +59,7 @@ export class DataGrist extends LitElement implements DataConsumer {
 
         padding: var(--ox-grist-padding);
 
-        --mdc-icon-size: var(--grid-record-wide-fontsize);
+        --md-icon-size: var(--grid-record-wide-fontsize);
       }
 
       #wrap {
@@ -404,28 +404,28 @@ export class DataGrist extends LitElement implements DataConsumer {
               </ox-grid>
             `
           : this.mode == 'CARD'
-          ? html`
-              <ox-card
-                id="grist"
-                .config=${this.compiledConfig}
-                .data=${this._data}
-                .sorters=${this.sorters || []}
-                .filters=${this.filters || []}
-                ?empty=${empty}
-              >
-              </ox-card>
-            `
-          : html`
-              <ox-list
-                id="grist"
-                .config=${this.compiledConfig}
-                .data=${this._data}
-                .sorters=${this.sorters || []}
-                .filters=${this.filters || []}
-                ?empty=${empty}
-              >
-              </ox-list>
-            `}
+            ? html`
+                <ox-card
+                  id="grist"
+                  .config=${this.compiledConfig}
+                  .data=${this._data}
+                  .sorters=${this.sorters || []}
+                  .filters=${this.filters || []}
+                  ?empty=${empty}
+                >
+                </ox-card>
+              `
+            : html`
+                <ox-list
+                  id="grist"
+                  .config=${this.compiledConfig}
+                  .data=${this._data}
+                  .sorters=${this.sorters || []}
+                  .filters=${this.filters || []}
+                  ?empty=${empty}
+                >
+                </ox-list>
+              `}
       </div>
 
       <div id="spinner" ?show=${this._showSpinner}></div>

package/src/data-list/data-list.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './record-partial'
 
 import { css, html, PropertyValues } from 'lit'
@@ -25,7 +25,7 @@ export class DataList extends DataManipulator {
       }
 
       #upward {
-        --mdc-icon-size: 26px;
+        --md-icon-size: 26px;
         position: absolute;
         top: var(--data-list-fab-position-vertical);
         right: var(--data-list-fab-position-horizontal);
@@ -118,7 +118,7 @@ export class DataList extends DataManipulator {
       ${this.empty ? html` <ox-empty-note title="NO RECORDS"></ox-empty-note> ` : html``}
       ${this.isTop
         ? html``
-        : html` <mwc-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}
+        : html` <md-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `}
     `
   }
 

package/src/data-list/record-partial.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './data-list-gutter'
 import './data-list-field'
 import '../record-view'
@@ -169,33 +169,31 @@ export class RecordPartial extends LitElement {
     }
 
     return html`
-      ${dirtyIcon ? html` <mwc-icon dirty>${dirtyIcon}</mwc-icon> ` : html``}
+      ${dirtyIcon ? html` <md-icon dirty>${dirtyIcon}</md-icon> ` : html``}
       ${gutters.map(
-        gutter =>
-          html`
-            <ox-list-gutter
-              class=${gutter.name === 'detail' ? 'expand' : ''}
-              .rowIndex=${rowIndex}
-              .column=${gutter}
-              .record=${record}
-              .value=${record[gutter.name]}
-            ></ox-list-gutter>
-          `
+        gutter => html`
+          <ox-list-gutter
+            class=${gutter.name === 'detail' ? 'expand' : ''}
+            .rowIndex=${rowIndex}
+            .column=${gutter}
+            .record=${record}
+            .value=${record[gutter.name]}
+          ></ox-list-gutter>
+        `
       )}
 
       <div content>
         ${displayColumns.map(
-          (column, idx) =>
-            html`
-              <ox-list-field
-                .rowIndex=${rowIndex}
-                .column=${column}
-                .record=${record}
-                .value=${record[column?.name || '']}
-                ?name=${idx == 0}
-                ?desc=${idx == 1}
-              ></ox-list-field>
-            `
+          (column, idx) => html`
+            <ox-list-field
+              .rowIndex=${rowIndex}
+              .column=${column}
+              .record=${record}
+              .value=${record[column?.name || '']}
+              ?name=${idx == 0}
+              ?desc=${idx == 1}
+            ></ox-list-field>
+          `
         )}
       </div>
       ${thumbnail

package/src/empty-note.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -11,7 +11,7 @@ export class EmptyNote extends LitElement {
       text-align: center;
     }
 
-    mwc-icon {
+    md-icon {
       font: var(--oops-note-icon-font);
       color: var(--oops-note-icon-color);
       border: var(--oops-note-icon-border);
@@ -38,7 +38,7 @@ export class EmptyNote extends LitElement {
 
   render() {
     return html`
-      ${this.icon ? html`<mwc-icon>${this.icon}</mwc-icon>` : html``}
+      ${this.icon ? html`<md-icon>${this.icon}</md-icon>` : html``}
       <div titler>${this.title}</div>
       ${this.description ? html`<div description>${this.description}</div>` : html``}
     `

package/src/gutters/gutter-button.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { html } from 'lit'
 
@@ -23,13 +23,13 @@ export class GutterButton {
         sortable: false,
         header: {
           renderer: function (column) {
-            return html` <mwc-icon style=${inlineHeaderStyle} title=${title}>${iconFn()}</mwc-icon> `
+            return html` <md-icon style=${inlineHeaderStyle} title=${title}>${iconFn()}</md-icon> `
           } as HeaderRenderer
         },
         record: {
           align: 'center',
           renderer: function (value, column, record, rowIndex, field) {
-            return html` <mwc-icon style=${inlineRecordStyle} title=${title}>${iconFn(record)}</mwc-icon> `
+            return html` <md-icon style=${inlineRecordStyle} title=${title}>${iconFn(record)}</md-icon> `
           } as FieldRenderer
         },
         forGrid: true,

package/src/gutters/gutter-dirty.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -13,7 +13,7 @@ class GutterDirtyElement extends LitElement {
       margin: auto;
     }
 
-    mwc-icon {
+    md-icon {
       width: var(--grid-record-dirty-icon-size);
       height: var(--grid-record-dirty-icon-size);
       border-radius: 50%;
@@ -38,11 +38,11 @@ class GutterDirtyElement extends LitElement {
   render() {
     switch (this.value) {
       case '+':
-        return html` <mwc-icon style=${INLINESTYLE} center add>add</mwc-icon> `
+        return html` <md-icon style=${INLINESTYLE} center add>add</md-icon> `
       case '-':
-        return html` <mwc-icon style=${INLINESTYLE} center remove>remove</mwc-icon> `
+        return html` <md-icon style=${INLINESTYLE} center remove>remove</md-icon> `
       case 'M':
-        return html` <mwc-icon style=${INLINESTYLE} center done>done</mwc-icon> `
+        return html` <md-icon style=${INLINESTYLE} center done>done</md-icon> `
       default:
         return ''
     }

package/src/handlers/contextmenu-tree-mutation.ts

@@ -42,7 +42,7 @@ export const ContextMenuTreeMutation = function (
           dispatchEvent(field, 'add-sibling-node')
         }}
       >
-        <mwc-icon slot="icon">add</mwc-icon>
+        <md-icon slot="icon">add</md-icon>
       </ox-popup-menuitem>
 
       <ox-popup-menuitem
@@ -51,7 +51,7 @@ export const ContextMenuTreeMutation = function (
           dispatchEvent(field, 'add-child-node')
         }}
       >
-        <mwc-icon slot="icon">playlist_add</mwc-icon>
+        <md-icon slot="icon">playlist_add</md-icon>
       </ox-popup-menuitem>
 
       <div separator></div>
@@ -62,7 +62,7 @@ export const ContextMenuTreeMutation = function (
           dispatchEvent(field, 'collapse-all')
         }}
       >
-        <mwc-icon slot="icon">unfold_less</mwc-icon>
+        <md-icon slot="icon">unfold_less</md-icon>
       </ox-popup-menuitem>
 
       <ox-popup-menuitem
@@ -71,7 +71,7 @@ export const ContextMenuTreeMutation = function (
           dispatchEvent(field, 'expand-all')
         }}
       >
-        <mwc-icon slot="icon">unfold_more</mwc-icon>
+        <md-icon slot="icon">unfold_more</md-icon>
       </ox-popup-menuitem>
     `,
     top: e.pageY,

package/src/record-view/record-creator.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './record-view'
 
 import { html, LitElement } from 'lit'

package/src/record-view/record-view-body.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '../data-grid/data-grid-field'
 
 import { css, html, LitElement } from 'lit'
@@ -34,7 +34,7 @@ export class RecordViewBody extends LitElement {
         color: var(--record-view-label-color);
       }
 
-      label mwc-icon {
+      label md-icon {
         display: none;
       }
 
@@ -43,7 +43,7 @@ export class RecordViewBody extends LitElement {
         font-weight: bold;
       }
 
-      label[editable] mwc-icon {
+      label[editable] md-icon {
         display: inline-block;
         font-size: var(--record-view-label-icon-size);
         opacity: 0.5;
@@ -99,7 +99,7 @@ export class RecordViewBody extends LitElement {
 
         return html`
           <label ?editable=${editable}
-            ><span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span> <mwc-icon>edit</mwc-icon></label
+            ><span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span> <md-icon>edit</md-icon></label
           >
           <ox-grid-field
             .rowIndex=${rowIndex}

package/src/record-view/record-view.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './record-view-body'
 import '@operato/input/ox-input-file.js'
 import '../data-grid/data-grid-field'
@@ -53,7 +53,7 @@ export class RecordView extends LitElement {
         vertical-align: middle;
       }
 
-      [footer] button mwc-icon {
+      [footer] button md-icon {
         margin-top: -3px;
         margin-right: 5px;
         font-size: var(--record-view-footer-iconbutton-size);
@@ -74,9 +74,9 @@ export class RecordView extends LitElement {
       <ox-record-view-body .columns=${this.columns} .record=${this.record} .rowIndex=${this.rowIndex}>
       </ox-record-view-body>
       <div footer>
-        <button @click=${this.onReset.bind(this)}><mwc-icon>refresh</mwc-icon><span>Reset</span></button>
-        <button @click=${this.onCancel.bind(this)}><mwc-icon>clear</mwc-icon><span>Cancel</span></button>
-        <button @click=${this.onOK.bind(this)} ok><mwc-icon>radio_button_unchecked</mwc-icon><span>OK</span></button>
+        <button @click=${this.onReset.bind(this)}><md-icon>refresh</md-icon><span>Reset</span></button>
+        <button @click=${this.onCancel.bind(this)}><md-icon>clear</md-icon><span>Cancel</span></button>
+        <button @click=${this.onOK.bind(this)} ok><md-icon>radio_button_unchecked</md-icon><span>OK</span></button>
       </div>
     `
   }

package/src/sorters/sorters-control.ts

@@ -29,9 +29,9 @@ export class SortersControl extends LitElement {
         text-transform: capitalize;
         user-select: none;
       }
-      [option] mwc-icon {
+      [option] md-icon {
         margin-left: var(--margin-default);
-        --mdc-icon-size: var(--fontsize-large);
+        --md-icon-size: var(--fontsize-large);
         color: var(--primary-color);
       }
       [option] sub {
@@ -99,7 +99,7 @@ export class SortersControl extends LitElement {
             ${desc === null
               ? html``
               : html`
-                  <mwc-icon>${desc ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}</mwc-icon>
+                  <md-icon>${desc ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}</md-icon>
                   ${rank === 0 ? html`` : html`<sub>${rank}</sub>`}
                 `}
           </div>