@operato/popup 1.17.2 → 2.0.0-alpha.100

package/src/ox-prompt.ts

@@ -1,8 +1,10 @@
-import '@material/mwc-button'
+import '@material/web/button/elevated-button.js'
+import '@material/web/icon/icon.js'
 
 import { css, html, nothing, LitElement } from 'lit'
 import { render } from 'lit-html'
 import { customElement, property, state } from 'lit/decorators.js'
+import { ScrollbarStyles } from '@operato/styles'
 
 const TYPES_ICON = {
   success: 'verified',
@@ -18,6 +20,7 @@ const TYPES_ICON = {
 @customElement('ox-prompt')
 export class OxPrompt extends LitElement {
   static styles = [
+    ScrollbarStyles,
     css`
       :host {
         --prompt-container-border-radius: 12px;
@@ -31,7 +34,7 @@ export class OxPrompt extends LitElement {
         box-shadow: var(--prompt-container-box-shadow);
         border-radius: var(--prompt-container-border-radius);
         box-sizing: border-box;
-        min-width: fit-content;
+        min-width: 260px;
         line-height: initial;
         text-align: initial;
       }
@@ -57,6 +60,28 @@ export class OxPrompt extends LitElement {
         padding: var(--padding-default);
         color: var(--primary-text-color);
         word-break: keep-all;
+
+        md-icon {
+          align-self: center;
+          --md-icon-size: 60px;
+          color: var(--primary-color);
+        }
+      }
+
+      [content].warning md-icon {
+        color: var(--status-warning-color, #ee8d03);
+      }
+
+      [content].error md-icon {
+        color: var(--status-danger-color, #d14946);
+      }
+
+      [content].info md-icon {
+        color: var(--status-info-color, #398ace);
+      }
+
+      [content].success md-icon {
+        color: var(--status-success-color, #35a24a);
       }
 
       [buttons] {
@@ -121,9 +146,9 @@ export class OxPrompt extends LitElement {
   render() {
     return html`
       ${this.titler ? html` <div titler>${this.titler}</div> ` : nothing}
-      <div content>
+      <div content class="${this.type || 'info'}">
         ${this.icon || this.type
-          ? html` <mwc-icon icon>${this.icon || TYPES_ICON[this.type || 'info']}</mwc-icon> `
+          ? html` <md-icon icon>${this.icon || TYPES_ICON[this.type || 'info']}</md-icon> `
           : nothing}
         ${this.text ? html` <div text>${this.text}</div> ` : nothing}
         <slot> </slot>
@@ -131,10 +156,18 @@ export class OxPrompt extends LitElement {
       </div>
       <div buttons>
         ${this.confirmButton
-          ? html` <mwc-button raised @click=${(e: Event) => this.onConfirm()}>${this.confirmButton?.text}</mwc-button> `
+          ? html`
+              <md-elevated-button raised @click=${(e: Event) => this.onConfirm()}
+                >${this.confirmButton?.text}</md-elevated-button
+              >
+            `
           : nothing}
         ${this.cancelButton
-          ? html` <mwc-button raised @click=${(e: Event) => this.onCancel()}>${this.cancelButton?.text}</mwc-button> `
+          ? html`
+              <md-elevated-button raised @click=${(e: Event) => this.onCancel()}
+                >${this.cancelButton?.text}</md-elevated-button
+              >
+            `
           : nothing}
       </div>
     `

package/stories/open-popup.stories.ts

@@ -46,28 +46,36 @@ const Template: Story<ArgTypes> = ({
   escapable,
   backdrop,
   help
-}: ArgTypes) =>
-  html`
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+}: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
 
-    <style>
-      #place {
-        width: 100%;
-        height: 500px;
-        background: lightgreen;
-        text-align: center;
-        line-height: 500px;
-      }
-    </style>
+  <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"
+  />
 
-    <div
-      id="place"
-      @click=${(e: MouseEvent) => popup(e, { title, size, hovering, closable, escapable, backdrop, help })}
-    >
-      Click this to popup image
-    </div>
-  `
+  <style>
+    #place {
+      width: 100%;
+      height: 500px;
+      background: lightgreen;
+      text-align: center;
+      line-height: 500px;
+    }
+  </style>
+
+  <div id="place" @click=${(e: MouseEvent) => popup(e, { title, size, hovering, closable, escapable, backdrop, help })}>
+    Click this to popup image
+  </div>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {

package/stories/ox-popup-list.stories.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/input/ox-checkbox.js'
 import '../src/ox-popup-list.js'
 
@@ -30,8 +30,20 @@ function popup(e: MouseEvent) {
 
 const Template: Story<ArgTypes> = ({}: ArgTypes) =>
   html`
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-    <style>
+  <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>
       #place {
         width: 100%;
         height: 500px;

package/stories/ox-popup-menu.stories.ts

@@ -1,6 +1,6 @@
 import '../src/ox-popup-menu.js'
 import '../src/ox-popup-menuitem.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/input/ox-checkbox.js'
 
 import { html, TemplateResult } from 'lit'
@@ -30,11 +30,11 @@ function popup(e: MouseEvent) {
           console.log('first level article selected')
         }}
       >
-        <mwc-icon slot="icon">article</mwc-icon>
+        <md-icon slot="icon">article</md-icon>
       </ox-popup-menuitem>
 
       <ox-popup-menuitem label="home">
-        <mwc-icon slot="icon">home</mwc-icon>
+        <md-icon slot="icon">home</md-icon>
       </ox-popup-menuitem>
 
       <ox-popup-menuitem label="empty"> </ox-popup-menuitem>
@@ -42,16 +42,16 @@ function popup(e: MouseEvent) {
       <ox-popup-menuitem
         label="click me to toggle"
         @selected=${function (e: Event) {
-          const icon = (e.target as HTMLElement).querySelector('mwc-icon')
+          const icon = (e.target as HTMLElement).querySelector('md-icon')
           icon && (icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check')
         }}
         alive-on-select
       >
-        <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
+        <md-icon slot="icon" style="width: 20px;height: 20px;"></md-icon>
       </ox-popup-menuitem>
 
       <ox-popup-menuitem label="verified" @selected=${(e: Event) => console.log('selected verified')}>
-        <mwc-icon slot="icon">verified</mwc-icon>
+        <md-icon slot="icon">verified</md-icon>
         <ox-popup-menu>
           <ox-popup-menuitem
             label="article"
@@ -60,26 +60,26 @@ function popup(e: MouseEvent) {
             }}
             alive-on-select
           >
-            <mwc-icon slot="icon">article</mwc-icon>
+            <md-icon slot="icon">article</md-icon>
           </ox-popup-menuitem>
 
           <ox-popup-menuitem label="home">
-            <mwc-icon slot="icon">home</mwc-icon>
+            <md-icon slot="icon">home</md-icon>
           </ox-popup-menuitem>
 
           <ox-popup-menuitem label="verified">
-            <mwc-icon slot="icon">verified</mwc-icon>
+            <md-icon slot="icon">verified</md-icon>
             <ox-popup-menu>
               <ox-popup-menuitem label="article">
-                <mwc-icon slot="icon">article</mwc-icon>
+                <md-icon slot="icon">article</md-icon>
               </ox-popup-menuitem>
 
               <ox-popup-menuitem label="home">
-                <mwc-icon slot="icon">home</mwc-icon>
+                <md-icon slot="icon">home</md-icon>
               </ox-popup-menuitem>
 
               <ox-popup-menuitem label="verified">
-                <mwc-icon slot="icon">verified</mwc-icon>
+                <md-icon slot="icon">verified</md-icon>
               </ox-popup-menuitem>
 
               <ox-popup-menuitem label="checkbox">
@@ -125,21 +125,32 @@ function popup(e: MouseEvent) {
   })
 }
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) =>
-  html`
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-    <style>
-      #place {
-        width: 100%;
-        height: 500px;
-        background: lightgreen;
-        text-align: center;
-        line-height: 500px;
-      }
-    </style>
-
-    <div id="place" @click=${(e: MouseEvent) => popup(e)}>Click this to popup menu</div>
-  `
+const Template: Story<ArgTypes> = ({}: 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"
+  />
+
+  <style>
+    #place {
+      width: 100%;
+      height: 500px;
+      background: lightgreen;
+      text-align: center;
+      line-height: 500px;
+    }
+  </style>
+
+  <div id="place" @click=${(e: MouseEvent) => popup(e)}>Click this to popup menu</div>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}

package/stories/ox-prompt-icon.stories.ts

@@ -0,0 +1,76 @@
+import { html, TemplateResult } from 'lit'
+
+import { OxPrompt } from '../src/ox-prompt'
+
+export default {
+  title: 'OxPrompt - Icon',
+  component: 'ox-prompt',
+  argTypes: {
+    type: { control: 'select', options: ['success', 'error', 'warning', 'info', 'question'] },
+    debug: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  type: 'success' | 'error' | 'warning' | 'info' | 'question'
+  debug: boolean
+}
+
+function popup(e: MouseEvent, type: 'success' | 'error' | 'warning' | 'info' | 'question' = 'warning', debug: boolean) {
+  const noImage = new URL('/assets/images/no-image.png', import.meta.url).href
+
+  //@ts-ignore
+  window.POPUP_DEBUG = debug
+
+  OxPrompt.open({
+    title: 'Are you sure ?',
+    text: 'Are you sure to exit this page ?',
+    type,
+    confirmButton: { text: 'Confirm' },
+    cancelButton: { text: 'Cancel' }
+  })
+}
+
+const Template: Story<ArgTypes> = ({ type, debug }: 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"
+  />
+
+  <script></script>
+
+  <style>
+    #place {
+      width: 100%;
+      height: 500px;
+      background: lightgreen;
+      text-align: center;
+      line-height: 500px;
+    }
+  </style>
+
+  <div id="place" @click=${(e: MouseEvent) => popup(e, type, debug)}>Click this to prompt image</div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  type: 'warning',
+  debug: true
+}

