@operato/input 1.0.0-beta.9 → 1.0.6

package/src/ox-input-partition-keys.ts

@@ -2,6 +2,8 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
+import '@material/mwc-icon'
+
 import { css, html } from 'lit'
 import { customElement, property, queryAll } from 'lit/decorators.js'
 
@@ -25,38 +27,55 @@ export class OxInputPartitionKeys extends OxFormField {
     :host {
       display: flex;
       flex-direction: column;
-      align-content: center;
-
-      width: 100%;
       overflow: hidden;
-      border: 1px solid #ccc;
+      margin-bottom: var(--margin-wide);
     }
 
     div {
       display: flex;
       flex-flow: row nowrap;
-      align-items: center;
-
-      border-bottom: 1px solid #c0c0c0;
+      gap: var(--margin-default);
+      margin-bottom: var(--margin-narrow);
     }
 
-    div:last-child {
-      border-bottom: none;
+    button {
+      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;
     }
-
-    div > * {
-      min-width: 0px;
-      margin: 2px;
-      padding: 0;
+    button + button {
+      margin-left: -5px;
     }
-
-    button {
-      width: 20px;
-      text-align: center;
+    button mwc-icon {
+      font-size: var(--fontsize-default);
+    }
+    button:focus,
+    button:hover,
+    button:active {
+      border: var(--button-activ-border);
+      background-color: var(--button-background-focus-color);
+      color: var(--theme-white-color);
     }
 
     input {
       flex: 1;
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
+    }
+    input:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
+    }
+    button.hidden {
+      opacity: 0;
+      cursor: default;
     }
   `
 
@@ -77,9 +96,15 @@ export class OxInputPartitionKeys extends OxFormField {
           <div data-record>
             <input type="text" data-key placeholder="key" .value=${item.key} />
             <input type="text" data-value placeholder="value" .value=${item.value} list="value-template" />
-            <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">-</button>
-            <button class="record-action" @click=${(e: MouseEvent) => this._up(e)} tabindex="-1">↑</button>
-            <button class="record-action" @click=${(e: MouseEvent) => this._down(e)} tabindex="-1">↓</button>
+            <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">
+              <mwc-icon>remove</mwc-icon>
+            </button>
+            <button class="record-action" @click=${(e: MouseEvent) => this._up(e)} tabindex="-1">
+              <mwc-icon>arrow_upward</mwc-icon>
+            </button>
+            <button class="record-action" @click=${(e: MouseEvent) => this._down(e)} tabindex="-1">
+              <mwc-icon>arrow_downward</mwc-icon>
+            </button>
           </div>
         `
       )}
@@ -87,7 +112,11 @@ export class OxInputPartitionKeys extends OxFormField {
       <div data-record-new>
         <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">+</button>
+        <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
+          <mwc-icon>add</mwc-icon>
+        </button>
+        <button class="hidden"><mwc-icon>add</mwc-icon></button>
+        <button class="hidden"><mwc-icon>add</mwc-icon></button>
       </div>
 
       <datalist id="value-template">

package/src/ox-input-quantifier.ts

@@ -0,0 +1,62 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { css, html } from 'lit'
+import { customElement, property, queryAll } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field.js'
+
+@customElement('ox-input-quantifier')
+export class OxInputQuantifier extends OxFormField {
+  static styles = css`
+    :host {
+      display: flex;
+      gap: var(--margin-default);
+      align-items: center;
+
+      width: 100%;
+      user-select: text;
+    }
+
+    input[type='number'] {
+      width: 48px;
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
+    }
+    input[type='number']:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
+    }
+
+    input:focus {
+      outline: none;
+      opacity: 1;
+    }
+  `
+
+  @property({ type: Array }) value: number[] = [1, 1]
+
+  render() {
+    const [min = 1, max = 1] = this.value || []
+
+    return html`
+      <span>
+        <input type="number" .value=${min} @change=${(e: Event) => this.onChange(e)} />
+        -
+        <input type="number" .value=${max} @change=${(e: Event) => this.onChange(e)} />
+      </span>
+    `
+  }
+
+  @queryAll('input') inputs?: HTMLInputElement[]
+
+  onChange(e: Event) {
+    e.stopPropagation()
+    this.value = Array.from(this.inputs || []).map(input => input.valueAsNumber) || [1, 1]
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+}

package/src/ox-input-range.ts

@@ -11,10 +11,9 @@ import { OxFormField } from './ox-form-field.js'
 class OxInputRange extends OxFormField {
   static styles = css`
     :host {
-      font-size: 16px;
       display: flex;
+      gap: var(--margin-default);
       align-items: center;
-      padding: 1px 0;
 
       width: 100%;
       user-select: text;
@@ -22,15 +21,15 @@ class OxInputRange extends OxFormField {
 
     input[type='number'] {
       width: 48px;
-      overflow: hidden;
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
     }
-
-    input[type='number'] {
-      color: black;
-      border: none;
-      font-weight: 300;
-      background: white;
-      padding: 1px 2px;
+    input[type='number']:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
     }
 
     input[type='range'] {
@@ -44,40 +43,40 @@ class OxInputRange extends OxFormField {
     }
     input[type='range']::-webkit-slider-runnable-track {
       width: 100%;
-      height: 1px;
-      background: black;
-      border: none;
+      height: 7px;
+      background-color: rgba(0, 0, 0, 0.02);
+      border: 1px solid rgba(0, 0, 0, 0.05);
       border-radius: 5px;
     }
     input[type='range']::-webkit-slider-thumb {
       -webkit-appearance: none;
       border: none;
-      height: 10px;
-      width: 10px;
+      height: 16px;
+      width: 16px;
       border-radius: 50%;
-      background: black;
-      margin-top: -5px;
+      background: var(--primary-color);
+      margin-top: -6px;
+      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);
     }
     input[type='range']:focus {
       outline: none;
     }
-    input[type='range']:focus::-webkit-slider-runnable-track {
-      background: black;
-    }
 
     input[type='range']::-moz-range-track {
       width: 100%;
-      height: 1px;
-      background: black;
-      border: none;
+      height: 7px;
+      background-color: rgba(0, 0, 0, 0.02);
+      border: 1px solid rgba(0, 0, 0, 0.05);
       border-radius: 5px;
     }
     input[type='range']::-moz-range-thumb {
       border: none;
-      height: 10px;
-      width: 10px;
+      height: 16px;
+      width: 16px;
       border-radius: 50%;
-      background: black;
+      background: var(--primary-color);
+      margin-top: -6px;
+      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);
     }
 
     input[type='range']:-moz-focusring {
@@ -87,21 +86,19 @@ class OxInputRange extends OxFormField {
 
     input[type='range']::-ms-track {
       width: 100%;
-      height: 1px;
-      background: black;
-      border-radius: 10px;
-      color: transparent;
-      border: none;
-      outline: none;
+      height: 7px;
+      background-color: rgba(0, 0, 0, 0.02);
+      border: 1px solid rgba(0, 0, 0, 0.05);
+      border-radius: 5px;
     }
     input[type='range']::-ms-thumb {
-      height: 10px;
-      width: 10px;
-      border-radius: 50%;
-      background: black;
       border: none;
-      outline: none;
-      margin-top: 2px;
+      height: 16px;
+      width: 16px;
+      border-radius: 50%;
+      background: var(--primary-color);
+      margin-top: -6px;
+      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);
     }
 
     input:focus {

package/src/ox-input-search.ts

@@ -26,9 +26,14 @@ export class OxInputSearch extends OxFormField {
         background-color: transparent;
         border: 0;
         border-bottom: var(--border-dark-color);
-        padding: var(--padding-narrow) var(--padding-narrow) 7px 25px;
-        font-size: var(--fontsize-large);
+        padding: var(--input-padding);
+        padding-left: 25px;
+        font: var(--input-font);
+        color: var(--primary-text-color);
+      }
+      [type='text']:focus {
         outline: none;
+        border-bottom: 1px solid var(--primary-color);
       }
 
       mwc-icon {
@@ -39,6 +44,7 @@ export class OxInputSearch extends OxFormField {
   ]
 
   @property({ type: String }) placeholder?: string
+  @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean
 
   @query('input') input!: HTMLInputElement
 
@@ -50,12 +56,26 @@ export class OxInputSearch extends OxFormField {
         .value=${this.value || ''}
         .placeholder=${this.placeholder || ''}
         @change=${(e: Event) => this._onChangeValue(e)}
+        @keydown=${(e: KeyboardEvent) => {
+          if (e.key === 'Enter') {
+            /* Even if the value has not changed, the enter key triggers a change event. */
+            e.preventDefault() /* Prevent change event from occurring twice. */
+
+            this.input.dispatchEvent(
+              new CustomEvent('change', {
+                detail: this.value
+              })
+            )
+          }
+        }}
       />
     `
   }
 
   firstUpdated() {
-    this.renderRoot.addEventListener('change', this._onChangeValue.bind(this))
+    if (this.autofocus) {
+      this.input.focus()
+    }
   }
 
   _onChangeValue(e: Event) {
@@ -69,6 +89,12 @@ export class OxInputSearch extends OxFormField {
         detail: this.value
       })
     )
+
+    if (this.selectAfterChange) {
+      requestAnimationFrame(() => {
+        this.input.select()
+      })
+    }
   }
 
   _onClickSearch(e: Event) {

package/src/ox-input-unit.ts

@@ -0,0 +1,123 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { OxPopupList } from '@operato/popup'
+
+import { OxFormField } from './ox-form-field'
+
+const UNIT_SYSTEMS: { [unit: string]: { [unit: string]: number } } = {
+  kg: {
+    mg: 1000000,
+    g: 1000,
+    ton: 0.001
+  },
+  rad: {
+    degree: 180 / Math.PI
+  }
+}
+
+@customElement('ox-input-unit')
+export class OxInputUnit extends OxFormField {
+  static styles = [
+    css`
+      input {
+        border: 0;
+        border-bottom: var(--border-dark-color);
+        padding: var(--input-padding);
+        font: var(--input-font);
+        color: var(--primary-text-color);
+      }
+      input:focus {
+        outline: none;
+        border-bottom: 1px solid var(--primary-color);
+      }
+
+      input::-webkit-outer-spin-button,
+      input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      input[type='number'] {
+        -moz-appearance: textfield;
+      }
+
+      div {
+        display: inline;
+        position: relative;
+        margin-left: var(--margin-narrow);
+        font: var(--label-font);
+        color: var(--label-color);
+        opacity: 0.7;
+      }
+    `
+  ]
+
+  @property({ type: String }) placeholder?: string
+  @property({ type: String, attribute: 'std-unit' }) stdUnit!: string
+  @property({ type: String, attribute: 'user-unit' }) userUnit?: string
+
+  @query('input') input!: HTMLInputElement
+  @query('ox-popup-list') popup!: OxPopupList
+
+  render() {
+    const userUnit = this.userUnit || this.stdUnit
+    const units = Object.keys(UNIT_SYSTEMS[this.stdUnit])
+    const rate = !this.userUnit || this.userUnit === this.stdUnit ? 1 : UNIT_SYSTEMS[this.stdUnit][this.userUnit] || 1
+
+    return html`
+      <input
+        type="number"
+        .value=${this._toUserUnit(this.value)}
+        placeholder=${this.placeholder}
+        @change=${(e: Event) => this._onChangeValue(e)}
+      />
+      <div
+        @click=${(e: Event) => {
+          const target = e.currentTarget as HTMLElement
+          this.popup.open({
+            right: 0,
+            top: target.offsetTop + target.offsetHeight
+          })
+        }}
+      >
+        ${userUnit}
+        <ox-popup-list
+          .value=${userUnit}
+          @select=${(e: CustomEvent) => {
+            this.userUnit = e.detail
+          }}
+        >
+          <div option value=${this.stdUnit}>${this.stdUnit}</div>
+          ${units.map(unit => html`<div option value=${unit}>${unit}</div>`)}
+        </ox-popup-list>
+      </div>
+    `
+  }
+
+  _onChangeValue(e: Event) {
+    this.value = this._toStdUnit(this.input.value)
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        bubbles: true,
+        composed: true,
+        detail: this.value
+      })
+    )
+  }
+
+  _toUserUnit(stdValue: string | number | undefined) {
+    const rate = !this.userUnit || this.userUnit === this.stdUnit ? 1 : UNIT_SYSTEMS[this.stdUnit][this.userUnit] || 1
+    return Number(stdValue) * rate
+  }
+
+  _toStdUnit(userValue: string | number | undefined) {
+    const rate = !this.userUnit || this.userUnit === this.stdUnit ? 1 : UNIT_SYSTEMS[this.stdUnit][this.userUnit] || 1
+    return isNaN(Number(userValue)) ? undefined : Number(userValue) / rate
+  }
+}

