@operato/context 2.0.0-alpha.13 → 2.0.0-alpha.131

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'
@@ -22,7 +22,7 @@ export class PageTitleBar extends connect(store)(LitElement) {
         --help-icon-opacity: 0.2;
         --help-icon-size: 20px;
 
-        --mdc-icon-size: 20px;
+        --md-icon-size: 20px;
 
         --input-search-padding: var(--padding-narrow);
         --input-search-font: normal 14px var(--theme-font);
@@ -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'
@@ -21,7 +21,7 @@ export class TitleBar extends connect(store)(LitElement) {
         --help-icon-opacity: 0.2;
         --help-icon-size: 20px;
 
-        --mdc-icon-size: 20px;
+        --md-icon-size: 20px;
 
         --input-search-padding: 7px;
         --input-search-border-bottom: none;
@@ -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

@@ -0,0 +1,141 @@
+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'
+import { CommonHeaderStyles } from '@operato/styles'
+import { TOOL_POSITION } from '@operato/layout'
+
+import '@operato/styles'
+
+import { css, html, render, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-context-page-toolbar select buttons',
+  component: 'ox-context-page-toolbar',
+  argTypes: {
+    label: { control: 'string' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  label?: string
+}
+
+const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/material-theme.css" 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;
+    }
+
+    ${CommonHeaderStyles.cssText}
+  </style>
+
+  <div style="height:600px;">
+    <div class="header">
+      <div class="title">
+        ${label}
+      </div>
+
+      <div class="filters">
+        <label>Filter-X</label><input type="text" name="name"></input>
+        <ox-input-select-buttons
+        @change=${(e: Event) => {
+          console.log((e.target as HTMLInputElement).value)
+        }}
+        name="wearables"
+        .value=${'Gloves'}
+        .options=${[
+          { display: 'SHOOSE', value: 'Shoose' },
+          { display: 'CHOTHES', value: 'Clothes' },
+          { display: 'GLOVES', value: 'Gloves' }
+        ]}
+        multiple
+      ></ox-input-select-buttons>
+      </div>
+
+      <ox-context-page-toolbar class="actions" 
+      .tools=${[
+        {
+          position: TOOL_POSITION.FRONT,
+          template: html` <md-icon>download</md-icon> `,
+          context: 'exportable'
+        },
+        {
+          position: TOOL_POSITION.FRONT,
+          template: html` <md-icon>upload</md-icon> `,
+          context: 'importable'
+        },
+        {
+          position: TOOL_POSITION.CENTER,
+          template: html`<ox-page-action-context-bar
+            .actions=${[
+              {
+                title: 'save',
+                action: () => {},
+                icon: 'save'
+              },
+              {
+                title: 'copy',
+                action: () => {},
+                icon: 'content_copy',
+                emphasis: {
+                  outlined: true
+                }
+              },
+              {
+                title: 'edit',
+                action: () => {},
+                icon: 'content_copy',
+                emphasis: {
+                  outlined: true
+                }
+              },
+              {
+                title: 'hoppaang',
+                action: () => {},
+                icon: '',
+                emphasis: {
+                  outlined: true
+                }
+              },
+              {
+                title: 'delete',
+                action: () => {},
+                icon: 'delete',
+                emphasis: {
+                  danger: true,
+                  filled: true
+                }
+              }
+            ]}
+          ></ox-page-action-context-bar>`
+        }
+      ]}
+      .context=${{
+        exportable: true,
+        importable: true,
+        toolbar: false
+      }}
+        
+      }> </ox-context-page-toolbar>
+    </div>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  label: 'common header styles'
+}

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

@@ -0,0 +1,108 @@
+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'
+import { TOOL_POSITION } from '@operato/layout'
+import { sleep } from '@operato/utils'
+
+import '@operato/styles'
+
+import { css, html, render, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-context-page-toolbar-select',
+  component: 'ox-context-page-toolbar',
+  argTypes: {
+    label: { control: 'string' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  label?: string
+}
+
+const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/material-theme.css" 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;
+    }
+
+    ${CommonHeaderStyles.cssText}
+  </style>
+
+  <div style="height:600px;">
+    <div class="header">
+      <div class="title">
+        ${label}
+      </div>
+
+      <div class="filters">
+        <label>Filter</label><input type="text"></input>
+      </div>
+
+      <ox-context-page-toolbar class="actions" 
+      .tools=${[
+        {
+          position: TOOL_POSITION.FRONT,
+          template: html` <md-icon>download</md-icon> `,
+          context: 'exportable'
+        },
+        {
+          position: TOOL_POSITION.FRONT,
+          template: html` <md-icon>upload</md-icon> `,
+          context: 'importable'
+        },
+        {
+          position: TOOL_POSITION.CENTER,
+          template: html`<ox-page-action-context-bar
+            .actions=${[
+              {
+                type: 'icon',
+                title: 'favorite',
+                icon: 'favorite',
+                action: async () => {
+                  await sleep(1000)
+                }
+              },
+              {
+                title: 'smile',
+                action: () => {},
+                select: ['', 'delete', 'hahaha', 'hohoho']
+              },
+              {
+                title: 'save',
+                action: () => {},
+                icon: 'save'
+              }
+            ]}
+          ></ox-page-action-context-bar>`
+        }
+      ]}
+      .context=${{
+        exportable: true,
+        importable: true,
+        toolbar: false
+      }}
+        
+      }> </ox-context-page-toolbar>
+    </div>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  label: 'common header styles'
+}

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

