@operato/input 2.0.0-alpha.8 → 2.0.0-alpha.81

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

@@ -0,0 +1,139 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/web/icon/icon.js'
+
+import { css, html } from 'lit'
+import { customElement, property, queryAll } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field'
+
+type I18nLabel = { [code: string]: string }
+
+const LANGUAGES = [
+  {
+    code: 'en',
+    display: 'English'
+  }
+]
+
+/**
+ input component for i18n labels
+ 
+ Example:
+ 
+   <ox-input-i18n-label 
+     value=${map}
+     languages=${languages}
+   </ox-input-i18n-label>
+ */
+@customElement('ox-input-i18n-label')
+export class OxInputI18nLabels extends OxFormField {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    [data-record] {
+      display: flex;
+      flex-direction: row;
+      gap: 10px;
+    }
+
+    label {
+      width: 80px;
+      align-self: center;
+      text-align: end;
+    }
+
+    input {
+      flex: 1;
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
+      min-width: 100px;
+    }
+
+    input:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
+    }
+
+    input[type='hidden'] {
+      flex: 0;
+    }
+  `
+
+  @property({ type: Object }) value: I18nLabel = {}
+  @property({ type: Array }) languages: { display: string; code: string }[] = LANGUAGES
+
+  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>
+
+  private changing: boolean = false
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this.onChange.bind(this))
+  }
+
+  render() {
+    const value = !this.value || typeof this.value !== 'object' ? {} : this.value
+    const languages = (this.languages && this.languages.length > 0 && this.languages) || LANGUAGES
+
+    return html`
+      ${languages.map(
+        ({ display, code }) => html`
+          <div data-record>
+            <label>${display}</label>
+            <input type="hidden" data-code value=${code} />
+            <input
+              type="text"
+              data-label
+              placeholder="label"
+              .value=${value?.[code] || ''}
+              ?disabled=${this.disabled}
+            />
+          </div>
+        `
+      )}
+    `
+  }
+
+  private onChange(e: Event) {
+    e.stopPropagation()
+
+    if (this.changing) {
+      return
+    }
+
+    this.changing = true
+
+    this.build()
+
+    this.changing = false
+  }
+
+  private build() {
+    var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>
+
+    var newmap: I18nLabel = {}
+
+    for (var i = 0; i < records.length; i++) {
+      var record = records[i]
+
+      const code = (record.querySelector('[data-code]') as HTMLInputElement).value
+      const label = (record.querySelector('[data-label]') as HTMLInputElement).value
+
+      if (code) {
+        newmap[code] = label || ''
+      }
+    }
+
+    this.value = { ...this.value, ...newmap }
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+}

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``}

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'
@@ -19,6 +19,8 @@ export class OxInputOptions extends OxFormField {
       flex-direction: column;
       overflow: hidden;
       margin-bottom: var(--margin-wide);
+
+      --md-icon-size: var(--fontsize-default, 14px);
     }
 
     div {
@@ -32,7 +34,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 +41,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 +89,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 +101,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>
           `}

package/src/ox-input-partition-keys.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 OxInputPartitionKeys extends OxFormField {
       flex-direction: column;
       overflow: hidden;
       margin-bottom: var(--margin-wide);
+
+      --md-icon-size: var(--fontsize-default, 14px);
     }
 
     div {
@@ -50,9 +52,7 @@ export class OxInputPartitionKeys extends OxFormField {
     button + button {
       margin-left: -5px;
     }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
+
     button:focus,
     button:hover,
     button:active {
@@ -109,7 +109,7 @@ export class OxInputPartitionKeys extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>remove</mwc-icon>
+              <md-icon>remove</md-icon>
             </button>
             <button
               class="record-action"
@@ -117,7 +117,7 @@ export class OxInputPartitionKeys extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>arrow_upward</mwc-icon>
+              <md-icon>arrow_upward</md-icon>
             </button>
             <button
               class="record-action"
@@ -125,7 +125,7 @@ export class OxInputPartitionKeys extends OxFormField {
               tabindex="-1"
               ?disabled=${this.disabled}
             >
-              <mwc-icon>arrow_downward</mwc-icon>
+              <md-icon>arrow_downward</md-icon>
             </button>
           </div>
         `
@@ -137,10 +137,10 @@ export class OxInputPartitionKeys 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>
           `}
 
@@ -261,13 +261,16 @@ export class OxInputPartitionKeys 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 }))
   }
@@ -284,13 +287,16 @@ export class OxInputPartitionKeys 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 }))
   }