@operato/context 2.0.0-alpha.61 → 2.0.0-alpha.63

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/context",
   "description": "Webcomponent context following open-wc recommendations",
   "author": "heartyoh",
-  "version": "2.0.0-alpha.61",
+  "version": "2.0.0-alpha.63",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -63,12 +63,12 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@material/mwc-icon": "^0.27.0",
-    "@operato/help": "^2.0.0-alpha.61",
-    "@operato/input": "^2.0.0-alpha.59",
-    "@operato/layout": "^2.0.0-alpha.57",
-    "@operato/shell": "^2.0.0-alpha.57",
-    "@operato/styles": "^2.0.0-alpha.57",
+    "@material/web": "^1.4.0",
+    "@operato/help": "^2.0.0-alpha.63",
+    "@operato/input": "^2.0.0-alpha.62",
+    "@operato/layout": "^2.0.0-alpha.63",
+    "@operato/shell": "^2.0.0-alpha.63",
+    "@operato/styles": "^2.0.0-alpha.62",
     "@operato/utils": "^2.0.0-alpha.57",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21",
@@ -106,5 +106,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "6ba512f14bf258b7a2d81496af95d81e5247437f"
+  "gitHead": "a29b063ce8513cccc9d567d03d888d49dfa3a71a"
 }

package/src/layouts/ox-context-page-toolbar.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement, TemplateResult, nothing } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
@@ -39,7 +39,7 @@ export class ContextPageToolbar extends connect(store)(LitElement) {
           cursor: pointer;
         }
 
