@operato/input 2.0.0-alpha.57 → 2.0.0-alpha.62

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.57",
+  "version": "2.0.0-alpha.62",
   "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.57",
-    "@operato/popup": "^2.0.0-alpha.57",
-    "@operato/styles": "^2.0.0-alpha.57",
+    "@operato/i18n": "^2.0.0-alpha.59",
+    "@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": "2786e62dc37ead8c5a858869baa5c083dce24e93"
+  "gitHead": "0265a1407b7a20729845d67410297cc50975e2a8"
 }

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-code.ts

@@ -5,8 +5,9 @@
 import { css, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { minimalSetup } from 'codemirror'
 import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
-import { EditorView, highlightActiveLine, keymap } from '@codemirror/view'
+import { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view'
 import { autocompletion, closeBrackets } from '@codemirror/autocomplete'
 import { bracketMatching, LanguageSupport, syntaxHighlighting } from '@codemirror/language'
 import { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'
@@ -25,7 +26,7 @@ WEB Component for code-mirror code editor.
 
 Example:
 
-  <ox-input-code .value=${text} tab-size="4" tab-as-space="true" language="javascript">
+  <ox-input-code .value=${text} language="javascript" show-line-numbers>
   </ox-input-code>
 */
 @customElement('ox-input-code')
@@ -51,8 +52,7 @@ export class OxInputCode extends OxFormField {
    * `value`는 에디터에서 작성중인 contents이다.
    */
   @property({ type: String }) value: string = ''
-  @property({ type: Number, attribute: 'tab-size' }) tabSize: number = 2
-  @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true
+  @property({ type: Boolean, attribute: 'show-line-numbers' }) showLineNumbers: boolean = false
   @property({ type: String }) language?: string = 'javascript'
 
   private _self_changing: boolean = false
@@ -88,7 +88,9 @@ export class OxInputCode extends OxFormField {
       this._editor = new EditorView({
         doc: this.value,
         extensions: [
+          minimalSetup,
           ...language,
+          ...(this.showLineNumbers ? [lineNumbers()] : []),
           bracketMatching(),
           closeBrackets(),
           history(),
@@ -129,15 +131,6 @@ export class OxInputCode extends OxFormField {
       this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
     })
 
-    // this._editor.contentDOM.addEventListener('change', async e => {
-    //   this._self_changing = true
-    //   this._changed = true
-
-    //   await this.updateComplete
-
-    //   this._self_changing = false
-    // })
-
     return this._editor
   }
 }

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'
 
@@ -71,12 +69,11 @@ export class OxInputDuration extends OxFormField {
       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 {
@@ -148,7 +145,7 @@ export class OxInputDuration extends OxFormField {
           }}
           ?disabled=${this.disabled}
         >
-          <mwc-icon>backspace</mwc-icon>
+          <md-icon>backspace</md-icon>
         </button>
       </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,9 @@ 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 +75,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 +104,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 +127,7 @@ export class OxInputFile extends OxFormField {
               file => html`
                 <li>
                   - ${file.name}
-                  <mwc-icon
+                  <md-icon
                     @click=${(e: Event) => {
                       if (this.disabled) {
                         return
@@ -136,7 +136,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'
@@ -50,7 +50,7 @@ export class OxInputKeyValues extends OxFormField {
     button + button {
       margin-left: -5px;
     }
-    button mwc-icon {
+    button md-icon {
       font-size: var(--fontsize-default);
     }
     button:focus,
@@ -112,7 +112,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 +120,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 +128,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 +140,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 +260,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 +286,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'
 
@@ -75,9 +75,6 @@ export class OxInputMassFraction extends OxFormField {
         color: var(--button-color);
         cursor: pointer;
       }
-      button mwc-icon {
-        font-size: var(--fontsize-default);
-      }
       button:focus,
       button:hover,
       button:active {
@@ -87,6 +84,7 @@ export class OxInputMassFraction extends OxFormField {
       }
 
       input,
+      label,
       ox-select {
         border: 0;
         border-bottom: var(--border-dark-color);
@@ -135,6 +133,10 @@ export class OxInputMassFraction extends OxFormField {
       [right-end] {
         margin-left: auto;
       }
+
+      [hidden] {
+        opacity: 0;
+      }
     `
   ]
 
@@ -157,6 +159,12 @@ 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>
+        </div>
         ${arrayed.length
           ? arrayed.map(
               (item, idx) => html`
@@ -181,7 +189,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 +199,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 +207,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 +243,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 +255,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 +263,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'
@@ -47,14 +47,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 +77,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 +88,7 @@ export class OxInputMultipleColors extends OxFormField {
                       data-index=${index}
                       ?disabled=${this.disabled}
                     >
-                      <mwc-icon>remove</mwc-icon>
+                      <md-icon>remove</md-icon>
                     </button>
                   `
                 : html``}

package/src/ox-input-options.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 } from 'lit/decorators.js'
@@ -32,7 +32,6 @@ export class OxInputOptions 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;
@@ -40,9 +39,6 @@ export class OxInputOptions extends OxFormField {
     button + button {
       margin-left: -5px;
     }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
     button:focus,
     button:hover,
     button:active {
@@ -91,7 +87,7 @@ export class OxInputOptions extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>remove</mwc-icon>
+              <md-icon>remove</md-icon>
             </button>
           </div>
         `
@@ -103,7 +99,7 @@ export class OxInputOptions extends OxFormField {
               <input type="text" data-text="" placeholder="text" value="" />
               <input type="text" data-value="" placeholder="value" value="" @change=${(e: Event) => this._add()} />
               <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-                <mwc-icon>add</mwc-icon>
+                <md-icon>add</md-icon>
               </button>
             </div>
           `}