@operato/input 8.0.0-alpha.51 → 8.0.0-beta.1

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

@@ -1,437 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/web/icon/icon.js'
-import '@operato/popup/ox-popup-list.js'
-import './ox-select.js'
-
-import { css, html, nothing } from 'lit'
-import { customElement, property, queryAll } from 'lit/decorators.js'
-import { live } from 'lit/directives/live.js'
-
-import { ScrollbarStyles } from '@operato/styles'
-
-import { OxFormField } from './ox-form-field'
-
-const FLUIDS = ['CH4', 'C2H6', 'C3H8', 'C4H10', 'CO2', 'H2O', 'H2S', 'N2', 'N2O', 'NO2', 'O2']
-
-type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[]
-  ? ElementType
-  : never
-
-type FLUID = ArrayElement<typeof FLUIDS>
-
-type MassFraction = { [key: FLUID]: number }
-type ArrayedMassFraction = { key: FLUID; value: number }[]
-
-/**
- input component for mass-fraction map
- 
- Example:
- 
-   <ox-input-mass-fraction 
-     value=${map}
-   </ox-input-mass-fraction>
- */
-@customElement('ox-input-mass-fraction')
-export class OxInputMassFraction extends OxFormField {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-
-        --md-icon-size: var(--fontsize-default, 14px);
-      }
-
-      [records] {
-        flex: 1;
-
-        overflow: overlay;
-
-        > div {
-          display: flex;
-          flex-flow: row nowrap;
-          gap: var(--mass-fraction-gap, 3px);
-          margin-bottom: var(--spacing-small);
-        }
-
-        > [nofraction] {
-          display: block;
-          text-align: center;
-        }
-      }
-
-      [data-record-new] {
-        display: flex;
-        flex-flow: row nowrap;
-        gap: var(--mass-fraction-gap, 3px);
-        margin: var(--spacing-small) 0;
-      }
-
-      button {
-        display: inherit;
-        align-self: center;
-        border: var(--button-border);
-        border-radius: var(--border-radius);
-        background-color: var(--button-background-color);
-        padding: var(--mass-fraction-button-padding-vertical, 3px) var(--mass-fraction-button-padding-horizontal, 3px);
-        color: var(--button-color);
-        cursor: pointer;
-
-        &: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(--md-sys-color-primary-container);
-        }
-      }
-
-      input,
-      label,
-      ox-select {
-        border: 0;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-        font: var(--input-font);
-        color: var(--md-sys-color-on-primary-container);
-        min-width: 50px;
-      }
-
-      input,
-      label {
-        padding: var(--spacing-tiny);
-      }
-
-      label {
-        text-align: center;
-        text-wrap: nowrap;
-      }
-
-      ox-select {
-        padding: 0;
-      }
-
-      [data-key] {
-        flex: 2;
-      }
-
-      [data-value] {
-        flex: 1;
-      }
-
-      input:focus {
-        outline: none;
-        border-bottom: 1px solid var(--md-sys-color-on-primary-container);
-      }
-
-      button.hidden {
-        opacity: 0;
-        cursor: default;
-      }
-
-      ox-popup-list {
-        max-height: 300px;
-        overflow: auto;
-        left: 0;
-      }
-
-      [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>
-
-  private options = FLUIDS.map(fluid => html`<div option value=${fluid}>${fluid}</div>`)
-  private changingNow: boolean = false
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this._onChange.bind(this))
-  }
-
-  render() {
-    const value = !this.value || typeof this.value !== 'object' ? {} : this.value
-    const arrayed = this._toArray(value)
-
-    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`
-                <div data-record>
-                  <input type="text" data-key .value=${item.key} disabled />
-                  <input
-                    type="number"
-                    data-value
-                    placeholder="fraction"
-                    min="0"
-                    max="1"
-                    step="0.01"
-                    .value=${String(item.value)}
-                    list="value-template"
-                    ?disabled=${this.disabled}
-                  />
-                  ${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}
-                  >
-                    <md-icon>arrow_upward</md-icon>
-                  </button>
-                  <button
-                    class="record-action"
-                    @click=${(e: MouseEvent) => this._down(e)}
-                    tabindex="-1"
-                    ?disabled=${this.disabled || idx === arrayed.length - 1}
-                  >
-                    <md-icon>arrow_downward</md-icon>
-                  </button>
-                </div>
-              `
-            )
-          : html`<div nofraction>No Fractions</div>`}
-      </div>
-
-      ${this.disabled
-        ? nothing
-        : html`
-            <div data-record-new>
-              ${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
-              >
-                <md-icon>settings_suggest</md-icon>
-              </button>
-              <button
-                title="normalize fraction"
-                @click=${() => {
-                  this._normalize()
-                }}
-              >
-                <md-icon>repartition</md-icon>
-              </button>
-            </div>
-          `}
-    `
-  }
-
-  _onChange(e: Event) {
-    if (this.changingNow) {
-      return
-    }
-
-    this.changingNow = true
-
-    const input = e.target as HTMLInputElement
-
-    const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement
-
-    if (record.hasAttribute('data-record')) {
-      this._build()
-    } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {
-      this._add()
-    }
-
-    this.changingNow = false
-  }
-
-  _normalize() {
-    const fraction: MassFraction = this.value || {}
-    const sum = Object.values(fraction).reduce((a, b) => a + b, 0)
-    this.value = Object.keys(fraction).reduce((newvalue, key) => {
-      newvalue[key] = fraction[key] / sum
-      return newvalue
-    }, {} as MassFraction)
-
-    this.dispatchChangeEvent()
-  }
-
-  _build(includeNewRecord?: boolean) {
-    if (includeNewRecord) {
-      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>
-    } else {
-      var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>
-    }
-
-    var newmap: MassFraction = {}
-
-    for (var i = 0; i < records.length; i++) {
-      var record = records[i]
-
-      const key = (record.querySelector('[data-key]') as HTMLInputElement).value
-      const inputs = record.querySelectorAll(
-        '[data-value]:not([style*="display: none"])'
-      ) as NodeListOf<HTMLInputElement>
-
-      if (!inputs || inputs.length == 0) {
-        continue
-      }
-
-      var input = inputs[inputs.length - 1]
-
-      var value = input.value
-
-      if (key) {
-        newmap[key] = Number(value) || 0
-      }
-    }
-
-    this.value = newmap
-
-    this.dispatchChangeEvent()
-  }
-
-  /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */
-  _toArray(map: MassFraction) {
-    var array: ArrayedMassFraction = []
-
-    for (var key in map) {
-      array.push({
-        key: key,
-        value: map[key]
-      })
-    }
-
-    return array
-  }
-
-  _add() {
-    this._build(true)
-
-    const inputs = this.renderRoot.querySelectorAll(
-      '[data-record-new] input:not([style*="display: none"])'
-    ) as NodeListOf<HTMLInputElement & { value: any }>
-
-    for (var i = 0; i < inputs.length; i++) {
-      let input = inputs[i]
-
-      if (input.type == 'checkbox') input.checked = false
-      else input.value = ''
-    }
-
-    inputs[0].focus()
-  }
-
-  _delete(e: MouseEvent) {
-    const record = (e.target as Element).closest('[data-record]') as HTMLElement
-
-    ;(record!.querySelector('[data-key]') as HTMLInputElement)!.value = ''
-
-    this._build()
-  }
-
-  _up(e: MouseEvent) {
-    const record = (e.target as Element).closest('[data-record]') as HTMLElement
-    const array = Array.from(this.records)
-    const index = array.indexOf(record) - 1
-
-    if (index < 0) {
-      return
-    }
-
-    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
-
-      sum[key] = Number(value) || 0
-      return sum
-    }, {} as MassFraction)
-
-    this.dispatchChangeEvent()
-  }
-
-  _down(e: MouseEvent) {
-    const record = (e.target as Element).closest('[data-record]') as HTMLElement
-    const array = Array.from(this.records)
-    const index = array.indexOf(record)
-
-    if (index > array.length) {
-      return
-    }
-
-    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
-
-      sum[key] = Number(value) || 0
-      return sum
-    }, {} as MassFraction)
-
-    this.dispatchChangeEvent()
-  }
-
-  dispatchChangeEvent() {
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
-  }
-}

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

@@ -1,135 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import './ox-input-color.js'
-import '@material/web/icon/icon.js'
-
-import { css, html } from 'lit'
-import { customElement, property, query, queryAll } from 'lit/decorators.js'
-import { random as randomColor, TinyColor } from '@ctrl/tinycolor'
-
-import { OxFormField } from './ox-form-field.js'
-import { OxInputColor } from './ox-input-color.js'
-
-/**
-색상 배열을 편집하는 컴포넌트이다.
-
-새로운 색상을 추가하고자 할 때는 `+` 버튼을 클릭한다.<br />
-색상을 제거하고자 할 때는 `-` 버튼을 클릭한다.<br />
-
-Example:
-
-    <ox-input-multiple-colors values=${values}>
-    </ox-input-multiple-colors>
-*/
-
-@customElement('ox-input-multiple-colors')
-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;
-      grid-gap: var(--spacing-medium);
-      align-items: center;
-      justify-content: left;
-      margin-bottom: var(--spacing-tiny, 2px);
-    }
-
-    ox-input-color {
-      width: 100%;
-    }
-
-    md-icon {
-      pointer-events: none;
-    }
-
-    button {
-      height: 100%;
-      border: var(--button-border);
-      border-radius: 0;
-      background-color: transparent;
-      line-height: 0.8;
-      color: var(--md-sys-color-on-surface);
-      cursor: pointer;
-    }
-
-    button:hover,
-    button:active {
-      border: var(--button-activ-border);
-      background-color: var(--md-sys-color-on-primary);
-      color: var(--md-sys-color-primary);
-    }
-  `
-
-  @property({ type: Array }) value: string[] = []
-
-  @query('#colors-container') colorsContainer!: HTMLDivElement
-  @queryAll('ox-input-color') colors!: NodeListOf<OxInputColor>
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this._onValueChanged.bind(this))
-  }
-
-  render() {
-    return html`
-      <div id="colors-container">
-        ${(this.value || []).map(
-          (item, index) => html`
-            <div>
-              <button @tap=${(e: Event) => this._appendEditorColor(e)} data-index=${index} ?disabled=${this.disabled}>
-                <md-icon>add</md-icon>
-              </button>
-              <ox-input-color .value=${item} ?disabled=${this.disabled}> </ox-input-color>
-
-              ${(this.value || []).length > 1
-                ? html`
-                    <button
-                      @tap=${(e: Event) => this._removeEditorColor(e)}
-                      data-index=${index}
-                      ?disabled=${this.disabled}
-                    >
-                      <md-icon>remove</md-icon>
-                    </button>
-                  `
-                : html``}
-            </div>
-          `
-        )}
-      </div>
-    `
-  }
-
-  _onValueChanged() {
-    this.value = Array.from(this.colors).map(color => color.value!)
-  }
-
-  _appendEditorColor(e: Event) {
-    const idx = Number((e.target as HTMLElement).getAttribute('data-index'))
-    const hue = this.value[idx] || '#fff'
-    this.value.splice(idx + 1, 0, randomColor({ hue }).toRgbString())
-    this.value = [...this.value]
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  _removeEditorColor(e: Event) {
-    var values = []
-    for (var i = 0; i < this.value.length; i++) {
-      if (i == Number((e.target as HTMLElement).getAttribute('data-index'))) {
-        continue
-      } else {
-        values.push(this.value[i])
-      }
-    }
-
-    this.value = values
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-}