-        mwc-icon {
+        md-icon {
           background-color: var(--theme-white-color);
           border: 1px solid rgba(var(--primary-color-rgb), 0.5);
           padding: 1px 2px;

package/src/layouts/ox-context-toolbar.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'

package/src/styles/ox-context-toolbar-overlay-style.ts

@@ -23,7 +23,7 @@ export const ContextToolbarOverlayStyle = css`
     padding: var(--context-ui-list-padding);
   }
 
-  li > mwc-icon {
+  li > md-icon {
     font-size: 1em;
 
     padding: var(--context-ui-padding);
@@ -37,7 +37,7 @@ export const ContextToolbarOverlayStyle = css`
     color: var(--context-ui-list-color);
   }
 
-  li:hover mwc-icon,
+  li:hover md-icon,
   li:hover span {
     color: #fff;
   }

package/src/tools/ox-page-action-context-bar.ts

@@ -1,5 +1,4 @@
-import '@material/mwc-button'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './ox-page-action-overlay-template.js'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
@@ -26,15 +25,26 @@ export class PageActionContextBar extends connect(store)(LitElement) {
           outline: none;
         }
 
-        mwc-button {
+        button {
           white-space: nowrap;
           margin: var(--context-action-bar-button-margin);
           border-radius: var(--context-action-bar-more-button-border-radius);
         }
 
+        md-icon {
+          background-color: var(--theme-white-color);
+          border: 1px solid rgba(var(--primary-color-rgb), 0.5);
+          padding: 1px 2px;
+          color: var(--primary-color);
+        }
+
+        [filled] {
+          font-variation-settings: 'FILL' 1;
+        }
+
         [danger] {
-          --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-          --mdc-button-outline-color: var(--mdc-danger-button-outline-color);
+          color: var(--mdc-danger-button-primary-color);
+          border-color: var(--mdc-danger-button-outline-color);
         }
 
         [more] {
@@ -48,15 +58,8 @@ export class PageActionContextBar extends connect(store)(LitElement) {
           font-size: 2rem;
         }
 
-        mwc-icon {
-          background-color: var(--theme-white-color);
-          border: 1px solid rgba(var(--primary-color-rgb), 0.5);
-          padding: 1px 2px;
-          color: var(--primary-color);
-        }
-
         @media screen and (max-width: 460px) {
-          mwc-button {
+          button {
             --mdc-button-horizontal-padding: var(--padding-default);
             --mdc-shape-small: var(--context-action-bar-more-button-border-radius);
           }
@@ -123,7 +126,7 @@ export class PageActionContextBar extends connect(store)(LitElement) {
   render() {
     return html`
       ${this.renderActions()}
-      ${this.overflown ? html` <mwc-icon more @click=${this.showMore.bind(this)}>more_horiz</mwc-icon> ` : html``}
+      ${this.overflown ? html` <md-icon more @click=${this.showMore.bind(this)}>more_horiz</md-icon> ` : html``}
     `
   }
 
@@ -131,7 +134,7 @@ export class PageActionContextBar extends connect(store)(LitElement) {
     return html`
       ${this.actions.map(($action, idx) => {
         let { type, title, icon, action, select, href, emphasis } = $action as any
-        let { outlined, raised, dense, danger } = emphasis || {}
+        let { outlined, raised, dense, danger, filled } = emphasis || {}
 
         return type == 'text'
           ? html` <span @click=${action}>${title}</span> `
@@ -144,15 +147,14 @@ export class PageActionContextBar extends connect(store)(LitElement) {
             : type == 'link'
               ? html` <a href=${href}>${title}</a> `
               : type == 'icon'
-                ? html`<mwc-icon @click=${action}>${icon}</mwc-icon>`
+                ? html`<md-icon @click=${action}>${icon}</md-icon>`
                 : html`
-                    <mwc-button
-                      label=${title}
-                      icon=${icon || 'done_all'}
+                    <button
                       ?dense=${dense}
                       ?raised=${raised}
                       ?outlined=${outlined}
                       ?danger=${danger}
+                      ?filled=${filled}
                       @click=${async (e: MouseEvent) => {
                         /* all actions should be bloked for a second */
                         const button = e.currentTarget as any
@@ -170,7 +172,10 @@ export class PageActionContextBar extends connect(store)(LitElement) {
                           button.removeAttribute('working')
                         }
                       }}
-                    ></mwc-button>
+                    >
+                      <md-icon>${icon || 'done_all'}</md-icon>
+                      ${title}
+                    </button>
                   `
       })}
     `

package/src/tools/ox-page-action-overlay-template.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
@@ -26,7 +26,7 @@ export class PageActionOverlayTemplate extends connect(store)(LitElement) {
           outline: none;
         }
 
-        mwc-button {
+        button {
           background-color: var(--main-section-background-color);
           border-radius: var(--context-action-bar-more-button-border-radius);
         }
@@ -36,8 +36,12 @@ export class PageActionOverlayTemplate extends connect(store)(LitElement) {
           --mdc-button-outline-color: var(--mdc-danger-button-outline-color);
         }
 
+        [filled] {
+          font-variation-settings: 'FILL' 1;
+        }
+
         @media screen and (max-width: 460px) {
-          mwc-button {
+          button {
             --mdc-button-horizontal-padding: var(--padding-default);
             border-radius: 4px;
           }
@@ -61,47 +65,49 @@ export class PageActionOverlayTemplate extends connect(store)(LitElement) {
     return html`
       ${this.actions.map(($action, idx) => {
         let { type, title, icon, action, select, href, emphasis } = $action as any
-        let { outlined, raised, dense, danger } = emphasis || {}
+        let { outlined, raised, dense, danger, filled } = emphasis || {}
 
         return type == 'text'
           ? html` <span>${title}</span> `
           : type == 'select' || (select && select.length > 0)
-          ? html`
-              <select @change=${action}>
-                ${select.map((option: any) => html` <option>${option}</option> `)}
-              </select>
-            `
-          : type == 'link'
-          ? html` <a href=${href}>${title}</a> `
-          : html`
-              <mwc-button
-                label=${title}
-                icon=${icon || 'done_all'}
-                ?dense=${dense}
-                ?raised=${raised}
-                ?outlined=${outlined}
-                ?danger=${danger}
-                @click=${async (e: MouseEvent) => {
-                  /* all actions should be bloked for a second */
-                  const button = e.currentTarget as any
-                  button.icon = 'rotate_right'
-                  button.setAttribute('working', true)
-                  button.disabled = true
+            ? html`
+                <select @change=${action}>
+                  ${select.map((option: any) => html` <option>${option}</option> `)}
+                </select>
+              `
+            : type == 'link'
+              ? html` <a href=${href}>${title}</a> `
+              : html`
+                  <button
+                    ?dense=${dense}
+                    ?raised=${raised}
+                    ?outlined=${outlined}
+                    ?danger=${danger}
+                    ?filled=${filled}
+                    @click=${async (e: MouseEvent) => {
+                      /* all actions should be bloked for a second */
+                      const button = e.currentTarget as any
+                      button.icon = 'rotate_right'
+                      button.setAttribute('working', true)
+                      button.disabled = true
 
-                  try {
-                    action()
-                  } finally {
-                    await sleep(1000)
-                    button.disabled = false
-                    /* because icon can be changed after sleep, don't use closure 'icon'. */
-                    button.icon = this.actions[idx]?.icon || 'done_all'
-                    button.removeAttribute('working')
+                      try {
+                        action()
+                      } finally {
+                        await sleep(1000)
+                        button.disabled = false
+                        /* because icon can be changed after sleep, don't use closure 'icon'. */
+                        button.icon = this.actions[idx]?.icon || 'done_all'
+                        button.removeAttribute('working')
 
-                    window.history.back()
-                  }
-                }}
-              ></mwc-button>
-            `
+                        window.history.back()
+                      }
+                    }}
+                  >
+                    <md-icon>${icon || 'done_all'}</md-icon>
+                    ${title}
+                  </button>
+                `
       })}
     `
   }

package/src/tools/ox-page-title-bar.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/input/ox-input-search.js'
 
 import { css, html, LitElement } from 'lit'
@@ -92,10 +92,8 @@ export class PageTitleBar extends connect(store)(LitElement) {
     }
 
     return html`
-      ${title ? html` <div titler>${icon ? html`<mwc-icon>${icon}</mwc-icon>&nbsp;` : html``}${text}</div> ` : html``}
-      ${help && title
-        ? html` &nbsp;<mwc-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</mwc-icon> `
-        : html``}
+      ${title ? html` <div titler>${icon ? html`<md-icon>${icon}</md-icon>&nbsp;` : html``}${text}</div> ` : html``}
+      ${help && title ? html` &nbsp;<md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon> ` : html``}
       ${searchable || filterable
         ? html`
             <div search>
@@ -110,9 +108,9 @@ export class PageTitleBar extends connect(store)(LitElement) {
                   ></ox-input-search>`
                 : html``}
               ${!title && help && searchable
-                ? html`<mwc-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</mwc-icon>`
+                ? html`<md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon>`
                 : html``}
-              ${filterable ? html`<mwc-icon @click=${(e: MouseEvent) => filterHandler()}>unfold_more</mwc-icon>` : html``}
+              ${filterable ? html`<md-icon @click=${(e: MouseEvent) => filterHandler()}>unfold_more</md-icon>` : html``}
             </div>
           `
         : html``}

package/src/tools/ox-title-bar.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/input/ox-input-search.js'
 
 import { css, html, LitElement } from 'lit'
@@ -88,10 +88,8 @@ export class TitleBar extends connect(store)(LitElement) {
     }
 
     return html`
-      ${title ? html` <div titler>${icon ? html`<mwc-icon>${icon}</mwc-icon>&nbsp;` : html``}${text}</div> ` : html``}
-      ${help && title
-        ? html` &nbsp;<mwc-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</mwc-icon> `
-        : html``}
+      ${title ? html` <div titler>${icon ? html`<md-icon>${icon}</md-icon>&nbsp;` : html``}${text}</div> ` : html``}
+      ${help && title ? html` &nbsp;<md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon> ` : html``}
       ${searchable || filterable
         ? html`
             <div search>
@@ -106,9 +104,9 @@ export class TitleBar extends connect(store)(LitElement) {
                   ></ox-input-search>`
                 : html``}
               ${!title && help && searchable
-                ? html`<mwc-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</mwc-icon>`
+                ? html`<md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon>`
                 : html``}
-              ${filterable ? html`<mwc-icon @click=${(e: MouseEvent) => filterHandler()}>tune</mwc-icon>` : html``}
+              ${filterable ? html`<md-icon @click=${(e: MouseEvent) => filterHandler()}>tune</md-icon>` : html``}
             </div>
           `
         : html``}

package/stories/ox-context-page-toolbar-select-buttons.stories.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '../src/layouts/ox-context-page-toolbar.js'
 import '../src/tools/ox-page-action-context-bar.js'
 import '@operato/input/ox-input-select-buttons.js'
@@ -29,7 +29,10 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ label = '' }: 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 {
@@ -42,7 +45,7 @@ const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
   <div style="height:600px;">
     <div class="header">
       <div class="title">
-        <mwc-icon>summarize</mwc-icon>
+        <md-icon>summarize</md-icon>
         ${label}
       </div>
 
@@ -67,12 +70,12 @@ const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
       .tools=${[
         {
           position: TOOL_POSITION.FRONT,
-          template: html` <mwc-icon>download</mwc-icon> `,
+          template: html` <md-icon>download</md-icon> `,
           context: 'exportable'
         },
         {
           position: TOOL_POSITION.FRONT,
-          template: html` <mwc-icon>upload</mwc-icon> `,
+          template: html` <md-icon>upload</md-icon> `,
           context: 'importable'
         },
         {
@@ -82,12 +85,19 @@ const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
               {
                 title: 'save',
                 action: () => {},
-                icon: 'save'
+                icon: 'save',
+                emphasis: {
+                  danger: true,
+                  filled: true
+                }
               },
               {
                 title: 'copy',
                 action: () => {},
-                icon: 'content_copy'
+                icon: 'content_copy',
+                emphasis: {
+                  outlined: true
+                }
               },
               {
                 title: 'delete',

package/stories/ox-context-page-toolbar-select.stories.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '../src/layouts/ox-context-page-toolbar.js'
 import '../src/tools/ox-page-action-context-bar.js'
 import { CommonHeaderStyles } from '@operato/styles'
@@ -28,7 +28,10 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ label = '' }: 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 {
@@ -41,7 +44,7 @@ const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
   <div style="height:600px;">
     <div class="header">
       <div class="title">
-        <mwc-icon>summarize</mwc-icon>
+        <md-icon>summarize</md-icon>
         ${label}
       </div>
 
@@ -53,12 +56,12 @@ const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
       .tools=${[
         {
           position: TOOL_POSITION.FRONT,
-          template: html` <mwc-icon>download</mwc-icon> `,
+          template: html` <md-icon>download</md-icon> `,
           context: 'exportable'
         },
         {
           position: TOOL_POSITION.FRONT,
-          template: html` <mwc-icon>upload</mwc-icon> `,
+          template: html` <md-icon>upload</md-icon> `,
           context: 'importable'
         },
         {

package/stories/ox-context-page-toolbar.stories.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '../src/layouts/ox-context-page-toolbar.js'
 import '../src/tools/ox-page-action-context-bar.js'
 import { CommonHeaderStyles } from '@operato/styles'
@@ -28,8 +28,11 @@ interface ArgTypes {
 
 const Template: Story<ArgTypes> = ({ label = '' }: 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 {
       background-color: white;
@@ -41,7 +44,7 @@ const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
   <div style="height:600px;">
     <div class="header">
       <div class="title">
-        <mwc-icon>summarize</mwc-icon>
+        <md-icon>summarize</md-icon>
         ${label}
       </div>
 
@@ -53,12 +56,12 @@ const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
       .tools=${[
         {
           position: TOOL_POSITION.FRONT,
-          template: html` <mwc-icon>download</mwc-icon> `,
+          template: html` <md-icon>download</md-icon> `,
           context: 'exportable'
         },
         {
           position: TOOL_POSITION.FRONT,
-          template: html` <mwc-icon>upload</mwc-icon> `,
+          template: html` <md-icon>upload</md-icon> `,
           context: 'importable'
         },
         {