@operato/input 1.1.21 → 1.1.24

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

@@ -0,0 +1,517 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/mwc-icon'
+import '@operato/popup/ox-popup-list.js'
+import { ScrollbarStyles } from '@operato/styles'
+
+import { css, html } from 'lit'
+import { customElement, property, queryAll } from 'lit/decorators.js'
+import { live } from 'lit/directives/live.js'
+
+import { OxFormField } from './ox-form-field'
+import './ox-select.js'
+
+const FLUIDS = [
+  '1-Butene',
+  'Acetone',
+  'Air',
+  'Ammonia',
+  'Argon',
+  'Benzene',
+  'CO2',
+  'CarbonMonoxide',
+  'CarbonylSulfide',
+  'CycloHexane',
+  'CycloPropane',
+  'Cyclopentane',
+  'D4',
+  'D5',
+  'D6',
+  'Deuterium',
+  'Dichloroethane',
+  'DiethylEther',
+  'DimethylCarbonate',
+  'DimethylEther',
+  'Ethane',
+  'Ethanol',
+  'EthylBenzene',
+  'Ethylene',
+  'EthyleneOxide',
+  'Fluorine',
+  'HFE143m',
+  'HeavyWater',
+  'Helium',
+  'Hydrogen',
+  'HydrogenChloride',
+  'HydrogenSulfide',
+  'IsoButane',
+  'IsoButene',
+  'Isohexane',
+  'Isopentane',
+  'Krypton',
+  'MD2M',
+  'MD3M',
+  'MD4M',
+  'MDM',
+  'MM',
+  'Methane',
+  'Methanol',
+  'MethylLinoleate',
+  'MethylLinolenate',
+  'MethylOleate',
+  'MethylPalmitate',
+  'MethylStearate',
+  'Neon',
+  'Neopentane',
+  'Nitrogen',
+  'NitrousOxide',
+  'Novec649',
+  'OrthoDeuterium',
+  'OrthoHydrogen',
+  'Oxygen',
+  'ParaDeuterium',
+  'ParaHydrogen',
+  'Propylene',
+  'Propyne',
+  'R11',
+  'R113',
+  'R114',
+  'R115',
+  'R116',
+  'R12',
+  'R123',
+  'R1233zd(E)',
+  'R1234yf',
+  'R1234ze(E)',
+  'R1234ze(Z)',
+  'R124',
+  'R1243zf',
+  'R125',
+  'R13',
+  'R134a',
+  'R13I1',
+  'R14',
+  'R141b',
+  'R142b',
+  'R143a',
+  'R152A',
+  'R161',
+  'R21',
+  'R218',
+  'R22',
+  'R227EA',
+  'R23',
+  'R236EA',
+  'R236FA',
+  'R245ca',
+  'R245fa',
+  'R32',
+  'R365MFC',
+  'R40',
+  'R404A',
+  'R407C',
+  'R41',
+  'R410A',
+  'R507A',
+  'RC318',
+  'SES36',
+  'SulfurDioxide',
+  'SulfurHexafluorid',
+  'Toluene',
+  'Water',
+  'Xenon',
+  'cis-2-Butene',
+  'm-Xylene',
+  'n-Butane',
+  'n-Decane',
+  'n-Dodecane',
+  'n-Heptane',
+  'n-Hexane',
+  'n-Nonane',
+  'n-Octane',
+  'n-Pentane',
+  'n-Propane',
+  'n-Undecane',
+  'o-Xylene',
+  'p-Xylene',
+  'trans-2-Butene'
+]
+
+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;
+      }
+
+      [records] {
+        flex: 1;
+
+        overflow: overlay;
+      }
+
+      [records] > div {
+        display: flex;
+        flex-flow: row nowrap;
+        gap: var(--mass-fraction-gap, 4px);
+        margin-bottom: var(--margin-narrow);
+      }
+
+      [data-record-new] {
+        display: flex;
+        flex-flow: row nowrap;
+        gap: var(--mass-fraction-gap, 3px);
+        margin: var(--margin-narrow) 0;
+      }
+
+      button {
+        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;
+      }
+      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);
+      }
+
+      input,
+      ox-select {
+        border: 0;
+        border-bottom: var(--border-dark-color);
+        font: var(--input-font);
+        color: var(--primary-text-color);
+        min-width: 50px;
+      }
+
+      input {
+        padding: var(--input-padding);
+      }
+
+      ox-select {
+        padding: 0;
+      }
+
+      [data-key] {
+        flex: 2;
+      }
+
+      [data-value] {
+        flex: 1;
+      }
+
+      input:focus {
+        outline: none;
+        border-bottom: 1px solid var(--primary-color);
+      }
+
+      button.hidden {
+        opacity: 0;
+        cursor: default;
+      }
+
+      ox-popup-list {
+        max-height: 300px;
+        overflow: auto;
+        left: 0;
+      }
+
+      [records] > [nofraction] {
+        display: block;
+        text-align: center;
+      }
+    `
+  ]
+
+  @property({ type: Object }) defaultValue: MassFraction = {}
+  @property({ type: Object }) value: MassFraction = {}
+
+  @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>
+        ${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"
+                  />
+                  <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"
+                    ?disabled=${idx === 0}
+                  >
+                    <mwc-icon>arrow_upward</mwc-icon>
+                  </button>
+                  <button
+                    class="record-action"
+                    @click=${(e: MouseEvent) => this._down(e)}
+                    tabindex="-1"
+                    ?disabled=${idx === arrayed.length - 1}
+                  >
+                    <mwc-icon>arrow_downward</mwc-icon>
+                  </button>
+                </div>
+              `
+            )
+          : html`<div nofraction>No Fractions</div>`}
+      </div>
+
+      <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>
+        <button
+          title="fill with the values suggested"
+          @click=${() => {
+            this.value = { ...this.defaultValue }
+            this.dispatchChangeEvent()
+          }}
+        >
+          <mwc-icon>settings_suggest</mwc-icon>
+        </button>
+        <button
+          title="normalize fraction"
+          @click=${() => {
+            this._normalize()
+          }}
+        >
+          <mwc-icon>repartition</mwc-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-unit-number.ts

@@ -175,6 +175,7 @@ export class OxInputUnit extends OxFormField {
         padding: var(--input-padding);
         font: var(--input-font);
         color: var(--primary-text-color);
+        min-width: 120px;
       }
 
       input:focus {
@@ -198,6 +199,7 @@ export class OxInputUnit extends OxFormField {
         margin-left: var(--margin-narrow);
         font: var(--label-font);
         color: var(--label-color);
+        min-width: 24px;
       }
     `
   ]

package/src/ox-select.ts

@@ -119,7 +119,7 @@ export class Select extends OxFormField {
   }
 
   async updated(changes: PropertyValues<this>) {
-    const popupList = this.querySelector('ox-popup-list') as OxPopupList
+    // const popupList = this.querySelector('ox-popup-list') as OxPopupList
 
     if (changes.has('value')) {
       const popupList = this.querySelector('ox-popup-list') as OxPopupList
@@ -129,8 +129,6 @@ export class Select extends OxFormField {
 
       this.label = popupList.getSelectedLabels()
     }
-
-    this.label = popupList.getSelectedLabels()
   }
 
   expand() {

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

@@ -0,0 +1,54 @@
+import '../src/ox-input-mass-fraction.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-mass-fraction',
+  component: 'ox-input-mass-fraction',
+  argTypes: {
+    name: { control: 'text' },
+    value: { control: 'object' },
+    defaultValue: { control: 'object' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: object
+  defaultValue?: object
+}
+
+const Template: Story<ArgTypes> = ({ name = 'mass-fraction', value = {}, defaultValue = {} }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <style>
+    body {
+    }
+  </style>
+
+  <ox-input-mass-fraction
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+    .defaultValue=${defaultValue}
+  >
+  </ox-input-mass-fraction>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'mass-fraction',
+  defaultValue: {
+    R410A: 0.8,
+    Water: 0.1,
+    '1-Butene': 0.1
+  }
+}