package/stories/ox-prompt-normal.stories.ts

@@ -27,23 +27,35 @@ function popup(e: MouseEvent) {
   })
 }
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) =>
-  html`
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-
-    <style>
-      #place {
-        width: 100%;
-        height: 500px;
-        background: lightgreen;
-        text-align: center;
-        line-height: 500px;
-      }
-    </style>
-
-    <div id="place" @click=${(e: MouseEvent) => popup(e)}>Click this to prompt image</div>
-  `
+const Template: Story<ArgTypes> = ({}: 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>
+    #place {
+      width: 100%;
+      height: 500px;
+      background: lightgreen;
+      text-align: center;
+      line-height: 500px;
+    }
+  </style>
+
+  <div id="place" @click=${(e: MouseEvent) => popup(e)}>Click this to prompt image</div>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}

package/stories/ox-prompt.stories.ts

@@ -30,23 +30,35 @@ function popup(e: MouseEvent) {
   })
 }
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) =>
-  html`
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-
-    <style>
-      #place {
-        width: 100%;
-        height: 500px;
-        background: lightgreen;
-        text-align: center;
-        line-height: 500px;
-      }
-    </style>
-
-    <div id="place" @click=${(e: MouseEvent) => popup(e)}>Click this to prompt image</div>
-  `
+const Template: Story<ArgTypes> = ({}: 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>
+    #place {
+      width: 100%;
+      height: 500px;
+      background: lightgreen;
+      text-align: center;
+      line-height: 500px;
+    }
+  </style>
+
+  <div id="place" @click=${(e: MouseEvent) => popup(e)}>Click this to prompt image</div>
+`
 
 export const Regular = Template.bind({})
 Regular.args = {}

package/themes/input-theme.css

@@ -1,9 +1,9 @@
 body {
-  --ox-input-border: 1px solid rgba(0, 0, 0, 0.1);
-  --ox-input-border-radius: var(--border-radius);
-  --ox-input-padding: var(--input-padding);
-  --ox-input-font: normal 15px var(--theme-font);
-  --ox-input-color: var(--secondary-color);
+  --input-border: 1px solid rgba(0, 0, 0, 0.1);
+  --input-border-radius: var(--border-radius);
+  --input-padding: var(--input-padding);
+  --input-font: normal 15px var(--theme-font);
+  --input-color: var(--secondary-color);
 }
 
 @media screen and (max-width: 480px) {
@@ -13,7 +13,7 @@ body {
 
 @media (min-width: 481px) and (max-width: 1024px) {
   body {
-    --ox-input-font: normal 16px var(--theme-font);
-    --ox-input-padding: 4px 5px;
+    --input-font: normal 16px var(--theme-font);
+    --input-padding: 4px 5px;
   }
 }

package/themes/material-theme.css

@@ -0,0 +1,88 @@
+body {
+  font-variation-settings: 'FILL' 1;
+
+  /* meterial theme color */
+  --md-sys-color-primary: var(--primary-color);
+  --md-sys-color-secondary: var(--secondary-color);
+  --md-sys-color-outline: rgba(var(--primary-color-rgb), 0.5);
+  --md-sys-color-on-primary: var(--theme-white-color);
+  --md-sys-color-on-surface-variant: var(--secondary-background-color);
+  --md-sys-color-on-surface: var(--primary-background-color);
+  --md-sys-color-outline-variant:rgba(var(--primary-color-rgb), 0.3);
+
+  --md-sys-shape-corner-small: var(--border-radius);
+  --md-sys-shape-corner-medium: 6px;
+  --md-sys-shape-corner-large: 8px;
+
+  --md-sys-shape-corner-full: var(--md-sys-shape-corner-small);
+
+  --md-sys-color-surface: var(--theme-white-color);
+  --md-sys-color-surface-container: var(--md-sys-color-surface);
+  --md-sys-color-surface-container-high: var(--primary-color);
+  --md-sys-color-surface-container-low: var(--secondary-color);
+  --md-sys-color-surface-container-highest: var(--theme-white-color);
+  --md-sys-color-surface-container-lowest: var(--secondary-color);
+  --md-sys-typescale-body-large: 400 1rem var(--theme-font);
+
+  --md-filled-text-field-container-shape: 0px;
+  --md-filled-text-field-label-text-color: #3f4948;
+  --md-filled-text-field-input-text-color: #161d1d;
+
+  --md-outlined-text-field-container-shape: 0px;
+  --md-outlined-text-field-label-text-color: #3f4948;
+  --md-outlined-text-field-input-text-color: #161d1d;
+
+  --md-outlined-select-text-field-outline-color: #6e7979;
+  --md-outlined-select-text-field-container-shape: 0px;
+  --md-outlined-select-text-field-input-text-color: #005353;
+  --md-outlined-select-text-field-input-text-font: system-ui;
+
+  --md-fab-container-color: var(--primary-color);
+  --md-fab-icon-color: var(--focus-color);
+
+  /* icon button tokens */
+  --md-icon-button-icon-size: 20px;
+
+  --md-filled-icon-button-container-width : 30px;
+  --md-filled-icon-button-container-height : 30px;
+  --md-filled-icon-button-icon-size: 20px;
+  --md-filled-icon-button-icon-size : var(--md-icon-button-icon-size);
+
+  --md-filled-tonal-icon-button-selected-container-color: var(--md-sys-color-primary);
+  --md-filled-tonal-icon-button-container-width:30px;
+  --md-filled-tonal-icon-button-container-height:30px;
+  --md-filled-tonal-icon-button-icon-size:var(--md-icon-button-icon-size);
+
+  --md-outlined-icon-button-container-width:30px;
+  --md-outlined-icon-button-container-height:30px;
+  --md-outlined-icon-button-icon-size:var(--md-icon-button-icon-size);
+
+
+  /* list tokens */
+  --md-list-item-leading-icon-color:var(--md-sys-color-primary);
+  --md-list-container-color: var(--md-sys-color-surface-container);
+  --md-list-item-container-shape: var(--md-sys-shape-corner-small);
+  --md-list-item-label-text-color: var(--primary-text-color);
+  --md-list-item-supporting-text-color: var(--secondary-text-color);
+  --md-list-item-trailing-supporting-text-color: var(--secondary-text-color);
+  --md-list-item-leading-icon-size:var(--md-icon-button-icon-size);
+  --md-list-item-trailing-icon-size:var(--md-icon-button-icon-size);
+
+  /* menu tokens */
+  --md-menu-container-color: var(--md-sys-color-surface-container);
+  --md-menu-container-shape: var(--md-sys-shape-corner-small);
+  --md-menu-item-selected-container-color: rgba(var(--primary-color-rgb), 0.2);
+
+  /* progress tokens */
+  --md-linear-progress-track-color: rgba(var(--secondary-color-rgb), 0.2);
+
+  /* slider tokens */
+  --md-slider-inactive-track-color: rgba(var(--secondary-color-rgb), 0.2);
+
+  /* switch tokens */
+  --md-switch-selected-handle-color: var(--md-sys-color-primary);
+  --md-switch-track-color: rgba(var(--secondary-color-rgb), 0.2);
+
+  /* tab tokens */
+  --md-primary-tab-icon-color: var(--md-sys-color-primary);
+}