@operato/input 2.0.0-alpha.0 → 2.0.0-alpha.100

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,15 +138,19 @@ export class OxInputMassFraction extends OxFormField {
         left: 0;
       }
 
-      [records] > [nofraction] {
-        display: block;
-        text-align: center;
+      [right-end] {
+        margin-left: auto;
+      }
+
+      [hidden] {
+        opacity: 0;
       }
     `
   ]
 
   @property({ type: Object }) defaultValue: MassFraction = {}
   @property({ type: Object }) value: MassFraction = {}
+  @property({ type: Boolean, attribute: true }) composable: boolean = false
 
   @queryAll('[data-record]') records!: NodeListOf<HTMLElement>
 
@@ -152,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`
@@ -168,21 +190,25 @@ export class OxInputMassFraction extends OxFormField {
                     list="value-template"
                     ?disabled=${this.disabled}
                   />
-                  <button
-                    class="record-action"
-                    @click=${(e: MouseEvent) => this._delete(e)}
-                    tabindex="-1"
-                    ?disabled=${this.disabled}
-                  >
-                    <mwc-icon>remove</mwc-icon>
-                  </button>
+                  ${this.composable
+                    ? html`
+                        <button
+                          class="record-action"
+                          @click=${(e: MouseEvent) => this._delete(e)}
+                          tabindex="-1"
+                          ?disabled=${this.disabled}
+                        >
+                          <md-icon>remove</md-icon>
+                        </button>
+                      `
+                    : nothing}
                   <button
                     class="record-action"
                     @click=${(e: MouseEvent) => this._up(e)}
                     tabindex="-1"
                     ?disabled=${this.disabled || idx === 0}
                   >
-                    <mwc-icon>arrow_upward</mwc-icon>
+                    <md-icon>arrow_upward</md-icon>
                   </button>
                   <button
                     class="record-action"
@@ -190,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>
               `
@@ -202,38 +228,43 @@ export class OxInputMassFraction extends OxFormField {
         ? nothing
         : html`
             <div data-record-new>
-              <ox-select
-                data-key
-                placeholder="Fluid"
-                .value=${live('')}
-                @change=${(e: Event) => {
-                  e.stopPropagation()
-                }}
-              >
-                <ox-popup-list with-search> ${this.options} </ox-popup-list>
-              </ox-select>
-
-              <input
-                type="number"
-                data-value
-                placeholder="proportion"
-                min="0"
-                max="1"
-                step="0.01"
-                value=""
-                list="value-template"
-              />
-              <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-                <mwc-icon>add</mwc-icon>
-              </button>
+              ${this.composable
+                ? html`
+                    <ox-select
+                      data-key
+                      placeholder="Fluid"
+                      .value=${live('')}
+                      @change=${(e: Event) => {
+                        e.stopPropagation()
+                      }}
+                    >
+                      <ox-popup-list with-search> ${this.options} </ox-popup-list>
+                    </ox-select>
+
+                    <input
+                      type="number"
+                      data-value
+                      placeholder="proportion"
+                      min="0"
+                      max="1"
+                      step="0.01"
+                      value=""
+                      list="value-template"
+                    />
+                    <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
+                      <md-icon>add</md-icon>
+                    </button>
+                  `
+                : nothing}
               <button
                 title="fill with the values suggested"
                 @click=${() => {
                   this.value = { ...this.defaultValue }
                   this.dispatchChangeEvent()
                 }}
+                right-end
               >
-                <mwc-icon>settings_suggest</mwc-icon>
+                <md-icon>settings_suggest</md-icon>
               </button>
               <button
                 title="normalize fraction"
@@ -241,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 }))
   }

package/src/ox-input-privilege.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'
 import { ifDefined } from 'lit/directives/if-defined.js'
@@ -33,6 +31,21 @@ export class OxInputPrivilege extends OxFormField {
       height: 100%;
     }
 
+    select {
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
+
+      max-height: 35px;
+    }
+
+    select:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
+    }
+
     div[values] {
       display: grid;
       grid-template-columns: 1fr 1fr;
@@ -66,41 +79,11 @@ export class OxInputPrivilege extends OxFormField {
       border-bottom: 1px solid var(--primary-color);
     }
 
-    input:invalid {
-      border-bottom: 1px solid var(--status-danger-color);
-      color: var(--status-danger-color);
-    }
-
     label {
       margin-right: var(--margin-default);
       font: normal 0.8em var(--theme-font);
       color: var(--primary-color);
     }
-
-    div[buttons] {
-      display: flex;
-      flex-direction: row;
-      justify-content: left;
-      padding: 10px;
-    }
-
-    button {
-      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:focus,
-    button:hover,
-    button:active {
-      border: var(--button-activ-border);
-      background-color: var(--button-background-focus-color);
-      color: var(--theme-white-color);
-    }
   `
 
   @property({ type: Object }) value?: {

package/src/ox-input-search.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import debounce from 'lodash-es/debounce'
 import { css, html } from 'lit'
@@ -19,7 +19,7 @@ export class OxInputSearch extends OxFormField {
         position: relative;
         align-items: center;
 
-        --mdc-icon-size: 20px;
+        --md-icon-size: 20px;
       }
 
       [type='text'] {
@@ -31,6 +31,7 @@ export class OxInputSearch extends OxFormField {
         padding-left: 25px;
         font: var(--input-search-font, var(--input-font));
         color: var(--primary-text-color);
+        overflow: hidden;
       }
 
       [type='text']:focus {
@@ -38,7 +39,7 @@ export class OxInputSearch extends OxFormField {
         border-bottom: var(--input-search-focus-border-bottom, 1px solid var(--primary-color));
       }
 
-      mwc-icon {
+      md-icon {
         position: absolute;
         color: var(--secondary-color);
       }
@@ -54,7 +55,7 @@ export class OxInputSearch extends OxFormField {
 
   render() {
     return html`
-      <mwc-icon @click=${(e: Event) => !this.disabled && this._onClickSearch(e)}>search</mwc-icon>
+      <md-icon @click=${(e: Event) => !this.disabled && this._onClickSearch(e)}>search</md-icon>
       <input
         type="text"
         .value=${this.value || ''}

package/src/ox-input-select-buttons.ts

@@ -21,7 +21,7 @@ export class OxInputSelectButtons extends OxFormField {
 
     span {
       border-radius: 9999px;
-      background-color: #efefef;
+      background-color: rgba(255, 255, 255, 0.7);
       padding: 2px 10px;
     }
 

package/src/ox-input-table.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu'
 import '@polymer/paper-item/paper-item'
 import '@operato/i18n/ox-i18n.js'
@@ -74,7 +74,7 @@ class OxInputTable extends OxFormField {
           line-height: 1.5;
         }
 
-        #border-set > mwc-icon {
+        #border-set > md-icon {
           grid-column: span 2;
           margin: 0 0 0 8px;
           width: 32px;
@@ -216,16 +216,16 @@ class OxInputTable extends OxFormField {
           border-style-btn"
           @click=${(e: Event) => this._onClickType(e)}
         >
-          <mwc-icon data-value="out">border_outer</mwc-icon>
-          <mwc-icon data-value="in">border_inner</mwc-icon>
-          <mwc-icon data-value="all">border_all</mwc-icon>
-          <mwc-icon data-value="left">border_left</mwc-icon>
-          <mwc-icon data-value="center">border_vertical</mwc-icon>
-          <mwc-icon data-value="right">border_right</mwc-icon>
-          <mwc-icon data-value="top">border_top</mwc-icon>
-          <mwc-icon data-value="middle">border_horizontal</mwc-icon>
-          <mwc-icon data-value="bottom">border_bottom</mwc-icon>
-          <mwc-icon data-value="clear">border_clear</mwc-icon>
+          <md-icon data-value="out">border_outer</md-icon>
+          <md-icon data-value="in">border_inner</md-icon>
+          <md-icon data-value="all">border_all</md-icon>
+          <md-icon data-value="left">border_left</md-icon>
+          <md-icon data-value="center">border_vertical</md-icon>
+          <md-icon data-value="right">border_right</md-icon>
+          <md-icon data-value="top">border_top</md-icon>
+          <md-icon data-value="middle">border_horizontal</md-icon>
+          <md-icon data-value="bottom">border_bottom</md-icon>
+          <md-icon data-value="clear">border_clear</md-icon>
         </div>
 
         <div class="property-grid">