@operato/input 2.0.0-alpha.59 → 2.0.0-alpha.64

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "2.0.0-alpha.59",
+  "version": "2.0.0-alpha.64",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -194,11 +194,11 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.22.1",
     "@lit/localize": "^0.12.1",
-    "@material/mwc-icon": "^0.27.0",
+    "@material/web": "^1.4.0",
     "@operato/color-picker": "^2.0.0-alpha.57",
     "@operato/i18n": "^2.0.0-alpha.59",
-    "@operato/popup": "^2.0.0-alpha.57",
-    "@operato/styles": "^2.0.0-alpha.57",
+    "@operato/popup": "^2.0.0-alpha.62",
+    "@operato/styles": "^2.0.0-alpha.62",
     "@operato/utils": "^2.0.0-alpha.57",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
@@ -243,5 +243,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "54cb91b22d4949cbae84235292e31a06cf054fa6"
+  "gitHead": "51399aac2553f6a1c2c242295ba9e996f3562067"
 }

package/src/ox-input-barcode.ts

@@ -225,12 +225,12 @@ export class OxInputBarcode extends OxFormField {
       this.popup = OxPopup.open({
         template: html`
           <video></video>
-          <mwc-icon
+          <md-icon
             style="position: fixed; right: 0; top: 0; color: red; tabindex: 0"
             @click=${() => {
               this.stopScan()
             }}
-            >close</mwc-icon
+            >close</md-icon
           >
         `,
         width: '100vw',

package/src/ox-input-container.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/popup/ox-popup-list.js'
 
 import { css, html, LitElement } from 'lit'
@@ -17,7 +17,7 @@ export class OxInputContainer extends LitElement {
   render() {
     return html`
       <slot> </slot>
-      <mwc-icon @click=${this.openPopupList.bind(this)}>menu</mwc-icon>
+      <md-icon @click=${this.openPopupList.bind(this)}>menu</md-icon>
 
       <ox-popup-list></ox-popup-list>
     `

package/src/ox-input-crontab.ts

@@ -2,8 +2,6 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-button'
-
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
@@ -211,14 +209,12 @@ export class OxInputCrontab extends OxFormField {
       margin: -0.25rem;
     }
 
-    mwc-button {
-      background-color: var(--secondary-color);
+    button {
       border-radius: var(--button-border-radius);
-      --mdc-theme-primary: #fff;
       margin: 0.25rem;
     }
-    mwc-button:hover,
-    mwc-button:active {
+    button:hover,
+    button:active {
       background-color: var(--primary-color);
     }
   `
@@ -399,7 +395,7 @@ export class OxInputCrontab extends OxFormField {
   }
 
   get focusableElements(): HTMLElement[] {
-    return Array.from(this.renderRoot.querySelectorAll('select, input, mwc-button'))
+    return Array.from(this.renderRoot.querySelectorAll('select, input, button'))
   }
 
   firstUpdated() {

package/src/ox-input-data.ts

@@ -38,7 +38,7 @@ export class OxInputData extends OxFormField {
         font-size: small;
       }
 
-      div[datatype] mwc-icon {
+      div[datatype] md-icon {
         margin-left: auto;
       }
 
@@ -88,7 +88,7 @@ export class OxInputData extends OxFormField {
         />
         <label for="object">object</label>
 
-        <mwc-icon @click=${() => this._clearData()} title="delete">delete_forever</mwc-icon>
+        <md-icon @click=${() => this._clearData()} title="delete">delete_forever</md-icon>
       </div>
 
       <ox-input-code

package/src/ox-input-duration.ts

@@ -2,8 +2,6 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-button'
-
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
@@ -28,9 +26,14 @@ export class OxInputDuration extends OxFormField {
     }
 
     form {
-      width: 100%;
-      height: 100%;
-      justify-content: center;
+      display: flex;
+      flex-direction: row;
+
+      align-items: center;
+    }
+
+    [padding] {
+      min-width: 100px;
     }
 
     input {
@@ -65,18 +68,16 @@ export class OxInputDuration extends OxFormField {
       border: var(--button-border);
       border-radius: var(--border-radius);
       background-color: var(--button-background-color);
-      padding: var(--padding-narrow) var(--padding-default);
       min-height: 35px;
       line-height: 0.8;
       color: var(--button-color);
       cursor: pointer;
     }
+
     button + button {
       margin-left: -5px;
     }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
+
     button:focus,
     button:hover,
     button:active {
@@ -100,6 +101,7 @@ export class OxInputDuration extends OxFormField {
 
     return html`
       <form @change=${this.onChange.bind(this)}>
+        <div padding></div>
         <input id="days" type="number" .value=${String(days || 0)} pattern="\\d*" ?disabled=${this.disabled} />
         <label for="days">${i18next.t('label.days')}</label>
 
@@ -148,8 +150,9 @@ export class OxInputDuration extends OxFormField {
           }}
           ?disabled=${this.disabled}
         >
-          <mwc-icon>backspace</mwc-icon>
+          <md-icon>backspace</md-icon>
         </button>
+        <div padding></div>
       </form>
     `
   }

package/src/ox-input-file.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
@@ -32,9 +32,10 @@ export class OxInputFile extends OxFormField {
         font: var(--file-uploader-font) !important;
         color: var(--file-uploader-color);
       }
-      :host > mwc-icon {
+
+      :host > md-icon {
         color: var(--file-uploader-icon-color);
-        --mdc-icon-size: var(--file-uploader-icon-size, 36px);
+        --md-icon-size: var(--file-uploader-icon-size, 36px);
       }
 
       :host(.candrop) {
@@ -75,14 +76,14 @@ export class OxInputFile extends OxFormField {
         border-bottom: var(--file-uploader-li-border-bottom);
         font: normal 14px var(--theme-font);
       }
-      li mwc-icon {
+      li md-icon {
         float: right;
         cursor: pointer;
         margin: var(--file-uploader-li-icon-margin);
         font-size: 1em;
       }
-      li mwc-icon:hover,
-      li mwc-icon:active {
+      li md-icon:hover,
+      li md-icon:active {
         color: var(--file-uploader-li-icon-focus-color);
       }
     `
@@ -104,7 +105,7 @@ export class OxInputFile extends OxFormField {
     var files: File[] = this.value || []
 
     return html`
-      <mwc-icon>${this.icon || 'upload'}</mwc-icon>
+      <md-icon>${this.icon || 'upload'}</md-icon>
 
       <span>${this.description || 'drop files here!'}</span>
 
@@ -127,7 +128,7 @@ export class OxInputFile extends OxFormField {
               file => html`
                 <li>
                   - ${file.name}
-                  <mwc-icon
+                  <md-icon
                     @click=${(e: Event) => {
                       if (this.disabled) {
                         return
@@ -136,7 +137,7 @@ export class OxInputFile extends OxFormField {
                       this.value = [...files]
                       this._notifyChange()
                     }}
-                    >delete_outline</mwc-icon
+                    >delete_outline</md-icon
                   >
                 </li>
               `

package/src/ox-input-i18n-label.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html } from 'lit'
 import { customElement, property, queryAll } from 'lit/decorators.js'

package/src/ox-input-image.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html } from 'lit'
 import { customElement, query } from 'lit/decorators.js'
@@ -76,11 +76,11 @@ export class OxInputImage extends OxFormField {
         place-content: center;
       }
 
-      mwc-icon {
+      md-icon {
         align-self: center;
 
         color: var(--file-uploader-icon-color, black);
-        --mdc-icon-size: var(--file-uploader-icon-size, 36px);
+        --md-icon-size: var(--file-uploader-icon-size, 36px);
       }
     `
   ]
@@ -118,7 +118,7 @@ export class OxInputImage extends OxFormField {
             @change=${(e: Event) => this._onChangeValue(e)}
             ?disabled=${this.disabled}
           />
-          <mwc-icon>upload</mwc-icon>
+          <md-icon>upload</md-icon>
         </label>
       </div>
     `

package/src/ox-input-key-values.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, nothing } from 'lit'
 import { customElement, property, queryAll } from 'lit/decorators.js'
@@ -29,6 +29,8 @@ export class OxInputKeyValues extends OxFormField {
       flex-direction: column;
       overflow: hidden;
       margin-bottom: var(--margin-wide);
+
+      --md-icon-size: 14px;
     }
 
     div {
@@ -50,9 +52,6 @@ export class OxInputKeyValues extends OxFormField {
     button + button {
       margin-left: -5px;
     }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
     button:focus,
     button:hover,
     button:active {
@@ -112,7 +111,7 @@ export class OxInputKeyValues extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>remove</mwc-icon>
+              <md-icon>remove</md-icon>
             </button>
             <button
               class="record-action"
@@ -120,7 +119,7 @@ export class OxInputKeyValues extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>arrow_upward</mwc-icon>
+              <md-icon>arrow_upward</md-icon>
             </button>
             <button
               class="record-action"
@@ -128,7 +127,7 @@ export class OxInputKeyValues extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>arrow_downward</mwc-icon>
+              <md-icon>arrow_downward</md-icon>
             </button>
           </div>
         `
@@ -140,10 +139,10 @@ export class OxInputKeyValues extends OxFormField {
               <input type="text" data-key placeholder="key" value="" />
               <input type="text" data-value placeholder="value" value="" list="value-template" />
               <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-                <mwc-icon>add</mwc-icon>
+                <md-icon>add</md-icon>
               </button>
-              <button class="hidden"><mwc-icon>add</mwc-icon></button>
-              <button class="hidden"><mwc-icon>add</mwc-icon></button>
+              <button class="hidden"><md-icon>add</md-icon></button>
+              <button class="hidden"><md-icon>add</md-icon></button>
             </div>
           `}
 
@@ -260,13 +259,16 @@ export class OxInputKeyValues extends OxFormField {
     const deleted = array.splice(index, 1)
     array.splice(index + 1, 0, ...deleted)
 
-    this.value = array.reduce((sum, record) => {
-      const key = (record.querySelector('[data-key]') as HTMLInputElement).value
-      const value = (record.querySelector('[data-value]') as HTMLInputElement).value
+    this.value = array.reduce(
+      (sum, record) => {
+        const key = (record.querySelector('[data-key]') as HTMLInputElement).value
+        const value = (record.querySelector('[data-value]') as HTMLInputElement).value
 
-      sum[key] = value
-      return sum
-    }, {} as { [key: string]: string })
+        sum[key] = value
+        return sum
+      },
+      {} as { [key: string]: string }
+    )
 
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
   }
@@ -283,13 +285,16 @@ export class OxInputKeyValues extends OxFormField {
     array.splice(index, 1)
     array.splice(index + 1, 0, record)
 
-    this.value = array.reduce((sum, record) => {
-      const key = (record.querySelector('[data-key]') as HTMLInputElement).value
-      const value = (record.querySelector('[data-value]') as HTMLInputElement).value
+    this.value = array.reduce(
+      (sum, record) => {
+        const key = (record.querySelector('[data-key]') as HTMLInputElement).value
+        const value = (record.querySelector('[data-value]') as HTMLInputElement).value
 
-      sum[key] = value
-      return sum
-    }, {} as { [key: string]: string })
+        sum[key] = value
+        return sum
+      },
+      {} as { [key: string]: string }
+    )
 
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
   }

package/src/ox-input-mass-fraction.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/popup/ox-popup-list.js'
 import './ox-select.js'
 
@@ -43,19 +43,26 @@ export class OxInputMassFraction extends OxFormField {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+
+        --md-icon-size: var(--fontsize-default, 14px);
       }
 
       [records] {
         flex: 1;
 
         overflow: overlay;
-      }
 
-      [records] > div {
-        display: flex;
-        flex-flow: row nowrap;
-        gap: var(--mass-fraction-gap, 3px);
-        margin-bottom: var(--margin-narrow);
+        > div {
+          display: flex;
+          flex-flow: row nowrap;
+          gap: var(--mass-fraction-gap, 3px);
+          margin-bottom: var(--margin-narrow);
+        }
+
+        > [nofraction] {
+          display: block;
+          text-align: center;
+        }
       }
 
       [data-record-new] {
@@ -74,19 +81,18 @@ export class OxInputMassFraction extends OxFormField {
         padding: var(--mass-fraction-button-padding-vertical, 3px) var(--mass-fraction-button-padding-horizontal, 3px);
         color: var(--button-color);
         cursor: pointer;
-      }
-      button mwc-icon {
-        font-size: var(--fontsize-default);
-      }
-      button:focus,
-      button:hover,
-      button:active {
-        border: var(--button-active-border);
-        background-color: var(--button-background-focus-color);
-        color: var(--theme-white-color);
+
+        &:focus,
+        &:hover,
+        &:active {
+          border: var(--button-active-border, 1px solid rgba(0, 0, 0, 0.2));
+          background-color: var(--button-background-focus-color);
+          color: var(--theme-white-color);
+        }
       }
 
       input,
+      label,
       ox-select {
         border: 0;
         border-bottom: var(--border-dark-color);
@@ -95,10 +101,15 @@ export class OxInputMassFraction extends OxFormField {
         min-width: 50px;
       }
 
-      input {
+      input,
+      label {
         padding: var(--input-padding);
       }
 
+      label {
+        text-align: center;
+      }
+
       ox-select {
         padding: 0;
       }
@@ -127,14 +138,13 @@ export class OxInputMassFraction extends OxFormField {
         left: 0;
       }
 
-      [records] > [nofraction] {
-        display: block;
-        text-align: center;
-      }
-
       [right-end] {
         margin-left: auto;
       }
+
+      [hidden] {
+        opacity: 0;
+      }
     `
   ]
 
@@ -157,6 +167,13 @@ export class OxInputMassFraction extends OxFormField {
 
     return html`
       <div records>
+        <div data-header>
+          <label data-key>성분</label>
+          <label data-value>체적비(몰분율)</label>
+          <button hidden><md-icon>remove</md-icon></button>
+          <button hidden><md-icon>remove</md-icon></button>
+          ${this.composable ? html` <button hidden><md-icon>remove</md-icon></button>` : nothing}
+        </div>
         ${arrayed.length
           ? arrayed.map(
               (item, idx) => html`
@@ -181,7 +198,7 @@ export class OxInputMassFraction extends OxFormField {
                           tabindex="-1"
                           ?disabled=${this.disabled}
                         >
-                          <mwc-icon>remove</mwc-icon>
+                          <md-icon>remove</md-icon>
                         </button>
                       `
                     : nothing}
@@ -191,7 +208,7 @@ export class OxInputMassFraction extends OxFormField {
                     tabindex="-1"
                     ?disabled=${this.disabled || idx === 0}
                   >
-                    <mwc-icon>arrow_upward</mwc-icon>
+                    <md-icon>arrow_upward</md-icon>
                   </button>
                   <button
                     class="record-action"
@@ -199,7 +216,7 @@ export class OxInputMassFraction extends OxFormField {
                     tabindex="-1"
                     ?disabled=${this.disabled || idx === arrayed.length - 1}
                   >
-                    <mwc-icon>arrow_downward</mwc-icon>
+                    <md-icon>arrow_downward</md-icon>
                   </button>
                 </div>
               `
@@ -235,7 +252,7 @@ export class OxInputMassFraction extends OxFormField {
                       list="value-template"
                     />
                     <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-                      <mwc-icon>add</mwc-icon>
+                      <md-icon>add</md-icon>
                     </button>
                   `
                 : nothing}
@@ -247,7 +264,7 @@ export class OxInputMassFraction extends OxFormField {
                 }}
                 right-end
               >
-                <mwc-icon>settings_suggest</mwc-icon>
+                <md-icon>settings_suggest</md-icon>
               </button>
               <button
                 title="normalize fraction"
@@ -255,7 +272,7 @@ export class OxInputMassFraction extends OxFormField {
                   this._normalize()
                 }}
               >
-                <mwc-icon>repartition</mwc-icon>
+                <md-icon>repartition</md-icon>
               </button>
             </div>
           `}

package/src/ox-input-multiple-colors.ts

@@ -3,7 +3,7 @@
  */
 
 import './ox-input-color.js'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html } from 'lit'
 import { customElement, property, query, queryAll } from 'lit/decorators.js'
@@ -28,7 +28,10 @@ export class OxInputMultipleColors extends OxFormField {
   static styles = css`
     :host {
       display: inline-block;
+
+      --md-icon-size: var(--fontsize-default, 14px);
     }
+
     #colors-container > div {
       display: grid;
       grid-template-columns: 34px 1fr 34px;
@@ -47,14 +50,11 @@ export class OxInputMultipleColors extends OxFormField {
       border: var(--button-border);
       border-radius: var(--border-radius);
       background-color: var(--button-background-color);
-      padding: var(--padding-narrow) var(--padding-default);
       line-height: 0.8;
       color: var(--button-color);
       cursor: pointer;
     }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
+
     button:focus,
     button:hover,
     button:active {
@@ -80,7 +80,7 @@ export class OxInputMultipleColors extends OxFormField {
           (item, index) => html`
             <div>
               <button @click=${() => this._appendEditorColor()} data-index=${index} ?disabled=${this.disabled}>
-                <mwc-icon>add</mwc-icon>
+                <md-icon>add</md-icon>
               </button>
               <ox-input-color .value=${item} ?disabled=${this.disabled}> </ox-input-color>
 
@@ -91,7 +91,7 @@ export class OxInputMultipleColors extends OxFormField {
                       data-index=${index}
                       ?disabled=${this.disabled}
                     >
-                      <mwc-icon>remove</mwc-icon>
+                      <md-icon>remove</md-icon>
                     </button>
                   `
                 : html``}