@operato/input 1.1.21 → 1.1.23

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "1.1.21",
+  "version": "1.1.23",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "publishConfig": {
@@ -46,7 +46,8 @@
     "./ox-input-table.js": "./dist/src/ox-input-table.js",
     "./ox-input-scene-component-id.js": "./dist/src/ox-input-scene-component-id.js",
     "./ox-input-work-shift.js": "./dist/src/ox-input-work-shift.js",
-    "./ox-input-hashtags.js": "./dist/src/ox-input-hashtags.js"
+    "./ox-input-hashtags.js": "./dist/src/ox-input-hashtags.js",
+    "./ox-input-mass-fraction.js": "./dist/src/ox-input-mass-fraction.js"
   },
   "scripts": {
     "clean": "npx rimraf dist",
@@ -66,7 +67,7 @@
     "@material/mwc-icon": "^0.27.0",
     "@operato/color-picker": "^1.1.13",
     "@operato/i18n": "^1.1.13",
-    "@operato/popup": "^1.1.13",
+    "@operato/popup": "^1.1.23",
     "@operato/styles": "^1.1.13",
     "@operato/utils": "^1.1.15",
     "@polymer/paper-dropdown-menu": "^3.2.0",
@@ -114,5 +115,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "5d0a919204e43656222fe0bdf6d81874912b172b"
+  "gitHead": "073fdb17432e4c45d55ad8f6fd0ad90158d433f0"
 }

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

@@ -0,0 +1,482 @@
+/**
+ * @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;
+      }
+
+      :host > div {
+        display: flex;
+        flex-flow: row nowrap;
+        gap: var(--mass-fraction-gap, 4px);
+        margin-bottom: var(--margin-narrow);
+      }
+
+      button {
+        border: var(--button-border);
+        border-radius: var(--border-radius);
+        background-color: var(--button-background-color);
+        padding: var(--mass-fraction-button-padding-vertical, 2px) var(--mass-fraction-button-padding-horizontal, 4px);
+        color: var(--button-color);
+        cursor: pointer;
+      }
+      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-select {
+        border: 0;
+        border-bottom: var(--border-dark-color);
+        padding: var(--input-padding);
+        font: var(--input-font);
+        color: var(--primary-text-color);
+        min-width: 50px;
+      }
+
+      [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;
+      }
+    `
+  ]
+
+  @property({ type: Object }) defaultValue: MassFraction = {}
+  @property({ type: Object }) value: MassFraction = {}
+
+  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`
+      ${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>
+        `
+      )}
+
+      <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()
+  }
+
+  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>
+
+  _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
+  }
+}