package/src/ox-input-value-map.ts

@@ -29,23 +29,18 @@ export class OxInputValueMap extends OxFormField {
     :host {
       display: flex;
       flex-direction: column;
-      align-content: center;
-
-      width: 100%;
-      overflow: hidden;
-      border: 1px solid #ccc;
+      border: var(--border-dark-color);
+      padding: var(--padding-narrow) var(--padding-narrow) 0 var(--padding-narrow);
     }
 
     div {
       display: flex;
       flex-flow: row nowrap;
-      align-items: center;
-
-      border-bottom: 1px solid #c0c0c0;
+      gap: var(--padding-default);
     }
 
     div:last-child {
-      border-bottom: none;
+      margin-bottom: var(--margin-narrow);
     }
 
     div > * {
@@ -55,14 +50,47 @@ export class OxInputValueMap extends OxFormField {
     }
 
     button {
-      width: 20px;
-      text-align: center;
+      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 + button {
+      margin-left: -5px;
+    }
+    button mwc-icon {
+      font-size: var(--fontsize-default);
+    }
+    button:focus,
+    button:hover,
+    button:active {
+      border: var(--button-activ-border);
+      background-color: var(--button-background-focus-color);
+      color: var(--theme-white-color);
     }
 
     input,
     ox-input-color {
       flex: 1;
     }
+    input {
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
+    }
+    input:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
+    }
+    button.hidden {
+      opacity: 0;
+      cursor: default;
+    }
 
     ox-input-color {
       --ox-input-color-input-color: {
@@ -80,8 +108,8 @@ export class OxInputValueMap extends OxFormField {
   `
 
   @property({ type: Object }) value: ValueMap = {}
-  @property({ type: String }) valuetype: 'string' | 'boolean' | 'color' | string = 'string'
-  @property({ type: String }) keytype: 'string' | 'boolean' | 'color' | string = 'string'
+  @property({ type: String }) valuetype: 'string' | 'boolean' | 'color' | 'number' | 'date' | string = 'string'
+  @property({ type: String }) keytype: 'string' | 'number' = 'number'
 
   private _changingNow: boolean = false
 
@@ -107,7 +135,10 @@ export class OxInputValueMap extends OxFormField {
                     .value=${item.value}
                     data-value-type=${this.valuetype}
                   />
-                `} <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">-</button>
+                `}
+            <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">
+              <mwc-icon>remove</mwc-icon>
+            </button>
           </div>
         `
       )}
@@ -118,7 +149,9 @@ export class OxInputValueMap extends OxFormField {
           : this.valuetype == 'color'
           ? html` <ox-input-color data-value value="" tabindex="-1" placeholder="value"> </ox-input-color> `
           : html` <input type="text" data-value placeholder="value" value="" data-value-type=${this.valuetype} /> `}
-        <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">+</button>
+        <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
+          <mwc-icon>add</mwc-icon>
+        </button>
       </div>
 
       <div data-record>
@@ -149,7 +182,10 @@ export class OxInputValueMap extends OxFormField {
                 .value=${(this.value && this.value.default) || ''}
                 data-value-type=${this.valuetype}
               />
-            `} <button class="record-action" @click=${() => this._sort()} tabindex="-1">&gt;</button>
+            `}
+        <button class="record-action" @click=${() => this._sort()} tabindex="-1">
+          <mwc-icon>chevron_right</mwc-icon>
+        </button>
       </div>
     `
   }