@@ -0,0 +1,107 @@
+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'
+import { TOOL_POSITION } from '@operato/layout'
+
+import '@operato/styles'
+
+import { css, html, render, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-context-page-toolbar',
+  component: 'ox-context-page-toolbar',
+  argTypes: {
+    label: { control: 'string' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  label?: string
+}
+
+const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/material-theme.css" 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;
+    }
+
+    ${CommonHeaderStyles.cssText}
+  </style>
+
+  <div style="height:600px;">
+    <div class="header">
+      <div class="title">
+        ${label}
+      </div>
+
+      <div class="filters">
+        <label>Filter</label><input type="text"></input>
+      </div>
+
+      <ox-context-page-toolbar class="actions" 
+      .tools=${[
+        {
+          position: TOOL_POSITION.FRONT,
+          template: html` <md-icon>download</md-icon> `,
+          context: 'exportable'
+        },
+        {
+          position: TOOL_POSITION.FRONT,
+          template: html` <md-icon>upload</md-icon> `,
+          context: 'importable'
+        },
+        {
+          position: TOOL_POSITION.CENTER,
+          template: html`<ox-page-action-context-bar
+            .actions=${[
+              {
+                title: 'save',
+                action: () => {},
+                icon: 'save'
+              },
+              {
+                title: 'copy',
+                action: () => {},
+                icon: 'content_copy'
+              },
+              {
+                title: 'delete',
+                action: () => {},
+                icon: 'delete',
+                emphasis: {
+                  danger: true
+                }
+              }
+            ]}
+          ></ox-page-action-context-bar>`
+        }
+      ]}
+      .context=${{
+        exportable: true,
+        importable: true,
+        toolbar: false
+      }}
+        
+      }> </ox-context-page-toolbar>
+    </div>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  label: 'common header styles'
+}

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

@@ -0,0 +1,162 @@
+import '@material/web/icon/icon.js'
+import '../src/layouts/ox-context-toolbar.js'
+import '../src/tools/ox-page-action-context-bar.js'
+import { TOOL_POSITION } from '@operato/layout'
+
+import '@operato/styles'
+
+import { css, html, render, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-context-toolbar complex',
+  component: 'ox-context-toolbar',
+  argTypes: {}
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {}
+
+const Template: Story<ArgTypes> = () => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/material-theme.css" rel="stylesheet" />
+  <link href="/themes/context-theme.css" 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;
+    }
+  </style>
+
+  <div style="height:100px; padding: 10px; background-color: black;">
+    <ox-context-toolbar
+      .tools=${[
+        {
+          position: TOOL_POSITION.FRONT_END,
+          template: html` <md-icon>download</md-icon> `,
+          context: 'exportable'
+        },
+        {
+          position: TOOL_POSITION.FRONT_END,
+          template: html` <md-icon>upload</md-icon> `,
+          context: 'importable'
+        },
+        {
+          position: TOOL_POSITION.FRONT,
+          template: html` <md-icon>download</md-icon> `,
+          context: 'exportable'
+        },
+        {
+          position: TOOL_POSITION.FRONT,
+          template: html` <md-icon>upload</md-icon> `,
+          context: 'importable'
+        },
+        {
+          position: TOOL_POSITION.CENTER,
+          template: html`<ox-page-action-context-bar
+            .actions=${[
+              {
+                title: 'save',
+                action: () => {},
+                icon: 'save'
+              },
+              {
+                title: 'copy',
+                action: () => {},
+                icon: 'content_copy'
+              },
+              {
+                title: 'delete',
+                action: () => {},
+                icon: 'delete',
+                emphasis: {
+                  danger: true
+                }
+              }
+            ]}
+          ></ox-page-action-context-bar>`
+        },
+        {
+          position: TOOL_POSITION.REAR,
+          template: html`<ox-page-action-context-bar
+            .actions=${[
+              {
+                title: 'save',
+                action: () => {},
+                icon: 'save'
+              },
+              {
+                title: 'copy',
+                action: () => {},
+                icon: 'content_copy'
+              },
+              {
+                title: 'delete',
+                action: () => {},
+                icon: 'delete'
+              }
+            ]}
+          ></ox-page-action-context-bar>`
+        },
+        {
+          position: TOOL_POSITION.REAR_END,
+          template: html`<ox-page-action-context-bar
+            .actions=${[
+              {
+                title: 'save',
+                action: () => {},
+                icon: 'save'
+              },
+              {
+                title: 'copy',
+                action: () => {},
+                icon: 'content_copy'
+              },
+              {
+                title: 'delete',
+                action: () => {},
+                icon: 'delete'
+              }
+            ]}
+          ></ox-page-action-context-bar>`
+        },
+        {
+          position: TOOL_POSITION.REAR_END,
+          template: html` <md-icon>download</md-icon> `,
+          context: 'exportable'
+        },
+        {
+          position: TOOL_POSITION.REAR_END,
+          template: html` <md-icon>upload</md-icon> `,
+          context: 'importable'
+        }
+      ]}
+      .context=${{
+        exportable: true,
+        importable: true,
+        toolbar: true
+      }}
+    >
+    </ox-context-toolbar>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {}