@operato/app 2.0.0-alpha.64 → 2.0.0-alpha.69

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "2.0.0-alpha.64",
+  "version": "2.0.0-alpha.69",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -133,21 +133,19 @@
     "@codemirror/view": "^6.22.1",
     "@graphql-tools/delegate": "^10.0.1",
     "@graphql-tools/wrap": "^8.5.0",
-    "@material/mwc-button": "^0.27.0",
-    "@material/mwc-icon": "^0.27.0",
-    "@material/mwc-icon-button": "^0.27.0",
-    "@operato/attachment": "^2.0.0-alpha.64",
-    "@operato/data-grist": "^2.0.0-alpha.64",
-    "@operato/font": "^2.0.0-alpha.64",
-    "@operato/form": "^2.0.0-alpha.57",
+    "@material/web": "^1.4.0",
+    "@operato/attachment": "^2.0.0-alpha.69",
+    "@operato/data-grist": "^2.0.0-alpha.68",
+    "@operato/font": "^2.0.0-alpha.69",
+    "@operato/form": "^2.0.0-alpha.68",
     "@operato/graphql": "^2.0.0-alpha.57",
     "@operato/i18n": "^2.0.0-alpha.59",
-    "@operato/input": "^2.0.0-alpha.64",
-    "@operato/layout": "^2.0.0-alpha.63",
-    "@operato/property-editor": "^2.0.0-alpha.64",
-    "@operato/shell": "^2.0.0-alpha.63",
-    "@operato/styles": "^2.0.0-alpha.62",
-    "@operato/utils": "^2.0.0-alpha.57",
+    "@operato/input": "^2.0.0-alpha.68",
+    "@operato/layout": "^2.0.0-alpha.69",
+    "@operato/property-editor": "^2.0.0-alpha.69",
+    "@operato/shell": "^2.0.0-alpha.68",
+    "@operato/styles": "^2.0.0-alpha.68",
+    "@operato/utils": "^2.0.0-alpha.68",
     "cm6-graphql": "^0.0.14",
     "codemirror": "^6.0.1",
     "cronstrue": "^2.2.0",
@@ -189,5 +187,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "51399aac2553f6a1c2c242295ba9e996f3562067"
+  "gitHead": "a77863b1e2663033bd55929376827bdbf8db2cce"
 }

package/src/grist-editor/ox-grist-editor-resource-code.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import { OxGristEditor, RecordConfig } from '@operato/data-grist'
 
 import { customElement } from 'lit/decorators.js'
@@ -20,7 +20,7 @@ export class OxGristEditorResourceCode extends OxGristEditor {
         ${(codes || []).map(
           (code: CommonCodeDetail) => html`
             <option ?selected=${code.name == this.value} value=${code.name}>
-            ${code.name == '' ? '' : selectDispOpt.replace('name',code.description).replace('code',code.name)}
+              ${code.name == '' ? '' : selectDispOpt.replace('name', code.description).replace('code', code.name)}
             </option>
           `
         )}

package/src/grist-editor/ox-grist-editor-resource-id.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '../selector/ox-selector-resource-id.js'
 
 import { html } from 'lit'
@@ -19,7 +19,7 @@ export class OxGristEditorResourceId extends OxGristEditor {
       ${!value
         ? html`<span tabindex="0"></span>`
         : html` <span tabindex="0">${value[nameField]} (${value[descriptionField]})</span> `}
-      <mwc-icon>arrow_drop_down</mwc-icon>
+      <md-icon>arrow_drop_down</md-icon>
     `
   }
 

package/src/grist-editor/ox-popup-code-input.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/input/ox-input-code.js'
 
 import { css, html, LitElement } from 'lit'
@@ -45,8 +46,8 @@ export class OxPopupCodeInput extends LitElement {
       </ox-input-code>
 
       <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/grist-editor/ox-popup-privilege-input.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/input/ox-input-privilege.js'
 
 import gql from 'graphql-tag'
@@ -32,9 +33,11 @@ export class OxPopupPrivilegeInput extends LitElement {
       .button-container {
         display: flex;
         flex-direction: row;
+        gap: 10px;
+        padding: var(--padding-default);
       }
 
-      div[padding] {
+      div[filler] {
         flex: 1;
       }
     `
@@ -52,10 +55,10 @@ export class OxPopupPrivilegeInput extends LitElement {
       </ox-input-privilege>
 
       <div class="button-container">
-        <mwc-button @click=${this.onReset.bind(this)}>${i18next.t('button.reset')}</mwc-button>
-        <div padding></div>
-        <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.onReset.bind(this)}>${i18next.t('button.reset')}</md-elevated-button>
+        <div filler></div>
+        <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/selector/ox-selector-resource-id.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -72,9 +73,9 @@ export class OxSelectorResourceId extends LitElement {
       </ox-grist>
 
       <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <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.onEmpty.bind(this)}>${i18next.t('button.empty')}</md-elevated-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/selector/ox-selector-resource-object-legacy.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/data-grist'
 import '@operato/form/ox-search-form.js'
 
@@ -111,9 +112,9 @@ export class OxSelectorResourceObjectLegacy extends LitElement {
       </ox-grist>
 
       <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <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.onEmpty.bind(this)}>${i18next.t('button.empty')}</md-elevated-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>
     `
   }
@@ -223,17 +224,17 @@ export class OxSelectorResourceObjectLegacy extends LitElement {
             fieldType === 'string'
               ? 'text'
               : numberTypes.indexOf(fieldType) >= 0
-              ? 'number'
-              : fieldType === 'boolean'
-              ? 'checkbox'
-              : fieldType,
+                ? 'number'
+                : fieldType === 'boolean'
+                  ? 'checkbox'
+                  : fieldType,
           queryName: selectField.queryName,
           props:
             fieldType === 'string'
               ? { searchOper: 'i_like' }
               : fieldType === 'object'
-              ? { searchOper: 'in' }
-              : { searchOper: 'eq' },
+                ? { searchOper: 'in' }
+                : { searchOper: 'eq' },
           attrs: fieldType === 'boolean' ? ['indeterminated'] : []
         }
       })

package/src/selector/ox-selector-resource-object.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -98,9 +99,9 @@ export class OxSelectorResourceObject extends LitElement {
       </ox-grist>
 
       <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <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.onEmpty.bind(this)}>${i18next.t('button.empty')}</md-elevated-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-input-graphql.stories.ts

@@ -24,7 +24,19 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ name = 'code', value = '' }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <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"
+  />
+
   <style>
     body {
     }

package/themes/app-theme.css

@@ -82,6 +82,17 @@ body {
   --mdc-button-outline-width: 1px;
   --mdc-button-horizontal-padding: 16px;
 
+  /* material style component themes */
+  --md-theme-on-primary: var(--theme-white-color);
+  --md-theme-primary: var(--secondary-text-color);
+  --md-theme-on-secondary: var(--theme-white-color);
+  --md-theme-secondary: var(--primary-color);
+  --md-button-outline-color: var(--primary-color);
+  --md-danger-button-primary-color: var(--status-danger-color);
+  --md-danger-button-outline-color: var(--status-danger-color);
+  --md-button-outline-width: 1px;
+  --md-button-horizontal-padding: 16px;
+
   /* button style */
   --button-background-color: #fafbfc;
   --button-background-focus-color: var(--primary-color);